Libre Franklin Ist Der Font ­čĺí F├╝r Das Neue WordPress Standard-Theme »Twenty Seventeen«

Im Juli 2016 f├╝hrte die Website Typewolf┬áden Google Font »Libre Franklin« an Position f├╝nf der besten Google – Fonts. Mir war dieser Font bisher nicht aufgefallen, weil er in den Libraries der von mir verwendeten WordPress-Themes nicht vorkam.

Standard-Theme "Twenty Seventeen"

Standard-Theme »Twenty Seventeen«

Vermutlich ist er┬átrotz seiner Geschichte und Popularit├Ąt (s. Google ├ťbersichtsseite) dort noch nicht lange verf├╝gbar.

Im letzten Newsletter (6.10.) von Perun┬áwies er auf den Entwicklungsstand des neuen WordPress Standard-Themes »Twenty Seventeen« hin. Dieses Theme kann man hier downloaden und einen Blick riskieren. Das habe ich (nat├╝rlich) gemacht und stie├č dabei auf »Libre Franklin«. Ich gehe einmal davon aus, dass es der Standard-Font f├╝r das Thema sein wird.


Wie kann man einen neuen Font installieren?

Wie bekommt man es bei einem WordPress-Theme, das ├╝ber eine eigene Font-Bibliothek verf├╝gt, hin, einen weiteren Google-Font zu integrieren? Nat├╝rlich gibt es auch f├╝r diesen Zweck einige WordPress – Plugins, mit┬áderen Hilfe┬ánicht nur Google Fonts ausgetauscht, sondern auch zus├Ątzliche geladen werden k├Ânnen.

Bei manchen Themes ist es m├Âglich, eigene Fonts, die man auf seinem Server installiert hat (Rechte beachten!), ┬áoder auch die anderer Dienste (z.B. Typekit) zu integrieren.

Dar├╝ber hinaus┬ákann man Google Fonts auf folgende Weise ins Theme┬á»einbauen«:

Auf der Font-├ťbersichtsseite┬ádes gew├╝nschten Fonts klickt man ganz oben rechts auf »Select this font«. Ganz unten rechts erscheint dann┬áein Popup mit dem Titel: »1 Family Selected«. Es gibt dort mehrere M├Âglichkeiten, die Fonts zu »embedden«. Ich bevorzuge die @import – Variante.

Auf der ├ťbersichtsseite sieht man gleich, dass dieser sch├Âne Font eine Vielzahl verschiedener Schriftschnitte und -St├Ąrken mitbringt. Das ist nicht bei vielen Fonts der Fall.

Es macht Sinn zu ├╝berlegen,┬áwelche der Schriftschnitte und -St├Ąrken im┬áBlog eingesetzt werden sollen. Standardm├Ą├čig ist der Schriftschnitt »regular« ausgew├Ąhlt. Damit kann man arbeiten. Wer jedoch im Text gern fett oder kursiv einsetzt wird feststellen, dass die Darstellung in diesem Fall nicht optimal ist. Diese Schriftschnitte und -St├Ąrken sollten also ausgew├Ąhlt werden. ├ťbertrieben werden sollte es jedoch nicht, weil zu viele Schnitte und St├Ąrken die Ladezeit unn├Âtig vergr├Â├čern.

Neben den M├Âglichkeiten, die ich beschrieben habe, k├Ânnen Schriften auch┬ámithilfe┬áder beiden folgenden┬áDateien ins Theme integriert┬áwerden:

1.) header.php

Sucht nach:

</head>

F├╝gt unmittelbar vor dem Ende des Abschnitts die folgende Zeile ein:

<link href="https://fonts.googleapis.com/css?family=Libre+Franklin:200,400,400i,600" rel="stylesheet">

2.) style.css

