WinFuture-Forum.de: Neu: “Font Library” & User-Interface: bessere Übersicht, Kontrolle - WinFuture-Forum.de

Zum Inhalt wechseln

Beiträge in diesem Forum erhöhen euren Beitragszähler nicht.
Seite 1 von 1

Neu: “Font Library” & User-Interface: bessere Übersicht, Kontrolle


#1 Mitglied ist online   el_pelajo 

  • Gruppe: aktive Mitglieder
  • Beiträge: 67
  • Beigetreten: 15. Dezember 21
  • Reputation: 15

geschrieben 12. November 2022 - 10:59

Guten Abend community


Webfonts-API und die Font-Management-Schnittstellen - ein neues & spannendes Projekt, das man sich unbedingt mal ansehen sollte; Ausbau der kreativen Kontrolle und Übersicht. Alles Neue über das Projekt, welches sich im Moment in der Erkundungsphase befindet: Schriftbibliothek soll über mehrere WordPress-Versionen hinweg zunächst erstellt - dann verfeinert und stabilisiert werden, wenn sie im Site-Editor erscheint.

In einem neuen Artikel auf WpTavern.com wird von Sarah Goding die Arbeit an der Gutenberg Roadmap vorgestellt: https://wptavern.com...aging-web-fonts

Sarah Goding (Zitat): "die Gutenbergs Roadmap sieht eine „Font Library“ vor - die Benutzern eine Schnittstelle zum Registrieren und Verwalten von Webfonts bietet: viele neue Möglichkeiten für Alle "

Das Plugin Create Block Theme ( https://wordpress.or...te-block-theme/ ) von WordPress, das zum Erstellen eines neuen Designs, eines leeren Designs, eines untergeordneten Designs oder einer Stilvariation verwendet wird, verfügt außerdem auch über einen speziellen Bildschirm zum Verwalten von Schriftarten. Es listet alle in das Design eingebetteten Schriftfamilien und Schriftarten auf und zeigt eine Vorschau an und ermöglicht es Benutzern, Google-Schriftarten einzubetten, lokale Schriftarten einzubetten und nicht verwendete Schriftstärken zu entfernen." Ende des Zitats von
Sarah--

weitere Links und Infos:
carolinapoena: love the "Manage theme fonts" screen in the create block theme plugin: part of the Site Editor: https://twitter.com/...207811681935362
das Ticket von Tonya: https://github.com/W...rg/issues/41479
Mathias Ventura: https://twitter.com/...278101053104128 :: API’s um die “font library” zu unterstützten: https://github.com/W...79#font-library
Joen Asmussen: Font-Sets und Global Styles → Typography https://github.com/W...rg/issues/45271

create-block-theme By WordPress.org: https://wordpress.or...te-block-theme/
Description:
This plugin allows you to:
– Create a new theme, blank theme, child theme or style variation.
– List and preview font families and font faces embeded in your theme.
– Embed Google Fonts in your theme.
– Embed local font assets in your theme.

noch weitere Links zum Thema:
Der neue Artikel die Roadmap kur vorgestellt: https://wptavern.com...aging-web-fonts

noch mehr zum Thema Google-Fonts: - wie kann man ansetzen?

lokal einbinden:

also konkret um die dynamische Einbindung der kostenfreien Schriftarten-Datenbank von „Google Fonts“. Dieser Dienst ist vor einiger Zeit ins Gerede gekommen. Denn viele Webseiten-betreiber setzen diesen Dienst ein. Aber bei der Verwendung dieser Services übermittelt die IP-Adresse des Seitenbesuchers an Google.
Dies allerdings ist kritisch zu sehen: Denn genau genommen wird die Übermittlung eines „personenbezogenen Datums“ in diesem Vorgang gesehen; Und wenn man das unter dem Blickwinkel der DSGVO sieht - also der Datenschutzgrundversorgung - dann wird deutlich dass hier für diesen Vorgang es der Zustimmung des Nutzers Bedarf.

Und wenn diese Zustimmung nicht vorliegt, dann kann es für de Webseitenbetreiber schnell schwierig werden.

Also kurz: da die (se) Zustimmung oftmals - oder man kann auch sagen in aller Regel - nicht vorliegt, könnte dies genaugenommen als ein Verstoß gegen die Datenschutzgrundverordnung (DSGVO) gewertet werden.

Achso: Es gibt ein Urteil, auf das sich oftmals berufen wird: Die Abmahner bzw. Absender von Schadenersatzforderungen berufen sich auf ein Urteil vom Landgericht München vom 20.02.2022 (Aktenzeichen 3 O 17493/20).

Frage - wie testet ihr eure Webseiten

a. mit einer Untersuchung der Browser-Entwicklertools
b. mit anderen Methoden - etwa mit diesem Tool Google-Fonts-Checker | SICHER3 :: Google-Fonts-Checker | SICHER3
mit dem kann man auch die Website checken.


Fragt sich nur ob hiermit alle Fonts entdeckt werden?

Habt ihr hier Erfahrungen gemacht.Werden mit dem Tool - tatsächlich alle Google-Fonts auf einer zu untersuchenden Webseite entdeckt!?

Also zusammenfassend: Hier für alle - nochmals in der Übersicht. Nebenbei bemerkt: Mit diesem Tools kann man google-fonts gut herunterladen - wenn man sie selber hosten will.

https://www.ccm19.de...-fonts-checker/

zeigt die Google-Fonts und darüber hinaus auch noch
#.... Weitere kritische Ergebnisse der Seite:
#... etwa wenn ungefragt kein Cookie gesetzt wird
oder aber wenn Daten von x fremden Domains eingebunden werden.. usw. usf


ferner noch diese Seite: https://sicher3.de/g...-fonts-checker/

wenn man dann identifiziert hat, welche Fonts hier von Google kommen, dann kann man diese von Google holen:
ich halte hier das Tool für sehr hilfreich: https://google-webfo...kuapp.com/fonts

wie her bemerkt wird: https://kopfundstift...okal-einbinden/

Zitat

Und deine benötigte Schrift herunterzuladen, gibst du einfach in das Suchfeld (oben links in der Ecke) die gewünschte Schrift ein. Danach wählst du die jeweiligen Zeichensätze und Schriftschnitte aus. Unter dem Punkt 3 solltest du noch den Dateipfad angeben, indem du die Schriften später auf deinen Server laden solltest. Das kleine Tool wird die CSS Datei dahingehend anpassen.


also das Tool hier: https://google-webfo....?subsets=latin

3. Copy CSS: (default is Best Support)
Modern Browsers
Choose Best Support if old browsers still need to be supported. Formats in this snippet: [eot,woff,woff2,ttf,svg]

/* montserrat-regular - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/montserrat-v25-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/montserrat-v25-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat-v25-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/montserrat-v25-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/montserrat-v25-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/montserrat-v25-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */
}



