Fonts

With the release of Publii version 0.39.0, there has been a significant change in our themes regarding the way fonts are loaded. Previously, the Google font loaded directly from its CDN. However, since most browsers have blocked resource-caching from transferring across domains, users must re-download the font files for every site they visit that uses the same font, regardless of whether it was downloaded and cached previously from another site. Even more importantly, the EU court has deemed that Google Fonts (loaded directly from its CDN) are not compliant with the GDPR, which requires consent to be sought before any personally identifiable information can be collected and stored.

Due to these changes, all fonts provided by Publii will, from now on, be loaded locally (self-hosting), which confers a few benefits to our earlier solution:

• Avoids an Extra DNS Lookup
• Removes Non-Minified CSS
• Provides Better Control over Cache Settings
• Complies with the GDPR

Variable fonts

To reduce the number of font files and provide greater control over them, our themes come with variable fonts only. With variable fonts, instead of loading a normal and bold version of the font, Publii will only load a single file. This is important because Publii allows for two different fonts to be loaded; if both a standard and bold version of each of these fonts were included on the site, the total weight (that is, download size) of the files would be too much and could negatively affect load times.

Another advantage of using variable fonts is that now we can manipulate their size across the full range; instead of only being able to choose between displaying the font at 400 (normal) or 700 (bold), we can choose to display a given font at a seemingly random size such as 436, which affords us even greater control when customizing the style of our site. 

Pretty great, isn't it?

One more thing to be aware of; you may have noticed that we have omitted some trendy fonts like “Open Sans” or “Noto Sans” from the fonts included in Publii. We decided not to include these fonts as their weight (size) is too big, which is unacceptable when building a lightweight static website such as the Publii CMS is designed for.

Explore the fonts used in official Publii themes

If you’d like to see how each typeface looks in action, click the button below to open a curated Google Fonts collection. This preview showcases all font families included across Publii themes, allowing you to explore their styles, weights, and overall appearance directly on the Google Fonts platform.

View fonts on Google Fonts →

The list of available fonts with their specification

Below is the list of all fonts used in our themes, including their typeface, weight, or size. 

How to Add a Custom Font

Since official Publii themes work best with variable fonts, ensure you have one in the woff2 format. It's not worth supporting other formats as all modern browsers support woff2, which provides the best compression.

To add the variable font to your theme, follow these steps:

1. Go to this location: /Documents/Publii/sites/Your_site/input/themes/Your_theme/
2. Copy your font file, your_font.woff2, to the folder /assets/dynamic/fonts/your_font/
3. Open the config.json file and add the name of your font in two sections: fontBody and fontHeadings, then save the changes.
   

   {
       "name": "fontBody",
       "label": "Body font",
       "group": "Fonts",
       "value": "system-ui",
       "type": "select",
       "options": [
           {
               "label": "Your Font Name",
               "value": "your-font-name",
               "group": "Serif"
           },
   ...
   
   {
       "name": "fontHeadings",
       "label": "Headings font (H1-H6)",
       "group": "Fonts",
       "value": "system-ui",
       "type": "select",
       "options": [
           {
               "label": "Your Font Name",
               "value": "your-font-name",
               "group": "Serif"
           },
   ...

4. Then open the theme-variables.js file and add your font in the fontParams section, specifying the font family and weight, and save the changes.
   

   var generateThemeVariables = function (params) {
     let fontParams = {
       your-font-name: {
         name: 'Your Font Name',
         family: '\'Your Font Family\', serif',
         weight: '100 900'
       },
   ...

Important: We recommend creating file overrides to avoid losing your changes during theme updates unless it's a custom theme. You can learn more about overriding Publii themes in this guide.

That's it; now you should be able to select the font from the theme options and use it on your site.