8

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?

Pavlo
  • 43,301
  • 14
  • 77
  • 113
Chris
  • 884
  • 1
  • 11
  • 30
  • 2
    My suggestion is to try [Font Squirrel](http://www.fontsquirrel.com/fontface/generator) in Expert mode and select Base64 encode. Then, see if it's not working. – Ally Dec 19 '12 at 21:58
  • For example, I tried Oswald and here is the start of the encoded string it gave me: `src: url(data:application/x-font-woff;charset=utf-8;base64,...` – Ally Dec 19 '12 at 22:00
  • Do you really have those fancy quotes (`“`) in your style sheet? You should replace them with ordinary double quotes (`"`). – Ilmari Karonen Dec 30 '12 at 10:36
  • @Chris did you get this to work? I'm doing something similar for IE9+ and Firefox support with the smaller .woff files, but it's not working. `if (navigator.userAgent.indexOf("Internet Explorer")>-1||navigator.userAgent.indexOf("Firefox")>-1) {if (navigator.userAgent.indexOf("Firefox")>-1) {fontload=document.createElement('style');fontload.setAttribute('type','text/css');fontload.setAttribute('id','fontload')fontload.innerHTML = "@font-face{ font-family: \"SEGOEUIL\"; src: local('☺'),url(data:application/x-font-woff;charset=utf-8;base64,...)` – Louis Maddox May 14 '14 at 18:38

1 Answers1

2

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

Amja
  • 1,315
  • 9
  • 25