{"id":147,"date":"2013-02-26T22:21:19","date_gmt":"2013-02-26T21:21:19","guid":{"rendered":"http:\/\/paulchrablass.de\/blog\/?p=147"},"modified":"2013-04-14T17:35:35","modified_gmt":"2013-04-14T15:35:35","slug":"lesetipp-ueber-die-richtige-einbindung-von-webfonts","status":"publish","type":"post","link":"https:\/\/paulchr.ablass.me\/blog\/2013\/02\/26\/lesetipp-ueber-die-richtige-einbindung-von-webfonts\/","title":{"rendered":"Lesetipp: \u00dcber die richtige Einbindung von Webfonts"},"content":{"rendered":"<p>Im <a href=\"http:\/\/www.smashingmagazine.com\">Smashing Magazine<\/a> gibt es zwei sehr gute Artikel zum Thema <code>@font-face<\/code>. In <a href=\"http:\/\/www.smashingmagazine.com\/2012\/07\/11\/avoiding-faux-weights-styles-google-web-fonts\/\">Avoiding Faux Weights And Styles With Google Web Fonts<\/a> wird erkl\u00e4rt, wie Schriften \u00fcber das <a href=\"http:\/\/www.google.com\/webfonts\">Google Font Directory<\/a> richtig eingebunden werden k\u00f6nnen. Ganz so trivial ist das n\u00e4mlich nicht, denn die Einbindung \u00e1 la Google Webfonts funktioniert nicht richtig im IE 7 und 8. Dies f\u00fchrt dazu, dass diese beiden Versionen des Internet Explorer einzelne Schriftschnitte &#8222;faken&#8220; und so die Lesbarkeit und Darstellung von Textabschnitten verschlechtern. Und obwohl der Fehler seit Juni 2010 <a href=\"https:\/\/code.google.com\/p\/googlefontdirectory\/issues\/detail?id=9\">bekannt ist<\/a>, wurde er scheinbar immer noch nicht gefixt, so dass der verlinkte Artikel nach wie vor aktuell ist.<\/p>\n<p>Der zweite Artikel, <a href=\"http:\/\/coding.smashingmagazine.com\/2013\/02\/14\/setting-weights-and-styles-at-font-face-declaration\/\">Setting Weights And Styles With The @font-face Declaration<\/a> , besch\u00e4ftigt sich- unabh\u00e4ngig von Google Webfonts- mit der richtigen Einbindung von verschiedenen Schriftschnitten, geht dabei \u00fcber bold und italic hinaus und behandelt auch so verr\u00fcckte Sachen wie einen eventuellen light- oder semibold-Schriftschnitt samt Fallack-L\u00f6sungen f\u00fcr Ger\u00e4te, die mit <code>@font-face<\/code> nichts anfangen k\u00f6nnen (hallo Windows Phone 7.5).<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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\u00e4rt, wie Schriften \u00fcber das Google Font Directory richtig eingebunden werden k\u00f6nnen. Ganz so trivial ist das n\u00e4mlich nicht, denn die Einbindung \u00e1 la Google Webfonts funktioniert nicht richtig im IE 7 [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_newsletter_tier_id":0,"jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[15],"tags":[38,42,43,41,40,39],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2Vohc-2n","jetpack-related-posts":[{"id":561,"url":"https:\/\/paulchr.ablass.me\/blog\/2014\/02\/19\/lesetipp-faux-bold-vermeiden-verschieden-fette-schriftschnitte-richtig-einbinden\/","url_meta":{"origin":147,"position":0},"title":"Lesetipp: faux bold vermeiden &#038; verschieden fette Schriftschnitte richtig einbinden","author":"Paul-Christian Abla\u00df","date":"19. Februar 2014","format":false,"excerpt":"Gerrit van Aaken erkl\u00e4rt 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\u00f6rt und die leider oft falsch genutzt wird.","rel":"","context":"In &quot;Css&quot;","block_context":{"text":"Css","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":357,"url":"https:\/\/paulchr.ablass.me\/blog\/2013\/08\/26\/aggressives-firefox-schriftcaching-mit-versionsnummern-austricksen\/","url_meta":{"origin":147,"position":1},"title":"Aggressives Firefox-Schriftcaching mit Versionsnummern austricksen","author":"Paul-Christian Abla\u00df","date":"26. August 2013","format":false,"excerpt":"S\u00e4mtliche 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\u00f6schen des Caches zum Neu-Laden der Schrift nicht ausreicht, stattdessen muss zus\u00e4tzlich noch der Browser neu gestartet werden. Da dies im Entwicklungsprozess doch\u2026","rel":"","context":"In &quot;Browser&quot;","block_context":{"text":"Browser","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/browser\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":139,"url":"https:\/\/paulchr.ablass.me\/blog\/2013\/02\/25\/font-face-svg-schriften-und-fragmentbezeichner\/","url_meta":{"origin":147,"position":2},"title":"@font-face, SVG-Schriften und Fragmentbezeichner","author":"Paul-Christian Abla\u00df","date":"25. Februar 2013","format":false,"excerpt":"Um SVG-Schriften mittels der @font-face-Syntax einzubetten, wird bekanntlich folgendes Css ben\u00f6tigt: @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\u00e4mlich in der Schriftdatei noch einmal auftauchen, n\u00e4mlich als Attributwert f\u00fcr id innerhalb dieses XML-Snippets:\u2026","rel":"","context":"In &quot;Css&quot;","block_context":{"text":"Css","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":568,"url":"https:\/\/paulchr.ablass.me\/blog\/2014\/03\/11\/domainuebergreifene-zugriffe-auf-webfonts-cors\/","url_meta":{"origin":147,"position":3},"title":"Domain\u00fcbergreifene Zugriffe auf Webfonts (CORS)","author":"Paul-Christian Abla\u00df","date":"11. M\u00e4rz 2014","format":false,"excerpt":"Gelegentlich werden Webfonts von einer anderen Domain\/ einem anderen Server eingebunden (Cross Origin Request). Im Zuge dessen kann es vorkommen, dass der Zugriff auf diese Dateien auf Grund der Einhaltung der Same-Origin-Policy abgelehnt wird und die Schriften nicht geladen werden. Gl\u00fccklicherweise gibt es mit Cross Origin Ressource Sharing (CORS) aber\u2026","rel":"","context":"In &quot;Webserver&quot;","block_context":{"text":"Webserver","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/webserver\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":494,"url":"https:\/\/paulchr.ablass.me\/blog\/2014\/01\/20\/chrome-mit-flags-starten\/","url_meta":{"origin":147,"position":4},"title":"Chrome mit Flags starten","author":"Paul-Christian Abla\u00df","date":"20. Januar 2014","format":false,"excerpt":"Um den Funktionsumfang von Chrome\/ Chrome Canary\/ Chromium zu erweitern, besteht die M\u00f6glichkeit den Browser mit sogenannten \"Flags\" zu starten. Flags sind Startparameter, die mit der Kommandozeile \u00fcbergeben werden und Optionen wie beispielsweise das subpixel font scaling zur besseren Darstellung der Schrift aktivieren. Flag-Aktivierung unter Windows Auf einem Windows-Rechner muss\u2026","rel":"","context":"In &quot;Browser&quot;","block_context":{"text":"Browser","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/browser\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/paulchr.ablass.me\/blog\/wp-content\/uploads\/2014\/01\/chrome-flags-windows-212x300.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":297,"url":"https:\/\/paulchr.ablass.me\/blog\/2013\/05\/26\/sass-mixin-rem-mit-px-fallback\/","url_meta":{"origin":147,"position":5},"title":"Sass-Mixin: rem mit px-Fallback","author":"Paul-Christian Abla\u00df","date":"26. Mai 2013","format":false,"excerpt":"Ich nutze im Css so gut wie ausschlie\u00dflich rem (siehe dazu auch CSS-Tipp: rem als Einheit f\u00fcr Schriftgr\u00f6\u00dfe nutzen) als Einheit und trug das ben\u00f6tigte Pixel-Fallback bisher h\u00e4ndisch ein. Mit der Zeit nervt das ziemlich, daher war ich sehr erfreut als ich vor kurzem das rem-Mixin f\u00fcr Sass von Hans\u2026","rel":"","context":"In &quot;Css&quot;","block_context":{"text":"Css","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/posts\/147"}],"collection":[{"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/comments?post=147"}],"version-history":[{"count":4,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/posts\/147\/revisions"}],"predecessor-version":[{"id":559,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/posts\/147\/revisions\/559"}],"wp:attachment":[{"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/media?parent=147"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/categories?post=147"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/tags?post=147"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}