Der ein oder andere Webdesigner ist wohl schon einmal über das Problem gestolpert, dass Schriftarten auf iOS Geräte nicht oder nicht richtig geladen werden. Stattdessen lädt es die Standard Schriften des Betriebssystems und das entspricht natürlich nicht den Vorstellungen des Designers.
Weiterführende Links:
Ich gehe in diesem Beispiel davon aus, dass du einen Theme-Builder verwendest. Das praktische daran ist, dass Schriftarten bereits im Builder definiert werden können und ohne Umwege geladen und angezeigt werden können. Jedoch kann es eben passieren, dass Schriftarten nicht auf deinem iOS Gerät angezeigt werden. Und darum soll es hier gehen.
@font-face | Schriften für Safari und iOS richtig importieren
Allgemein gilt; du solltest dafür sorgen, die Schriftarten die du verwenden möchtest auf deinen FTP zu schieben und auf Seiten auf denen kein Page-Builder zum Einsatz kommt, diese per CSS an gewünschter Stelle zu laden. Auch wenn du keinen Theme-Builder nutzt, ist das Laden der Schriftarten vom eigenen FTP durchaus sinnvoll. Schon allein aufgrund der DSGVO und deiner Ladezeit.
Es gibt zwei gebräuchliche Varianten, benutzerdefinierte Schriften auf der Webseite zu laden. Zum einen via @import und zum anderen via @font-face. Der Google Import-Code sieht beispielsweise so aus:
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&family=Roboto&display=swap');
Um das Problem der Darstellung mit Apple iOS, Google Android und anderen modernen Browsern zu fixen, importiere die Schriften die du brauchst als .woff Dateien per @font-face in deine CSS:
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: local('Montserrat Regular'), local('Montserrat-Regular'),
url('fonts/montserrat-v14-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('fonts/montserrat-v14-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
Das war es eigentlich schon. Zwei sinnvolle Tools um Schriftarten herunterzuladen und in die eigene Seite zu integrieren, sind zum einen der Google-Webfonts-Helper und natürlich Google-Fonts.
Auf der Google-Webfonts Helper Seite suchst du dir deine zu verwendende Schriftart über das Suchfeld oben links und wählst die Schrift-Stile. Anschließend klickst du auf den Button “Modern Browsers” und folgst den weiteren Anweisungen.
Wenn ich Dir helfen konnte, lass es mich doch wissen.
