host google-fonts locally in wordpress

[b]Abschließend:[/b] es gibt verschiedene Methoden und Ansätze die Fonts lokal zu hosten ohne Plugin - oder mit Plugin

a. ohne Plugin:

1. Google Fonts lokal in WordPress nutzen
   https://www.webtimiser.de/webfonts-lokal-in-wordpress/

2. How to Host Google Fonts Locally in WordPress? (2 Methods)
   https://wpbuildermaster.com/host-google-fonts-locally/

3. google-webfonts-helper: Get eot, ttf, svg, woff and woff2 files + CSS snippet :: https://google-webfonts-helper.herok

4. How to Host Google Fonts Locally in WordPress?
   https://www.wplogout.com/

5. In-Depth Guide on Hosting Local Fonts in WordPress
   https://kinsta.com/blog/local-fonts/

6. How To Easily Host Google Fonts Locally In WordPress
   https://staxwp.com/how-to-easily-host-fonts-in-wordpress/

b. mit Plugin:

google-fonts: Local Google Fonts By EverPress
https://wordpress.org/plugins/local-google-fonts/
Version:0.19 Last updated:2 weeks ago Active installations:70,000+ WordPress Version:4.6 or higher Tested up to:6.1.1

hier noch abschließend ein paar Anmerkungen zu den Pfaden beim lokalen Hosten der Fonts. vorweg: es ist clever, ein Child-Theme einzusetzen:

Eine der gebräuchlichsten Methoden zum Laden lokal gehosteter Schriftarten ist die Deklaration der Schriftart im Design-Stylesheet, obwohl es (wie immer) andere Möglichkeiten gibt: Der Verweis auf sie könnte mit der folgenden Pfadanpassung erfolgen.

`

/wp-content/themes/my_theme/assets/fonts/die_Custom_Font.ttf
`

Dies könnte ein typischer Dateispeicherort und Referenzierungsansatz sein: Und außerdem - die beste/empfohlene Vorgehensweise ist, ein untergeordnetes Thema zum Erstellen des Themes zu erstellen. Wenn man also auf jeden Fall ein Pfadproblem für die Font-Datei hat, hier einige Gedanken zum Pfad/der URL im Stil/CSS.

a. Wenn sich die CSS-Datei und die Font-Datei genau im selben Ordner befinden:


@font-face {
font-family: "die_Custom_Font";
src: url('die_Custom_Font.ttf');
}


Wenn die fonts sich nicht im css-Ordner befinden:


@font-face {
font-family: "die_Custom_Font";
src: url('../die_Custom_Font.ttf');
}


....und hier noch ein paar weitere Hinweise, Anmerkungen:

a. im sogenannten absoluten statischen Pfad der fonts file* @font-face

hier haben wir einen so genannten absoluten statischen Pfad des fonts file

@font-face {
font-family: "die_Custom_Font";
src: url('file:///C:/Users/Administrator/fonts/die_Custom_Font.ttf');
}


b. ein anderer absoluter statischer Pfad des Font Ordners / @font-face


/* Url-Pfad der fonts Dateien*/
@font-face {
font-family: "die_Custom_Font";
src: url('http://localhost/wordpress/der-font-ordner-pfad/die_Custom_Font.ttf');
}


wie gesagt: es ist clever, ein Child-Theme einzusetzen:​​

oben hab ich euch die diversen Ansätze vorgestellt, Google-Fonts lokal zu hosten. ... Hier noch einen Ansatz - dieses Thema mit einem WordPress-Plugin anzugehen: 

die Alternative: wer mit einem Plugin ansetzen will

hier vorweg zwei videos: die zeigen wie dieser Ansatz funktioniert:

A. Google Fonts lokal einbinden - mit einem Klick!
KopfundStift Blog :: 786 Abonnenten
https://www.youtube.com/watch?v=iCgDa5Y8LaM

B. WordPress Google Fonts lokal einbinden in wenigen Minuten - DSGVO / Ladezeiten - Plugin Tutorial
Nikolaus Kolba :: 10.600 Abonnenten
https://www.youtube.com/watch?v=qGNy9R5okJ4

und hier eine Uebersicht auf die gängigsten, aktuellsten Plugins.

Fonts Plugin | Google Fonts Typography
by Fonts Plugin: https://fontsplugin.com/
https://wordpress.org/plugins/olympus-google-fonts/

info:
version: 3.2.5
Last updated: 4 days ago
Active installations: 200,000+
WordPress Version: 4.0 or higher
Tested up to: 6.1.1
Tags: elementor fonts google google fontstyp eki

ratings: 922 x 5 Sterne

