Adding custom fonts

Adding Fonts from Pugpig on Vimeo.

To add custom fonts to Pugpig Express you will need to be able to write CSS. This can all be done within the WordPress interface. 

Quick guide:

1. Upload fonts to media library
2. Write custom CSS in Appearance > Custom CSS. Use the font paths from the media library in your Pugpig-friendly @font-face declaration.
3. Add the font paths to the extra manifest item field in Settings > Pugpig

Detailed guide: 

Add the font files

To add the font files navigate to the Media tab on the left, and select 'Add New'. Select your font files - you can upload multiple. 

Formats accepted:

• TTF
• OTF
• WOFF
• WOFF2

Write the Custom CSS

To apply your fonts to the layouts you need to write custom CSS that overrides the current styles. 

You will need to load your fonts using @font-face, we suggest using the declaration below, as it is known to work with the app containers. The local reference will be used in native apps. If you need to add more file type, add them in the usual font-face way.

@font-face {
 font-weight: normal;
 font-style: normal;
 font-family: "My Font"; /* Use this to reference the font in your CSS */
 src: local("My Font"), /* This should be the font PostScript name */
 url("https://express.pugpig.com/wp-content/uploads/2015/07/myfont.ttf")
 format("truetype"); /* The URL to the font from the media library */
}

Add the font paths to the manifest

In Settings > Pugpig, copy the FULL paths to all your fonts into the 'Theme files to ADD to manifests' field

(The path to the URL you should add is the 'File URL' for the font you see when you view/edit the font in the media library.)