Download

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 Preview Weight range Size
Serif
Aleo
100 - 900 66 kb
Andada Pro
400 - 840 106 kb
Besley
400 - 900 49 kb
Bitter
100 - 900 108 kb
Brygada 1918
400 - 700 89 kb
Domine
400 - 700 40 kb
Faustina
300 - 800 49 kb
Frank Ruhl Libre
300 - 900 78 kb
Imbue
100 - 900 90 kb
Kreon
300 - 700 33 kb
Labrada
100 - 900 86 kb
Lora
400 - 700 83 kb
Manuale
300 - 800 76 kb
Petrona
100 - 900 86 kb
Playfair Display
400 - 900 106 kb
Roboto Slab
100 - 900 117 kb
Rokkitt
100 - 900 53 kb
Yrsa
300 - 700 90 kb
Sans Serif
Advent Pro
100 - 900 66 kb
Antonio
100 - 700 37 kb
Archivo Narrow
400 - 700 37 kb
Asap
400 - 700 57 kb
Assistant
200 - 800 37 kb
Cabin
400 - 700 45 kb
Cairo
200 - 900 74 kb
Dosis
200 - 800 47 kb
Exo
100 - 900 54 kb
Figtree
300 - 900 29 kb
Glory
100 - 800 42 kb
Heebo
100 - 900 41 kb
Instrument Sans
400 - 700 49 kb
Jura
300 - 700 78 kb
Karla
200 - 800 42 kb
Lexend
100 - 900 74 kb
Libre Franklin
100 - 900 44 kb
Manrope
100 - 900 53 kb
Maven Pro
400 - 900 42 kb
Merriweather Sans
300 - 800 93 kb
Montserrat
100 - 900 125 kb
Nunito
200 - 900 100 kb
Orbitron
400 - 900 16 kb
Oswald
200 - 700 66 kb
Plus Jakarta Sans
200 - 800 61 kb
Public Sans
100 - 900 40 kb
Quicksand
300 - 700 52 kb
Raleway
100 - 900 128 kb
Red Hat Display
300 - 900 41 kb
Roboto Flex
100 - 900 78 kb
Rubik
300 - 900 77 kb
Ruda
400 - 900 38 kb
100 - 900 41 kb
Spartan
100 - 900 44 kb
Urbanist
100 - 900 38 kb
Work Sans
100 - 900 131 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
Red Hat Mono
300 - 700 29 kb
Source Code Pro
200 - 900 85 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:

  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.

What are you waiting for?

Start building your site today.

  1. 1 Download Publii
  2. 2 Write your content
  3. 3 Publish your site
Create website