Logo
en nl

CSS in Paspartout - 4. Google Fonts

last updated: 27/03/2012
difficulty: medium
licenses: 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.

First browse the font list until you find a font you like and click the "Quick Use" button:

Medium-google-fonts-quickuse
Next you will need to obtain the embed code. There are three different options:

- Standard
- @import
- Javascript

We are going to use the Javascript option:

Medium-google-fonts-option

Next you will need only the code between de <script> tags. That is the code selected in the screenshot below:

Medium-google-fonts-selection

Make sure you do NOT copy the script tags as this will create errors on your website and the code will not work.

Next go to the theme section in your Paspartout admin and select the javascript tab:

Medium-google-font-javascript
Create a new .js file:

Medium-google-font-new-js

Call it something like "fonts" and make it available for "all pages":

Medium-google-file-settings

Click on the edit button for that file:

Medium-edit-google-font

And paste the Google Web Font embed code into it:

Medium-google-font-code

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):

Medium-google-font-css

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.



related articles

CSS in Paspartout - 1. Quickstart CSS in Paspartout - 2. Images CSS in Paspartout - 3. Fonts Using Google Webmaster Tools