Eigene Schriften / Fonts in Wordpress einbinden und lokal hosten

Es gibt mehrere Gründe warum man Schriftarten / Fonts in WordPress selbst einbinden sollte und auch lokal, also auf der eigenen Webseite, hosten sollte:

  • kann die Ladezeiten verbessern
  • ist Datenschutz-konform

Wie man das macht und was man dazu braucht zeige ich in folgendem Beitrag.

Fonts herunterladen und einbinden

Ein sehr praktisches Tool ist der Google Webfont Helper. Als erstes sucht man sich die entsprechende Schriftart aus die man für sein Projekt braucht. Dann gibt man noch die entsprechenden Schriftstärke an, insofern der Font das anbietet und kann noch einen Font Verzeichnis angeben. Der Vorteil bei diesem Tool ist, dass einem der CSS Code gleich generiert wird. In meinen Projekten lege ich die Fonts im WordPress Child-Theme Verzeichnis ab: /includes/fonts/ Der entsprechende CCS Code lautet dann:

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

/* rubik-500 - latin */
@font-face {
font-family: 'Rubik';
font-style: normal;
font-weight: 500;
src: url('./includes/fonts/rubik-v7-latin-500.eot'); /* IE9 Compat Modes */
src: local('Rubik Medium'), local('Rubik-Medium'),
url('./includes/fonts/rubik-v7-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('./includes/fonts/rubik-v7-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
url('./includes/fonts/rubik-v7-latin-500.woff') format('woff'), /* Modern Browsers */
url('./includes/fonts/rubik-v7-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
url('./includes/fonts/rubik-v7-latin-500.svg#Rubik') format('svg'); /* Legacy iOS */
}
Wordpress Werkstatt
Erfahrungen & Bewertungen zu Christian Galster