description:
the Google Fonts library currently contains 1455 unique fonts. This plugin allows you to easily use any of them on your WordPress website. You’re not stuck with one font for the entire website, you can easily choose one font for headings and another for your content.
It’s hard to know which font will look good on your website, that’s why we’ve included a live preview feature. That means you can test each font and see a live preview of how it will look with your content instantly. Once you’ve found a combination you love, you can press save and make the changes publicly visible. The full Google Fonts library can be found here – Google Fonts.
Plugin Features:
Live Customizer Preview: Choose and preview fonts in real time using the WordPress Customizer.
Over 1000+ Google Fonts to choose from.
Adobe Fonts (Typekit) integration.
Works with any WordPress Theme. No coding required.
Easy One-Click Updates.
WooCommerce support.
Translation Ready.
SSL and HTTPS compatible.
Efficient Font Loading using a single request.
SEO-Friendly (Search Engine Optimization).
Tested with PHP7.
Selective Font Loading.
Preconnect Resource Hints.
Host Google Fonts Locally.
Upload Custom Fonts.
Font Size, Weight, Color and Line Height Typography Settings.

OMGF | GDPR/DSVGO Compliant, Faster Google Fonts. Easy.
https://de.wordpress.org/plugins/host-webfonts-local/
Von Daan from Daan.dev
info:
Version: 5.4.3
Zuletzt aktualisiert: vor 3 Wochen
Aktive Installationen: 200.000+
WordPress-Version: 4.6 oder höher
Getestet bis: 6.1.1
PHP-Version: 7.0 oder höher
Schlagwörter: cache DSVGO fonts GDPR google

ratings: 163 x 5 Sterne

description: Leverage Browser Cache, reduce DNS lookups/requests, reduce Cumulative Layout Shift and make your Google Fonts 100% GDPR compliant with OMGF - OMGF is written with performance and user-friendliness in mind. It uses the Google Fonts API to automatically cache the fonts your theme and plugins us to minimize DNS requests and speed up your WordPress website.
How Does It Work?
After installing the plugin, OMGF will automatically start looking for Google Fonts whenever a page is requested on your website.
All Google Fonts are listed in the Optimize Local Fonts section of OMGF’s settings screen. There, you can choose to:
Preload fonts to reduce Cumulative Layout Shift above the fold,
Unload fonts that’re not used by you, your theme and/or plugins, Set a Fallback Font Stack (OMGF Pro required), to further reduce Cumulative Layout Shift, or Replace (OMGF Pro required) font-families with system fonts to speed up loading times!

Use Any Font | Custom Font Uploader
By Dnesscarkey :: https://dineshkarki.com.np/use-any-font
https://wordpress.org/plugins/use-any-font/
info
Version: 6.2.98
Last updated: 3 weeks ago
Active installations: 200,000+
WordPress Version: 3.0 or higher
Tested up to: 6.1.1
Tags: custom fontsfont uploader typography
ratings: 944 x 5 Sterne

description: Upload any custom fonts you wish and give your site a elegant look. Quickly change font without need of css knowledge. Or you can select from our 23,871+ predefined font collection to add in your site. It even has google fonts which you can store in your own server.
Use Any Font gives you freedom to intall custom fonts in your wordpress website. It is different than other font embed services which gives you countable number of fonts to select from neither the one that stores your custom font in remote server. You can use any custom fonts if you have its font format (ttf,otf,woff) without being dependent to other’s server uptime. You can just upload one format and the rest needed formats to work in all browsers are automatically converted even in woff2 compressed format for latest browsers and faster load time.

Local Google Fonts
By EverPress :: https://everpress.co/
https://wordpress.org/plugins/local-google-fonts/

Host your used Google fonts on your server and make your site more GDPR compliant
info
Version: 0.19
Last updated: 4 weeks ago
Active installations: 70,000+
WordPress Version: 4.6 or higher
Tested up to: 6.1.1
Tags: fonts GDPR google google fonts

ratings: 54 x 5 Sterne

description: Host your used Google fonts on your server and make your site more GDPR compliant. About 50 mio* sites use Google Fonts and in January 2022 a German court has ruled that using Google Fonts is a violation of Europe’s GDPR (General Data Protection Regulation). more on wptavern.com

Custom Fonts
By Brainstorm Force _:: http://www.brainstormforce.com/
https://wordpress.org/plugins/custom-fonts/
info:
Version: 1.3.7
Last updated: 4 weeks ago
Active installations: 300,000+
WordPress Version: 4.4 or higher
Tested up to: 6.1.1
Tags: astra beaver builder elementor woff

ratings: 36 x 5 Sterne

description: This plugin helps you easily embed custom fonts files (woff2, woff, ttf, svg, eot, otf) easily in your WordPress website
Currently, it works with:
Astra Theme
Beaver Builder Theme
Beaver Builder Plugin
Elementor Page Builder
How does it work?
Install the plugin: Upload the font files in as many formats as possible for best browser compatibility. And done. You will be able to see the fonts added in the settings of Astra / Beaver Builder / Elementor. Please refer screenshots. If you’re not using any of the supported plugins and theme, you can write the custom CSS to apply the fonts.

