How to add custom fonts to Publii CMS

This instruction is for Publii 0.4.3 and themes updated to that version (e.g. Simple 2.7.0). In this example I'll add the Poppins font.

Prepare Override folder

Go to Publii\sites\{website name}\input\themes.

Find the theme you want to implement new fonts. In this example I'll use theme Simple, so I have folder simple in Publii\sites\{website name}\input\themes directory.

Inside directory Publii\sites\{website name}\input\themes create override folder using formula {theme name}-override. In this case it will be folder simple-override.

Inside simple-override create a new subfolder assets.

Inside folder assets, create folder dynamic.

Inside folder dynamic, create subfolder fonts.

Copying files from the main theme

From folder simple copy files config.json and theme-variables.js into folder simple-override.

Download font files

If you want to use some Google fonts, go to https://gwfh.mranftl.com/fonts

Select one font you want to download, choose variables, and then click download.

Unzip the downloaded file into a new folder with the name same as the font (for font Poppins, extract it into folder poppins; for font Noto Sans extract it into folder notosans).

There will be one or several .woff2 files. 

If font name has two or more words, rename it by deleting - (minus) in the font name. Example: noto-sans-latin.woff2 -> notosans-latin.woff2. 

Move that folder inside of simple-override\assets\dynamic\fonts. 

Update config.json and theme-variables.js

Go to folder themes\simple-override.

In file config.json, find section "name": "fontHeadings", and inside of it add the following code:

{
  "label": "Poppins",
  "value": "poppins",
  "group": "Sans Serif"
},

 So it looks like this

Add the following code into file theme-variables.js:

poppins: {
    name: 'Poppins',
    family: '\'Poppins\', sans-serif',
    weight: '300 900'
},

To add this font as a body font, find that section in config.json file and paste font code inside that section. 

Try it

Restart Publii.

From the Theme - Fonts - Heading font select Poppins, and preview the site.

All the headings will now use Poppins font family.

Need help with custom fonts, email me here.