Gerrit van Aaken erklärt in Webfonts: Fette Fehlerquelle, wie das Einbinden von unterschiedlich fetten Schnitten einer Schrift funktioniert. Eine sehr gute, aktuelle, deutsche Zusammenfassung zu einer Technik, die zum Handwerkszeug eines Frontend Developers gehört und die leider oft falsch genutzt wird.
Schlagwort-Archive:@font-face
Aggressives Firefox-Schriftcaching mit Versionsnummern austricksen
Sämtliche Firefox-Versionen, die ich unter Ubuntu, Windows 7 und Mac OS X benutze, speichern einmal geladene Webfonts sehr aggressiv. Aggressiv bedeutet in diesem Fall, dass ein normales Löschen des Caches zum Neu-Laden der Schrift nicht ausreicht, stattdessen muss zusätzlich noch der Browser neu gestartet werden. Da dies im Entwicklungsprozess doch eher unschön ist, bin ich […]
Lesetipp: Über die richtige Einbindung von Webfonts
Im Smashing Magazine gibt es zwei sehr gute Artikel zum Thema @font-face. In Avoiding Faux Weights And Styles With Google Web Fonts wird erklärt, wie Schriften über das Google Font Directory richtig eingebunden werden können. Ganz so trivial ist das nämlich nicht, denn die Einbindung á la Google Webfonts funktioniert nicht richtig im IE 7 […]
@font-face, SVG-Schriften und Fragmentbezeichner
Um SVG-Schriften mittels der @font-face-Syntax einzubetten, wird bekanntlich folgendes Css benötigt: @font-face { font-family: „Open Sans Regular“; src: url(„../fonts/open-sans-regular/OpenSans-Regular-webfont.svg#OpenSansRegular“) format(„svg“); } Spannend ist der Fragmentbezeichner hinter dem Dateinamen, von mir fett hervorgehoben. Normalerweise sollte dieser nämlich in der Schriftdatei noch einmal auftauchen, nämlich als Attributwert für id innerhalb dieses XML-Snippets: <font id=“OpenSansRegular“ horiz-adv-x=“1171″> Tja. Normalerweise. […]