===== Webfonts Plugin =====
Author: [[https://frank-web.dedyn.io|Fraenkiman]]

==== Description ====
This plugin ensures that the Google Webfonts
[[https://fonts.google.com/specimen/Open+Sans|Open Sans]], [[https://fonts.google.com/noto/specimen/Noto+Sans|Noto Sans]], [[https://fonts.google.com/noto/specimen/Noto+Sans+Mono|Noto Sans Mono]], [[https://fonts.google.com/specimen/Ubuntu+Mono|Ubuntu Mono]], [[https://fonts.google.com/specimen/Playfair+Display|Playfair Display]] and
[[https://fontawesome.com/v6/search?o=r&m=free|Font Awesome Free v6 Icons]] 
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.

==== Screenshots ====
{{:res:plugins:frank:webfonts1_1_1.png?640|}}
==== CSS rules to specify font families ====
<code css>
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;
</code>

**Font Awesome 6.5** ~ 2,050 icons

Three values ​​are required to reference a symbol:

  * the class for the style prefix //far//(Regular), //fas//(Solid) or //fab//(Brands) and
  * the class fa-(stands for Font Awesome) and
  * the class for the icon

Example: //<i class="fas fa-camera"></i>//  [[https://fontawesome.com/v6/search?o=r&m=free|All free v6 icons]]

The icons can also be added to any HTML element as a pseudo-element ::beforeor .::after
Example:
<code css>
content: "\f030";
font-family: "Font Awesome 6 Free";
</code>

[[https://www.theme-ultimate.de/elemente/text-elemente/text/fontawesome|Font Awesome Cheatsheet]]


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

[[https://fontawesome.com/license/free|These licenses]] apply for Font Awesome 6 free (Icons: [[https://creativecommons.org/licenses/by/4.0/|CC BY 4.0]], Fonts: [[https://opensource.org/license/ofl-1-1|SIL OFL 1.1]], Code: [[https://opensource.org/license/mit|MIT]] License).

==== Download ====
{{ res:plugins:frank:webfonts1_1_2.zip |}} 

===== Changelog =====
== 2024-12-22: Version 1.1.2 ==
  * Fixes the problem that the prioritized font could not be deselected 
== 2024-11-02: Version 1.1.1 ==
  * Separate submenu in the configuration menu
  * Selection of fonts according to Unicode ranges
  * Selection of the prioritized font
  * Font Awesome 6 icon added
== 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 [[https://github.com/flatpressblog/flatpress/blob/master/fp-interface/themes/leggero/leggero-v2/res/common.css|common.css]]. If you use a different theme, the file can be named differently.

**Support**

Please ask for help on the [[https://forum.flatpress.org/viewtopic.php?t=667|FlatPress Forum]]