Libre Franklin ist der Font ? für das neue Wordpress Standard-Theme „Twenty Seventeen”

Im Juli 2016 führ­te die Website Typewolf den Google Font „Libre Franklin” an Position fünf der bes­ten Google – Fonts. Mir war die­ser Font bis­her nicht auf­ge­fal­len, weil er in den Libraries der von mir ver­wen­de­ten Wordpress-Themes nicht vorkam.

Standard-Theme „Twenty Seventeen”

Vermutlich ist er trotz sei­ner Geschichte und Popularität (s. Google Übersichtsseite) dort noch nicht lan­ge verfügbar.

Im letz­ten Newsletter (6.10.) von Perun wies er auf den Entwicklungsstand des neu­en Wordpress Standard-Themes „Twenty Seventeen” hin. Dieses Theme kann man hier down­loa­den und einen Blick ris­kie­ren. Das habe ich (natür­lich) gemacht und stieß dabei auf „Libre Franklin”. Ich gehe ein­mal 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 eige­ne Font-Bibliothek ver­fügt, hin, einen wei­te­ren Google-Font zu inte­grie­ren? Natürlich gibt es auch für die­sen Zweck eini­ge Wordpress – Plugins, mit deren Hilfe nicht nur Google Fonts aus­ge­tauscht, son­dern auch zusätz­li­che gela­den wer­den können.

Bei man­chen Themes ist es mög­lich, eige­ne Fonts, die man auf sei­nem Server instal­liert hat (Rechte beach­ten!), oder auch die ande­rer Dienste (z.B. Typekit) zu integrieren.

Darüber hin­aus kann man Google Fonts auf fol­gen­de Weise ins Theme „ein­bau­en”:

Auf der Font-Übersichtsseite des gewünsch­ten 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 meh­re­re Möglichkeiten, die Fonts zu „embedden”. Ich bevor­zu­ge die @import – Variante.

Auf der Übersichtsseite sieht man gleich, dass die­ser schö­ne Font eine Vielzahl ver­schie­de­ner Schriftschnitte und ‑Stärken mit­bringt. Das ist nicht bei vie­len Fonts der Fall.

Es macht Sinn zu über­le­gen, wel­che der Schriftschnitte und ‑Stärken im Blog ein­ge­setzt wer­den sol­len. Standardmäßig ist der Schriftschnitt „regu­lar” aus­ge­wählt. Damit kann man arbei­ten. Wer jedoch im Text gern fett oder kur­siv ein­setzt wird fest­stel­len, dass die Darstellung in die­sem Fall nicht opti­mal ist. Diese Schriftschnitte und ‑Stärken soll­ten also aus­ge­wählt wer­den. Übertrieben wer­den soll­te es jedoch nicht, weil zu vie­le Schnitte und Stärken die Ladezeit unnö­tig vergrößern.

Neben den Möglichkeiten, die ich beschrie­ben habe, kön­nen Schriften auch mit­hil­fe der bei­den fol­gen­den Dateien ins Theme inte­griert werden:

1.) header.php

Sucht nach:

</head>

Fügt unmit­tel­bar vor dem Ende des Abschnitts die fol­gen­de Zeile ein:

<link href="https://XXX/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://xxx.de/wp-content/fonts/31ADC0_0_0.eot'');src: url('https://xxx.de/wp-content/fonts/31ADC0_0_0.eot?#iefix') format('embedded-opentype'),url(''https://xxx.de/wp-content/fonts/31ADC0_0_0.woff2'') format('woff2'),url(''https://xxx.de/wp-content/fonts/31ADC0_0_0.woff'') format('woff'),url(''https://xxx.de/wp-content/fonts/31ADC0_0_0.ttf'') format('truetype');}
@import url(''https://xxx.de/css?family=Libre+Franklin:200,400,400i,600'')

Achtet bit­te bei der Lösung 2 dar­auf, dass die­ser Eintrag ganz oben in der Datei plat­ziert ist.

Weil ich gera­de bei schö­nen Fonts bin. „Poppins” ist auch ein Google-Font, der, glau­be ich, noch nicht so lan­ge ver­füg­bar ist. Auf die­sen Font bin ich durch das noch rela­tiv neue Wordpress-Theme „Uku Pirongia” von Elmastudio gesto­ßen. Die Schriftart stellt in der momen­ta­nen Version Anführungszeichen unten nicht kor­rekt dar. Ein Nutzer des Themes hat den Entwickler der Schriftart dies­be­züg­lich zwar ange­schrie­ben. Aber eine Stellungnahme steht wohl noch aus. Wen das stört, der kann bis zur Behebung die­ses klei­nen Fehlers das Wordpress Plugin „WP-Typography” ein­set­zen. Ein Blick auf die­ses tol­le Plugin lohnt sich aller­dings ohne­dies. Die frü­her ein­mal beklag­ten Performancenachteile kann ich heu­te nicht mehr feststellen.