This guide is Intended to solve the errors associated with Web Fonts when served from Rackspace Cloud Files for a webpage using HTTPS. You need to read these two previously published articles to simply check if you already know the basic stuffs – How To Use Any Web Font From Own Hosted Library and Serving Fonts from Rackspace Cloud Files CDN. Practically we have mentioned the second linked article about the requirement of extra X Header. This is an old video to use Rackspace Cloud Files, but practically the basic rule is same to upload files which PHP based scripts or Plugins might fail to upload :
View the video at [1080p] by the click-selecting the gear icon. The interface, API and features of Rackspace Cloud Files CDN has been changed since this video was created, but the basic – again to repeat, has remained the same.
Web Fonts, HTTPS and CDN : Error With Woff
Woff can make you to say Uff! First, on the server’s virtual host file; we need to add (nginx) :
---
|
1 2 3 |
location ~ \.(ttf|ttc|otf|eot|woff|font.css|css)$ { add_header Access-Control-Allow-Origin "*"; } |
or add these on .htaccess (Apache2) :
Basically, we whitelisted the CDN to push the fonts on HTTPS pages. Woff has specific problem, it is a compressed format. We are not even thinking about Microsoft’s great browsers IE ver {1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, X, Y}, these will solve issue with non IE browser, where the web server is running a sane Operating System (GNU Linux or any BSD). For Woff, you will face “Access-Control-Allow-Origin” issue on Chrome, Chromium, Firefox etc. browsers. Currently Safari (Mac users unlikely to use older softwares) understands Woff is a Font, not a Bomb. If all people used an universal browser, there would be lesser problem; unfortunately the monetary gain from Browser is assumed to be quite higher by referring to the search engines (= Ads), helping Amazon to sell products (bookmarks by default has some websites…). This is the needed work on Server only.
Web Fonts, HTTPS and CDN : WTF is CORS You Wrote in .htaccess?
CORS is a kind of curse. CORS stands for Cross-site HTTP requests, these are HTTP requests for fetching resources from a different domain other than the webpage’s domain. For instance, a resource loaded from Domain A (http://domain.example) such as an HTML web page, makes a request for a resource on Domain B as CDN (http://domain.foo), static materials including your fonts – this occurs very commonly on the web today ” pages load a number of resources in a cross-site manner, including CSS stylesheets, images and scripts, and other resources. Unfortunately, there are morons who thinks, injection is done via other domain – it is rare. In fact, most exploits are ran using a security flaw of a file on the main domain to escape getting caught – (http://domain.example/my-php-with-flaw.php?ver=2.0?//ip.ip.ip.ip/exploit/return/this/as/txt). Historically Gecko added it, before that, there was no problem. Even if HTTP standard changes, these issues are unlikely to be corrected to allow a less painful – technically, for fonts, images if another domain co-uses it, it should not be a headache of the browser “manufactures”.
Web Fonts, HTTPS and CDN : Managing Rackspace Cloud Files Side
Quite easy. Rackspace Cloud File’s origin ( read Akamai Edge Servers) can compress, while files which are stored are uncompressed, the CDN will respond to accept-encoding headers from browsers by delivering compressed files from the CDN edge locations. This compression is restricted to html, javascript and css files. Additionally, we could compress files manually and set the content-encoding header, but this is not used because of IE ver {1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, X, Y} users. In other words, Rackspace actually reduces your headache fully automatically via Cloud DNS – Cloud Server – Cloud Files as an unified origin. But for complicated stuffs, we need to work. Cyberduck can be used to set these headers but you can use the Cloud Files control panel, click the file’s gear icon to add header you are having issue with :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
------------------------------------------------------------------------------ File Types Header Name Value needed to be added ------------------------------------------------------------------------------ .eot Access-Control-Allow-Origin application/vnd.ms-fontobject ------------------------------------------------------------------------------ .otf Access-Control-Allow-Origin font/opentype ------------------------------------------------------------------------------ .woff Access-Control-Allow-Origin application/font-woff ------------------------------------------------------------------------------ (safe to add) Access-Control-Allow-Origin * ------------------------------------------------------------------------------ .svg Access-Control-Allow-Origin image/svg+xml ------------------------------------------------------------------------------ |
This is a plain text file, so that you can copy the value easily.
Tagged With Abhishek font