Font Awesom
By Font Awesome :: https://fontawesome.com/
https://wordpress.org/plugins/font-awesome/
info:
Version: 4.3.1
Last updated: 3 months ago
Active installations: 300,000+
WordPress Version: 4.7 or higher
Tested up to: 6.0.3
PHP Version: 5.6 or higher
Tags: awesome font Font Awesome Font Awesome icon

ratings: 30 x 5 Sterne

description: the official way to use Font Awesome Free or Pro icons on your site, brought to you by the Font Awesome team.
Features: Our official plugin lets you use Font Awesome the way you want:
Use Pro or Free icons.
Leverage the latest release or a specific version of our icons. Choose the tech, either SVG or Web Font. Take your pick of loading your icons from our classic Font Awesome CDN, or use Font Awesome Kits – the easiest and most efficient way to use Font Awesome icons on the web. Turn on automatic compatibility for Font Awesome Version 4 if you – or your plugins – are still using Version 4 syntax. Troubleshoot and resolve issues when multiple versions of Font Awesome are loading on your site from other plugins/themes, which can cause unexpected icon display or technical issues. Make things even awesomer using icons from Font Awesome Version 6. Use your uploaded icons from your Pro Kits.
-Add icons to your pages and posts
-Adding icons works in both the block editor and the classic editor.
Once you’ve set up your plugin, you can search and add icons to your pages and posts by choosing the Font Awesome option in the format bar from any text block to open the Icon Chooser. (If you want to search and add Pro icons in the Icon Chooser, you’ll need to use a Pro Kit.)

Easy Google Fonts
By Titanium Themes :: https://titaniumthemes.com/

https://wordpress.org/plugins/easy-google-fonts/
info:
Version: 2.0.4
Last updated: 1 year ago
Active installations: 300,000+
WordPress Version: 5.8 or higher
Tested up to: 5.8.6
PHP Version: 7.0.0 or higher
Tags: Google Fonts WordPressGoogle Webfontstypographywebfonts

ratings: 187 x 5 Sterne

description: A simple and easy way to add custom google fonts to any WordPress theme without coding. This plugin integrates with the WordPress Customizer so you can preview google fonts on your site in realtime. It’s compatible with any theme. It also allows you to create custom theme specific font controls in the admin settings area to control particular css selectors. Once created, these custom font controls are instantly available in the customizer no coding required!
What does this plugin do? This plugin allows you to take full control of your theme’s typography in any WordPress theme (no coding required). It allows you to choose from over 600+ google fonts and font variants to insert into your website without coding. Allows you to preview font changes on your website in realtime using the WordPress Customizer. Create Unlimited Custom Font Controls: Create custom font controls in the admin area that are instantly available in the Customizer preview. Allows you to preview what your theme will look like with the new google fonts before you save any changes. Allows you to create your own font controls and rules in the admin area (no coding required). Allows you to easily change the look of your website with the click of a button. Automatically enqueues all stylesheets for your chosen google fonts. Allows you to add google fonts to your theme without editing the themes main stylesheet which allows you to update your theme without losing your custom google fonts.

Disable and Remove Google Fonts
By Fonts Plugin
https://wordpress.org/plugins/disable-remove-google-fonts/
info:
Version: 1.5.1
Last updated: 2 days ago
Active installations: 100,000+
WordPress Version: 4.8 or higher
Tested up to: 6.1.1
Tags:Disable Google FontsdsgvoGDPRgooglegoogle fonts

ratings: 35 x 5 Sterne

description: Improve frontend performance by disabling Google Fonts loaded by themes and plugins. While this plugin removes Google Fonts from as many themes and plugins as possible, some require additional steps, we have detailed those here: Remove Google Fonts from WordPress. After installing this plugin, clear your website cache and test your site using the free Google Fonts Checker.
Plugin Compatibility
This plugin will work with all WordPress themes and has been specifically tested with the following:
Twenty Twelve
Twenty Thirteen
Twenty Fourteen
Twenty Fifteen
Twenty Sixteen
Twenty Seventeen

WP Google Fonts
note: his plugin hasn’t been tested with the latest 3 major releases of WordPress. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.
By Noah Kagan: https://appsumo.com/

https://wordpress.org/plugins/wp-google-fonts/

info:
Version: 3.1.5
Last updated: 4 months ago
Active installations: 80,000+
WordPress Version: 2.0.2 or higher
Tested up to: 5.8.6
Tags: fontfontsfree fontsgoogle fontstype

**ratings: 24 x 5 Sterne

description:
Google’s free font directory is one of the most exciting developments in web typography in a very long time. The amazing rise of this new font resource has made this plugin the most popular font plugin on WordPress and it shows no signs of stopping. The WP Google Font plugin makes it even easier to use Google’s free service to add high quality fonts to your WordPress powered site. Not only does this plugin add the necessary Google code, but it also gives you the ability to assign the Google fonts to specific CSS elements of your website from within the WordPress admin. Or if you would rather, you can target the Google fonts from your own theme’s stylesheet. Right now, the Google Directory has hundreds of great fonts, and the selection is steadily growing.