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.

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.

Name	Weight range	Size
Serif
Aleo	100 - 900	66 kb
Aleo Italic	100 - 900	67 kb
Andada Pro	400 - 840	106 kb
Andada Pro Italic	400 - 840	111 kb
Besley	400 - 900	49 kb
Besley Italic	400 - 900	52 kb
Bitter	100 - 900	108 kb
Bitter Italic	100 - 900	112 kb
Brygada 1918	400 - 700	89 kb
Brygada 1918 Italic	400 - 700	94 kb
Domine	400 - 700	40 kb
Faustina	300 - 800	49 kb
Faustina Italic	300 - 800	52 kb
Frank Ruhl Libre	300 - 900	78 kb
Imbue	100 - 900	90 kb
Kreon	300 - 700	33 kb
Labrada	100 - 900	86 kb
Labrada Italic	100 - 900	87 kb
Lora	400 - 700	83 kb
Lora Italic	400 - 700	90 kb
Manuale	300 - 800	76 kb
Manuale Italic	300 - 800	85 kb
Petrona	100 - 900	86 kb
Petrona Italic	100 - 900	94 kb
Playfair Display	400 - 900	106 kb
Playfair Display Italic	400 - 900	104 kb
Roboto Slab	100 - 900	117 kb
Rokkitt	100 - 900	53 kb
Rokkitt Italic	100 - 900	55 kb
Yrsa	300 - 700	90 kb
Yrsa Italic	300 - 700	108 kb
Sans Serif
Advent Pro	100 - 900	66 kb
Advent Pro Italic	100 - 900	120 kb
Antonio	100 - 700	37 kb
Archivo Narrow	400 - 700	37 kb
Archivo Narrow Italic	400 - 700	40 kb
Asap	400 - 700	57 kb
Asap Italic	400 - 700	181 kb
Assistant	200 - 800	37 kb
Cabin	400 - 700	45 kb
Cabin Italic	400 - 700	65 kb
Cairo	200 - 900	74 kb
Dosis	200 - 800	47 kb
Exo	100 - 900	54 kb
Exo Italic	100 - 900	58 kb
Figtree	300 - 900	29 kb
Figtree Italic	300 - 900	28 kb
Glory	100 - 800	42 kb
Glory Italic	100 - 800	44 kb
Heebo	100 - 900	41 kb
Instrument Sans	400 - 700	49 kb
Instrument Sans Italic	400 - 700	95 kb
Jura	300 - 700	78 kb
Karla	200 - 800	42 kb
Karla Italic	200 - 800	48 kb
Lexend	100 - 900	74 kb
Libre Franklin	100 - 900	44 kb
Libre Franklin Italic	100 - 900	49 kb
Manrope	100 - 900	53 kb
Maven Pro	400 - 900	42 kb
Merriweather Sans	300 - 800	93 kb
Montserrat	100 - 900	125 kb
Montserrat Italic	100 - 900	130 kb
Nunito	200 - 900	100 kb
Nunito Italic	200 - 900	110 kb
Orbitron	400 - 900	16 kb
Oswald	200 - 700	66 kb
Plus Jakarta Sans	200 - 800	61 kb
Plus Jakarta Sans Italic	200 - 800	65 kb
Public Sans	100 - 900	40 kb
Public Sans Italic	100 - 900	44 kb
Quicksand	300 - 700	52 kb
Raleway	100 - 900	128 kb
Raleway Italic	100 - 900	132 kb
Red Hat Display	300 - 900	41 kb
Red Hat Display Italic	300 - 900	41 kb
Roboto Flex	100 - 900	78 kb
Rubik	300 - 900	77 kb
Rubik Italic	300 - 900	116 kb
Ruda	400 - 900	38 kb
Smooch Sans	100 - 900	41 kb
Spartan	100 - 900	44 kb
Urbanist	100 - 900	38 kb
Urbanist Italic	100 - 900	41 kb
Work Sans	100 - 900	131 kb
Work Sans Italic	100 - 900	124 kb
Yanone Kaffeesatz	200 - 700	53 kb
Cursive
Big Shoulders Display	100 - 900	82 kb
Comfortaa	300 - 700	80 kb
Dancing Script	400 - 700	59 kb
Gluten	100 - 900	79 kb
Lemonada	300 - 700	81 kb
Monospace
JetBrains Mono	100 - 800	71 kb
JetBrains Mono Italic	100 - 800	76 kb
Red Hat Mono	300 - 700	29 kb
Source Code Pro	200 - 900	85 kb
Source Code Pro Italic	200 - 900	71 kb

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:

Go to this location: /Documents/Publii/sites/Your_site/input/themes/Your_theme/
Copy your font file, your_font.woff2, to the folder /assets/dynamic/fonts/your_font/

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"
        },
...

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.