Base64 Font Encoding for Tumblr on Firefox

Question

I am developing a Tumblr theme, and want to use a font that I have across all browsers. Because Firefox does not allow http requests for other domains for css fonts, right now the font does not work in Firefox, but works in all other browsers using the standard @font-face syntax.

Did some looking around and found a suggestion to use base64 to encode the font directly into the css file. Trying to do that now but it isn't working. I've never used this technique before, so I may just be missing something. I am linking to the stylesheet from the tumblr theme, and assigning the font-family:futuraBold to certain elements.

Here's what the stylesheet looks like:

  @font-face {
    font-family: “futuraBold”;
    src: url(“data:font/opentype;base64,BASE64CODE”);
} 

I used the base64 encoder here: http://www.opinionatedgeek.com/dotnet/tools/base64encode/

and uploaded a .otf font file.

Am I missing something?

Answer 1

All that is correct except that you I think you don't need any quotes, single or double. It should just go like this:

@font-face {
    font-family: futuraBold;
    src: url(data:font/opentype;base64,BASE64CODE);
} 

Hope this helped