und nun lässt sich noch der Pfad anpassen: Customize folder prefix (optional):

../fonts/



ehe es dann zum Download kommt...

Zitat

Click on code to select all statements, then copy/paste it into your own CSS file.


Wenn man das dann heruntergeladen hat und alles auf den eigenen Server geladen hat - dann muss man noch die CSS auf der Webseite anpassen.

die Schriftarten noch in eigene CSS einbinden. Und genau dafür hat uns ja das oben erwähnte Google Webfonts Helper Tool im Grunde schon den nötigen CSS Code besorgt - den konnten wir (wie oben ja beschrieben) customized und angepasst herunterladen.
Nun kommt es darauf an, genau diesen Code einfach in die style.css-Datei einzubinden. Es ist meines Erachtens wichtig, dass wir - wenn wie auch ein Child-Theme verwenden, dann das auch die entsprechenden Änderungen auch nach dem Update deines WordPress-Themes machen.​​

Abschließend: 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.webtimis...l-in-wordpress/

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

3. google-webfonts-helper: Get eot, ttf, svg, woff and woff2 files + CSS snippet :: https://google-webfo....?subsets=latin

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

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/h....-in-wordpress/


b. mit Plugin:

google-fonts: Local Google Fonts By EverPress
https://wordpress.or...l-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:​​


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



B. WordPress Google Fonts lokal einbinden in wenigen Minuten - DSGVO / Ladezeiten - Plugin Tutorial
Nikolaus Kolba :: 10.600 Abonnenten



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


Fonts Plugin | Google Fonts Typography
by Fonts Plugin: https://fontsplugin.com/
https://wordpress.or...s-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...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....np/use-any-font
https://wordpress.or...s/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.or...l-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.or...s/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 Awesome
By Font Awesome :: https://fontawesome.com/
https://wordpress.or...s/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.or...y-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.or...e-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.or...p-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.



soviel zur Uebersicht und den diversen Ansätzen...

Dieser Beitrag wurde von el_pelajo bearbeitet: 01. Dezember 2022 - 01:44

Elektronik & IT-Fan - Raspi, Arduino - u. die neue Knowledge-Base: https://affine.pro :: WordPress Ressourcen News: https://wptavern.com :: Entwicklung: https://make.wordpress.org/core/ ::
0

Anzeige



Thema verteilen:


Seite 1 von 1

1 Besucher lesen dieses Thema
Mitglieder: 0, Gäste: 1, unsichtbare Mitglieder: 0