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. 

NamePreviewWeight rangeSize
Serif
Aleo
100 - 90066 kb
Aleo Italic
100 - 90067 kb
Andada Pro
400 - 840106 kb
Andada Pro Italic
400 - 840111 kb
Besley
400 - 90049 kb
Besley Italic
400 - 90052 kb
Bitter
100 - 900108 kb
Bitter Italic
100 - 900112 kb
Brygada 1918
400 - 70089 kb
Brygada 1918 Italic
400 - 70094 kb
Domine
400 - 70040 kb
Faustina
300 - 80049 kb
Faustina Italic
300 - 80052 kb
Frank Ruhl Libre
300 - 90078 kb
Imbue
100 - 90090 kb
Kreon
300 - 70033 kb
Labrada
100 - 90086 kb
Labrada Italic
100 - 90087 kb
Lora
400 - 70083 kb
Lora Italic
400 - 70090 kb
Manuale
300 - 80076 kb
Manuale Italic
300 - 80085 kb
Petrona
100 - 90086 kb
Petrona Italic
100 - 90094 kb
Playfair Display
400 - 900106 kb
Playfair Display Italic
400 - 900104 kb
Roboto Slab
100 - 900117 kb
Rokkitt
100 - 90053 kb
Rokkitt Italic
100 - 90055 kb
Yrsa
300 - 70090 kb
Yrsa Italic
300 - 700108 kb
Sans Serif
Advent Pro
100 - 90066 kb
Advent Pro Italic
100 - 900120 kb
Antonio
100 - 70037 kb
Archivo Narrow
400 - 70037 kb
Archivo Narrow Italic
400 - 70040 kb
Asap
400 - 70057 kb
Asap Italic
400 - 700181 kb
Assistant
200 - 80037 kb
Cabin
400 - 70045 kb
Cabin Italic
400 - 70065 kb
Cairo
200 - 90074 kb
Dosis
200 - 80047 kb
Exo
100 - 90054 kb
Exo Italic
100 - 90058 kb
Figtree
300 - 90029 kb
Figtree Italic
300 - 90028 kb
Glory
100 - 80042 kb
Glory Italic
100 - 80044 kb
Heebo
100 - 90041 kb
Instrument Sans
400 - 70049 kb
Instrument Sans Italic
400 - 70095 kb
Jura
300 - 70078 kb
Karla
200 - 80042 kb
Karla Italic
200 - 80048 kb
Lexend
100 - 90074 kb
Libre Franklin
100 - 90044 kb
Libre Franklin Italic
100 - 90049 kb
Manrope
100 - 90053 kb
Maven Pro
400 - 90042 kb
Merriweather Sans
300 - 80093 kb
Montserrat
100 - 900125 kb
Montserrat Italic
100 - 900130 kb
Nunito
200 - 900100 kb
Nunito Italic
200 - 900110 kb
Orbitron
400 - 90016 kb
Oswald
200 - 70066 kb
Plus Jakarta Sans
200 - 80061 kb
Plus Jakarta Sans Italic
200 - 80065 kb
Public Sans
100 - 90040 kb
Public Sans Italic
100 - 90044 kb
Quicksand
300 - 70052 kb
Raleway
100 - 900128 kb
Raleway Italic
100 - 900132 kb
Red Hat Display
300 - 90041 kb
Red Hat Display Italic
300 - 90041 kb
Roboto Flex
100 - 90078 kb
Rubik
300 - 90077 kb
Rubik Italic
300 - 900116 kb
Ruda
400 - 90038 kb
Smooch Sans
100 - 90041 kb
Spartan
100 - 90044 kb
Urbanist
100 - 90038 kb
Urbanist Italic
100 - 90041 kb
Work Sans
100 - 900131 kb
Work Sans Italic
100 - 900124 kb
Yanone Kaffeesatz
200 - 70053 kb
Cursive
Big Shoulders Display
100 - 90082 kb
Comfortaa
300 - 70080 kb
Dancing Script
400 - 70059 kb
Gluten
100 - 90079 kb
Lemonada
300 - 70081 kb
Monospace
JetBrains Mono
100 - 80071 kb
JetBrains Mono Italic
100 - 80076 kb
Red Hat Mono
300 - 70029 kb
Source Code Pro
200 - 90085 kb
Source Code Pro Italic
200 - 90071 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