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:
- 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
andfontHeadings
, 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.