Table of Contents
Google Webfonts Plugin
With the help of web fonts you can use any font in web design. The WOFF format (Web Open Font Format) was declared a standard by the W3C in 2012 and is supported by modern browsers. With its container structure, it offers the advantage that True Type fonts are compressed without loss and additional information about the license can be supplied. The successor WOFF2 is the standard today.
CSS rules to specify font families
font-family: 'Ubuntu Mono', monospace; font-family: 'Noto Sans Mono', monospace; font-family: 'Open Sans', sans-serif; font-family: 'Noto Sans', sans-serif; font-family: 'Playfair Display', serif;
These fonts are licensed under the Open Font License (OFL). You can use them in your products & projects – print or digital, commercial or otherwise.
2023-10-05: Version 1.0.1
- The embedded web font can now be temporarily cached locally by the browser. This reduces the load time and leads to less load on the web server
1.) Where in the CSS file can I use the webfonts?
Load your FlatPress blog in your browser, then open the developer tools (F12 key). Here you can “temporarily” edit the CSS properties of your FlatPress blog.
There you will also see in which file and in which line a reference to a font is located, starting with
font-family: . Now you can specify there “temporarily” e.g.
'Ubuntu Mono', monospace; as font and see immediately how the font looks in your theme. Temporary means: after reloading the page, the change will be lost.
If you decided to use the font permanently, you can now change/save it into the corresponding *.css. After the change, I recommend to clear the browser cache, so that the browser loads the current *.css.
2.) In which *.css file do I have to insert the fonts?
Navigate e.g. with Filezilla to the directory
If you use the default Leggero-v2 style, the path is:
Here you will find the file common.css. If you use a different theme, the file can be named differently.
Please ask for help on the FlatPress Forum