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

Im Juli 2016 führ­te die Web­site Type­wolf den Goog­le Font „Lib­re Frank­lin“ an Posi­ti­on fünf der bes­ten Goog­le – Fonts. Mir war die­ser Font bis­her nicht auf­ge­fal­len, weil er in den Libra­ri­es der von mir ver­wen­de­ten Word­press-The­mes nicht vorkam.

Stan­dard-The­me „Twen­ty Seventeen“

Ver­mut­lich ist er trotz sei­ner Geschich­te und Popu­la­ri­tät (s. Goog­le Über­sichts­sei­te) dort noch nicht lan­ge verfügbar.

Im letz­ten News­let­ter (6.10.) von Perun wies er auf den Ent­wick­lungs­stand des neu­en Word­press Stan­dard-The­mes „Twen­ty Seven­teen“ hin. Die­ses The­me kann man hier down­loa­den und einen Blick ris­kie­ren. Das habe ich (natür­lich) gemacht und stieß dabei auf „Lib­re Frank­lin“. Ich gehe ein­mal davon aus, dass es der Stan­dard-Font für das The­ma sein wird.

Wie kann man einen neuen Font installieren?

Wie bekommt man es bei einem Word­press-The­me, das über eine eige­ne Font-Biblio­thek ver­fügt, hin, einen wei­te­ren Goog­le-Font zu inte­grie­ren? Natür­lich gibt es auch für die­sen Zweck eini­ge Word­press – Plug­ins, mit deren Hil­fe nicht nur Goog­le Fonts aus­ge­tauscht, son­dern auch zusätz­li­che gela­den wer­den können.

Bei man­chen The­mes ist es mög­lich, eige­ne Fonts, die man auf sei­nem Ser­ver instal­liert hat (Rech­te beach­ten!), oder auch die ande­rer Diens­te (z.B. Type­kit) zu integrieren.

Dar­über hin­aus kann man Goog­le Fonts auf fol­gen­de Wei­se ins The­me „ein­bau­en“:

Auf der Font-Über­sichts­sei­te des gewünsch­ten Fonts klickt man ganz oben rechts auf „Sel­ect this font“. Ganz unten rechts erscheint dann ein Popup mit dem Titel: „1 Fami­ly Sel­ec­ted“. Es gibt dort meh­re­re Mög­lich­kei­ten, die Fonts zu „embedden“. Ich bevor­zu­ge die @import – Variante.

Auf der Über­sichts­sei­te sieht man gleich, dass die­ser schö­ne Font eine Viel­zahl ver­schie­de­ner Schrift­schnit­te und ‑Stär­ken mit­bringt. Das ist nicht bei vie­len Fonts der Fall.

Es macht Sinn zu über­le­gen, wel­che der Schrift­schnit­te und ‑Stär­ken im Blog ein­ge­setzt wer­den sol­len. Stan­dard­mä­ßig ist der Schrift­schnitt „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 Dar­stel­lung in die­sem Fall nicht opti­mal ist. Die­se Schrift­schnit­te und ‑Stär­ken soll­ten also aus­ge­wählt wer­den. Über­trie­ben wer­den soll­te es jedoch nicht, weil zu vie­le Schnit­te und Stär­ken die Lade­zeit unnö­tig vergrößern.

Neben den Mög­lich­kei­ten, die ich beschrie­ben habe, kön­nen Schrif­ten auch mit­hil­fe der bei­den fol­gen­den Datei­en ins The­me inte­griert werden:

1.) header.php

Sucht nach:

</head>

Fügt unmit­tel­bar vor dem Ende des Abschnitts die fol­gen­de Zei­le 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')

Ach­tet bit­te bei der Lösung 2 dar­auf, dass die­ser Ein­trag ganz oben in der Datei plat­ziert ist.

Weil ich gera­de bei schö­nen Fonts bin. „Pop­pins“ ist auch ein Goog­le-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 Word­press-The­me „Uku Piron­gia“ von Elma­stu­dio gesto­ßen. Die Schrift­art stellt in der momen­ta­nen Ver­si­on Anfüh­rungs­zei­chen unten nicht kor­rekt dar. Ein Nut­zer des The­mes hat den Ent­wick­ler der Schrift­art dies­be­züg­lich zwar ange­schrie­ben. Aber eine Stel­lung­nah­me steht wohl noch aus. Wen das stört, der kann bis zur Behe­bung die­ses klei­nen Feh­lers das Word­press Plug­in „WP-Typo­gra­phy“ ein­set­zen. Ein Blick auf die­ses tol­le Plug­in lohnt sich aller­dings ohne­dies. Die frü­her ein­mal beklag­ten Per­for­man­cen­ach­tei­le kann ich heu­te nicht mehr feststellen.