Beispiel bei Fonts, die selbstgehostet sind: 
@font-face {font-family: 'BrandonTextWeb-Regular';src: url('https://2bier.de/wp-content/fonts/31ADC0_0_0.eot');src: url('https://2bier.de/wp-content/fonts/31ADC0_0_0.eot?#iefix') format('embedded-opentype'),url('https://2bier.de/wp-content/fonts/31ADC0_0_0.woff2') format('woff2'),url('https://2bier.de/wp-content/fonts/31ADC0_0_0.woff') format('woff'),url('https://2bier.de/wp-content/fonts/31ADC0_0_0.ttf') format('truetype');}
@import url('https://fonts.googleapis.com/css?family=Libre+Franklin:200,400,400i,600')

Achtet bitte bei der L├Âsung 2 darauf, dass dieser Eintrag ganz oben in der Datei platziert ist.

Weil ich gerade bei sch├Ânen Fonts bin. »Poppins« ist auch ein Google-Font, der, glaube ich, noch nicht so lange verf├╝gbar ist. Auf diesen Font bin ich durch das┬ánoch relativ neue WordPress-Theme »Uku Pirongia« von Elmastudio gesto├čen. Die Schriftart stellt in der momentanen Version Anf├╝hrungszeichen unten nicht korrekt dar. Ein Nutzer des Themes hat den Entwickler┬áder Schriftart diesbez├╝glich zwar angeschrieben. Aber eine Stellungnahme steht wohl noch aus. Wen das st├Ârt, der kann bis zur Behebung dieses kleinen Fehlers das WordPress Plugin »WP-Typography« einsetzen. Ein Blick auf dieses tolle Plugin lohnt sich allerdings ohnedies. Die fr├╝her einmal beklagten Performancenachteile kann ich heute nicht mehr feststellen.

Dieser Beitrag hat 2 Kommentare
  1. Achtung:
    Ich stelle mir gerade dieses weltumspannende topografische Netz von WordPress-Blogs vor, das Google (weltumspannend) exakte und inhaltsreiche Aufrufstatistiken von t├Ąglich Milliarden WordPress-Blog-Seitenaufrufen liefert. Was ich mir nicht mehr so genau vorstellen kann, ist, welche interessanten Analysen zu kommerziellen Zwecken Google damit anstellt. Und ob die (ganz sicher partnerschaftlich eng verbundene) NSA diese gigantische t├Ągliche Datenmenge jederzeit zur Verf├╝gung hat und nach was-wei├č-ich-was auswertet, wei├č ich auch nicht so genau…
    Wobei ich aber ziemlich sicher bin, ist, dass Google keine teuren Fontserver f├╝r Automattic/Wordpress betreibt bzw. bereitstellt, weil die Konzernleitung eitler Freund sch├Âner Schriften f├╝r WordPress ist…
    ­čÖé So, jetzt noch viel Spa├č mit Google-Fonts – ich setze keine ein, ich habe die Online-Fontabrufe per Plugin abgeschaltet.

  2. Du meinst Google investiert nicht mal in die n├Âtigen Server, kann aber alle Daten dennoch f├╝r sich nutzen? Ist das realistisch? Ich will nicht naiv sein. Aber wenn die keine Fontserver zur Verf├╝gung stellen, wie funktioniert dann das Ganze mit dieser Performance? Ich habe bei Typekit (Adobe) einen Account. Wenn du einen Font einbindest, geht die Performance des Blogs aber so etwas von in den Keller. Da nutzen auch Tuningma├čnahmen kaum was.

    Die NSA ist mir zwar von Herzen unsympathisch. Aber ich g├Ânne denen, hier zu lesen. Das wird denen nicht mehr Spa├č machen als den paar Usern, die sich ab und an hier mal versurfen.

    Ich nutze viele Google Dienste. Auf Analytics verzichte ich. Aber daf├╝r habe ich ja seit Jahren die Google Fonts im Einsatz. ├ťbrigens: Das ist doch ein echt sch├Âner Font. Oder Boris?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht ver├Âffentlicht. Erforderliche Felder sind mit * markiert.