Shop, Pro, Biz
Google provides a hosted service with hundreds of free open-source fonts. This service is called Google Web Fonts
. They provide various methods of embedding the font of your choice into your site. In this article we will show you the best way to implement Google Web Fonts
into your Paspartout.
Next you will need to obtain the embed code. There are three different options:
Next you will need only the code between de <script> tags. That is the code selected in the screenshot below:
Make sure you do NOT copy the script tags as this will create errors on your website and the code will not work.
Create a new .js file:
Call it something like "fonts" and make it available for "all pages":
Click on the edit button for that file:
And paste the Google Web Font embed code into it:
Do not forget to click save. If you want to add more fonts later on you can add their code on the same fonts.js file in Paspartout. No need to create a different file for every font.
The last thing you have to do now is add the CSS code where you want the font to be applied. If you want to use it as a main font on your site, head over to the css tab in your theme editor, edit the main.css file and use the following code (with the correct font name of course):
Note: the CSS selector body.ppb.hybrid will ensure the font is overruling the font from the font menu and will be used on every device.