Google Blogger and cross-domain webfonts possible?

Question

Has anyone had success using webfonts hosted on a different server with Google Blogger?

With blogger I do not have access to Google servers so I must upload these font files to my own server.

Files hosted on my server or dropbox haven't worked.

Chrome Version 37 Firefox 32

@font-face {
font-family: 'fontname';
src: url('www.website.com/fonts/austie_bost_envelopes-webfont.eot');
src: url('www.website.com/fonts/austie_bost_envelopes-webfont.eot?#iefix') format('embedded- opentype'),
url('www.website.com/fonts/austie_bost_envelopes-webfont.svg#fontname') format('svg'),
url('www.website.com/fonts/Austie_Bost_Envelopes.otf') format('opentype'),
url('www.website.com/fonts/austie_bost_envelopes-webfont.ttf') format('truetype'),
url('www.website.com/fonts/austie_bost_envelopes-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'fontname';
src: url('/fonts/austie_bost_envelopes-webfont.svg') format('svg');
}
}

body {
-webkit-font-smoothing: antialiased;
}

Also tried dropbox method.

@font-face {
font-family: 'fontname';
src: url('https://www.dropbox.com/s/t4l791ueeurf96g/austie_bost_envelopes-webfont.eot');
src: url('https://www.dropbox.com/s/t4l791ueeurf96g/austie_bost_envelopes
webfont.eot?#iefix')format('embedded-opentype'),
url('https://www.dropbox.com/s/st6vddetjrti6d8/austie_bost_envelopes-webfont.woff')
format('woff'),
url('https://www.dropbox.com/s/mv0gd03th9fyu4x/austie_bost_envelopes-webfont.ttf')
format('truetype'),
url('https://www.dropbox.com/s/1idght73mxxdiz3v/austie_bost_envelopes-webfont.svg#fontname') format('svg');
font-weight: normal;
font-style: normal;
}

Checked whether the url is correct on Server and Dropbox
Codes are pasted in correct place, inside section ]]>
Referenced correctly
font-family: 'bang', serif;
Checked Firefox "Allow pages to use their own fonts" setting

Found in Search:

Firefox doesn't allow you to embed @font-face file from another domain for security reasons. https://productforums.google.com/forum/#!topic/blogger/WPK2zD4xYv4

Paul Keller · Answer 1 · 2014-09-27T23:09:24.493

Found solution. In researching this further I discovered cross-domain sharing could only become possible using the appropriate code snippet :

(I have a server with a Wordpress install, I added this code into the .htaccess file.

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType font/otf .eot
AddType font/otf .woff
AddType font/otf .svg
<FilesMatch "\.(ttf|otf|eot|woff|svg)$">
<IfModule mod_headers.c>
SetEnvIf Origin "http(s)?://(www\.)?(domain1.org|domain2.com|domain3.net)$" AccessControlAllowOrigin=$0$1
Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
Header set Access-Control-Allow-Credentials true

The AddType directive adds the appropriate MIME types to the HTTP response. The directive applies the directives it encloses only to files with extensions .ttf, .otf, and .eot. The directive checks to see that the Apache headers module is loaded. And finally when those conditions are met, we set the Access-Control-Allow-Origin header to "*" to allow all connections or specify select url only.

Referenced websites:

fixing-firefox-font-face-cross-domain_25

cdn-fonts

If someone cares to explain what Apache headers are it would be useful I think.

Cheers!

Google Blogger and cross-domain webfonts possible?

1 Answers1