The default type styling in PageLines Framework may not meet your design requirements and therefore, you may want to use custom fonts such as Google fonts.
In PageLines Framework, this process is straightforward and takes only a few moments to have your desired font applied throughout your site.
The Typography settings that appear when PageLines Framework is installed and active. Allow you to quickly add custom fonts to your site and apply them to three types styles:
To add Google Fonts to your site, first locate the font you wish to use. In this example, we will be applying the Oswald font to all three type styles.
First, we need to select the styles and character set, these are steps 1 & 2 on the Oswald quick-start page.
Once, we have selected the styles and character set, jump to step 3 on the quick-start page. Copy the code provided by Google Fonts (in this example we use the Standard code option.
<link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
Simply paste the stylesheet code into the External Font Scripts located in the Typography settings
Once the code has been added to the External Font Scripts editor. Copy the
font-family CSS on step 4 of the fonts quick-start page.
font-family: 'Oswald', sans-serif;
The Google Fonts API will generate the necessary browser-specific CSS to use the fonts. All you need to do is add the font name to your type styles options.
You can also include
font-weight, if the font supports it or you added that style in Step 1. You can see an example in the image above, where we have added
font-weight: 700; to both Major/Minor Header Styles.
The ability to include multiple fonts is also supported. If you wish to use multiple fonts for example, one font for your Primary and another for your Major & Minor Headers.
Simply follow the steps above and add the font stylesheets to the External Font Scripts editor as shown in Step 2.
If you're using a third-party theme, you will not be able to use these instructions to add custom fonts. These instructions are only available when PageLines Framework is installed and the active theme.
If you wish to use a third party theme and include custom fonts, please visit your theme providers site for instuctions.