{"id":568,"date":"2014-03-11T10:51:03","date_gmt":"2014-03-11T09:51:03","guid":{"rendered":"http:\/\/paulchr.ablass.me\/blog\/?p=568"},"modified":"2014-03-11T10:51:03","modified_gmt":"2014-03-11T09:51:03","slug":"domainuebergreifene-zugriffe-auf-webfonts-cors","status":"publish","type":"post","link":"https:\/\/paulchr.ablass.me\/blog\/2014\/03\/11\/domainuebergreifene-zugriffe-auf-webfonts-cors\/","title":{"rendered":"Domain\u00fcbergreifene Zugriffe auf Webfonts (CORS)"},"content":{"rendered":"<p>Gelegentlich werden Webfonts von einer anderen Domain\/ einem anderen Server eingebunden (<em>Cross Origin Request<\/em>). Im Zuge dessen kann es vorkommen, dass der Zugriff auf diese Dateien auf Grund der Einhaltung der <em>Same-Origin-Policy<\/em> abgelehnt wird und die Schriften nicht geladen werden. Gl\u00fccklicherweise gibt es mit <em>Cross Origin Ressource Sharing<\/em> (<strong>CORS<\/strong>) aber eine Methode, um diese <em>Cross Origin Request<\/em> zu erm\u00f6glichen. Dazu muss folgender Code in die <code>.htaccess<\/code> eingef\u00fcgt werden:<\/p>\n<pre><code># BEGIN CROSS ORIGIN RESSOURCE SHARING FOR WEBFONTS\r\n&lt;FilesMatch \"\\.(ttf|eot|woff)$\"&gt;\r\n    &lt;IfModule mod_headers.c&gt;\r\n        Header set Access-Control-Allow-Origin \"*\"\r\n    &lt;\/IfModule&gt;\r\n&lt;\/FilesMatch&gt;\r\n# END CROSS ORIGIN RESSOURCE SHARING FOR WEBFONTS<\/code><\/pre>\n<p>Dadurch wird das Aufrufen von Dateien der Formate <code>ttf<\/code>, <code>eot<\/code> und <code>woff<\/code> von fremden <em>Origins<\/em> erm\u00f6glicht.<\/p>\n<h3>Links<\/h3>\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/HTTP\/Access_control_CORS\">HTTP access control (CORS)<\/a><br \/>\n<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Same_origin_policy_for_JavaScript\">Same-origin policy<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 eine Methode, um diese Cross [&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":[74],"tags":[67,158,39],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2Vohc-9a","jetpack-related-posts":[{"id":644,"url":"https:\/\/paulchr.ablass.me\/blog\/2014\/06\/06\/compass-mehrere-css-transformationen-verknuepfen\/","url_meta":{"origin":568,"position":0},"title":"Compass: Mehrere Css-Transformationen verkn\u00fcpfen","author":"Paul-Christian Abla\u00df","date":"6. Juni 2014","format":false,"excerpt":"Compass bietet out of the box eine ganze Reihe von Mixins zur einfachen Nutzung von verschiedenen Css-Transformationen an. Leider gibt es bei der B\u00fcndelung dieser Transformationen in einem Mixin einige kleine Fallstricke, die ich erst nach und nach entdeckt habe und aus Archivierungsgr\u00fcnden festhalten m\u00f6chte. Die transform()-Mixins von Compass Es\u2026","rel":"","context":"In &quot;Tools&quot;","block_context":{"text":"Tools","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/tools\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":147,"url":"https:\/\/paulchr.ablass.me\/blog\/2013\/02\/26\/lesetipp-ueber-die-richtige-einbindung-von-webfonts\/","url_meta":{"origin":568,"position":1},"title":"Lesetipp: \u00dcber die richtige Einbindung von Webfonts","author":"Paul-Christian Abla\u00df","date":"26. Februar 2013","format":false,"excerpt":"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\u2026","rel":"","context":"In &quot;Allgemein&quot;","block_context":{"text":"Allgemein","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/allgemein\/"},"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":568,"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":357,"url":"https:\/\/paulchr.ablass.me\/blog\/2013\/08\/26\/aggressives-firefox-schriftcaching-mit-versionsnummern-austricksen\/","url_meta":{"origin":568,"position":3},"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":516,"url":"https:\/\/paulchr.ablass.me\/blog\/2014\/01\/28\/weiterleitungen-redirects-in-der-htaccess\/","url_meta":{"origin":568,"position":4},"title":"Weiterleitungen (redirects) in der .htaccess","author":"Paul-Christian Abla\u00df","date":"28. Januar 2014","format":false,"excerpt":"Nachdem die letzten Tage eine ganze Reihe von Links zu seit Jahren nicht mehr existierenden Seiten hier angesp\u00fclt wurden und die Google Webmaster Tools schon mahnende Mails verschickten, habe ich mich schlau gemacht wie darauf am besten zu reagieren ist. Standardm\u00e4\u00dfig ist der Http-Status-Header im Falle einer nicht gefundenen Ressource\u2026","rel":"","context":"In &quot;Allgemein&quot;","block_context":{"text":"Allgemein","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/allgemein\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":207,"url":"https:\/\/paulchr.ablass.me\/blog\/2013\/04\/06\/gzip-komprimierung-in-der-htaccess-datei-aktivieren\/","url_meta":{"origin":568,"position":5},"title":"gzip-Komprimierung in der .htaccess-Datei aktivieren","author":"Paul-Christian Abla\u00df","date":"6. April 2013","format":false,"excerpt":"# BEGIN GZIP <ifmodule mod_deflate.c> AddOutputFilterByType DEFLATE text\/text text\/html text\/plain text\/xml text\/css application\/x-javascript application\/javascript <\/ifmodule> # END GZIP","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":[]}],"_links":{"self":[{"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/posts\/568"}],"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=568"}],"version-history":[{"count":3,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/posts\/568\/revisions"}],"predecessor-version":[{"id":571,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/posts\/568\/revisions\/571"}],"wp:attachment":[{"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/media?parent=568"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/categories?post=568"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/tags?post=568"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}