• Home
  • Archive
  • Tools
  • Contact Us

The Customize Windows

Technology Journal

  • Cloud Computing
  • Computer
  • Digital Photography
  • Windows 7
  • Archive
  • Cloud Computing
  • Virtualization
  • Computer and Internet
  • Digital Photography
  • Android
  • Sysadmin
  • Electronics
  • Big Data
  • Virtualization
  • Downloads
  • Web Development
  • Apple
  • Android
Advertisement
You are here:Home » Web Fonts, HTTPS and CDN : Error and Solution

By Abhishek Ghosh August 18, 2014 11:48 am Updated on August 18, 2014

Web Fonts, HTTPS and CDN : Error and Solution

Advertisement

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) :

Advertisement

---

Vim
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

 

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 :

Vim
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
Facebook Twitter Pinterest

Abhishek Ghosh

About Abhishek Ghosh

Abhishek Ghosh is a Businessman, Surgeon, Author and Blogger. You can keep touch with him on Twitter - @AbhishekCTRL.

Here’s what we’ve got for you which might like :

Articles Related to Web Fonts, HTTPS and CDN : Error and Solution

  • Nginx WordPress Installation Guide (All Steps)

    This is a Full Nginx WordPress Installation Guide With All the Steps, Including Some Optimization and Setup Which is Compatible With WordPress DOT ORG Example Settings For Nginx.

  • Changing Data With cURL for OpenStack Swift (HP Cloud CDN)

    Changing Data With cURL For Object is Quite Easy in OpenStack Swift. Here Are Examples With HP Cloud CDN To Make it Clear. Official Examples Are Bad.

  • Steps To Install Nginx Plus on Ubuntu Server (HP Cloud)

    Here Are the Steps To Install Nginx Plus on Ubuntu Server Running on HP Cloud. Nginx Plus is the Paid Version of Nginx with Extra Features.

  • OpenStack Swift & HPCloud CDN PHP Bindings : Basics

    Here is the basics of OpenStack Swift & HPCloud CDN PHP Bindings for the WordPress Plugin developers and those who works with PHP based CMS.

performing a search on this website can help you. Also, we have YouTube Videos.

Take The Conversation Further ...

We'd love to know your thoughts on this article.
Meet the Author over on Twitter to join the conversation right now!

If you want to Advertise on our Article or want a Sponsored Article, you are invited to Contact us.

Contact Us

Subscribe To Our Free Newsletter

Get new posts by email:

Please Confirm the Subscription When Approval Email Will Arrive in Your Email Inbox as Second Step.

Search this website…

 

Popular Articles

Our Homepage is best place to find popular articles!

Here Are Some Good to Read Articles :

  • Cloud Computing Service Models
  • What is Cloud Computing?
  • Cloud Computing and Social Networks in Mobile Space
  • ARM Processor Architecture
  • What Camera Mode to Choose
  • Indispensable MySQL queries for custom fields in WordPress
  • Windows 7 Speech Recognition Scripting Related Tutorials

Social Networks

  • Pinterest (24.3K Followers)
  • Twitter (5.8k Followers)
  • Facebook (5.7k Followers)
  • LinkedIn (3.7k Followers)
  • YouTube (1.3k Followers)
  • GitHub (Repository)
  • GitHub (Gists)
Looking to publish sponsored article on our website?

Contact us

Recent Posts

  • What is Hardware Security Module (HSM)September 30, 2023
  • Transducer Technologies of HeadphonesSeptember 28, 2023
  • What is Analog-to-Digital Converter (ADC)September 27, 2023
  • Comparison of Tube Amplifiers and SemiconductorsSeptember 26, 2023
  • What is a Digital-to-Analog Converter (DAC)September 25, 2023
PC users can consult Corrine Chorney for Security.

Want to know more about us?

Read Notability and Mentions & Our Setup.

Copyright © 2023 - The Customize Windows | dESIGNed by The Customize Windows

Copyright  · Privacy Policy  · Advertising Policy  · Terms of Service  · Refund Policy