User Tools

Site Tools


res:plugins:webfonts

Google Webfonts Plugin

Author: Fraenkiman

Description

This plugin ensures that the Google Webfonts Open Sans, Noto Sans, Noto Sans Mono, Ubuntu Mono and Playfair Display are provided on your web server in a GDPR-safe manner.

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;

Font License

These fonts are licensed under the Open Font License (OFL). You can use them in your products & projects – print or digital, commercial or otherwise.

Download

Changelog

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

FAQ

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 /fp-interface/themes/your-theme/your-style/res. If you use the default Leggero-v2 style, the path is: /fp-interface/themes/leggero/leggero-v2/res. Here you will find the file common.css. If you use a different theme, the file can be named differently.

Support

Please ask for help on the FlatPress Forum

res/plugins/webfonts.txt · Last modified: 2023/10/06 00:22 by fraenkiman

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki