zed's dead baby, zed's dead

Menu

SSL and Google Fonts

My 9-5 involves building websites for retail customers. We often utilise some of Google’s fonts, but occaisionaly they weren’t rendering across all browsers and this was due to some SSL issues. Google fonts offer a couple of options for installing their fonts into your site, and after selecting at least one font, and we click the “use” option, we will be presented with:

Google Font embed options

There are some solutions out there on the web, but most document changing the link element href to https from http:
<link href='https://fonts.googleapis.com/css?family=Dosis:400,700' rel='stylesheet' type='text/css' />

Firstly we couldn’t use the first option (we can’t add bespoke html code to the symfony generated code), so if we click to the @import option we see:
@import url(http://fonts.googleapis.com/css?family=Open+Sans);

The @import doesn’t work for us here either, but if we copy the url into the address bar in the browser and hit enter, we get:
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

If we add this to our style sheet and remove the http: from the url, the browser will call the google font page in the applicable mode (http or https).

Contribute

Got a flickr account? Got a photo that illustrates this post? Just add the following triple tag and as if by magic, it will appear here: