@font-face not working on firefox

The following code doesn't work for firefox even though opera, safari, and ie seem to be all working just fine with this:

@font-face {
font-family: 'OverlockBoldItalic';
src: url('Overlock-BoldItalic-OTF-webfont.eot');
src: url('Overlock-BoldItalic-OTF-webfont.eot?#iefix') format('embedded-opentype'),
url('Overlock-BoldItalic-OTF-webfont.woff') format('woff'),
url('Overlock-BoldItalic-OTF-webfont.ttf') format('truetype'),
url('Overlock-BoldItalic-OTF-webfont.svg#OverlockBoldItalic') format('svg');
font-weight: normal;
font-style: normal; }

i'd appreciate if anybody can troubleshoot. All the font files in those formats are uploaded under the site's NB account.

Official response from Jesse Haff

You might try some of the suggestions in this Stack Overflow thread where someone is having a similar problem.

NationBuilder integrates with Typekit so you can bypass the headache often associated with getting @font-face to work perfectly. You can browse for a font similar to the one you are trying to use here.

You can also try Google web fonts which works well and is very easy to install in NationBuilder. Make sure to use the javascript embed method so it works on your secure pages too.

Share this post

Showing 10 reactions

How would you tag this suggestion?

Add comment (optional)

Sign in with

Facebook Twitter

Jesse Haff

NationBuilder employee

Jesse Haff responded with completed

posted 2016-06-22 09:33:41 -0700
Rob Butz

Certified Architect
Certified Expert

Rob Butz tagged this with Helpful

posted 2014-10-02 07:47:52 -0700
Ben Kempas

Film and Campaign Ltd.
Film and Campaign Ltd.
Certified Architect

Ben Kempas commented
Hi all, I ran into a similar problem with a font that’s not on Typekit or Google. The solution is Base64 encoding which puts the font code straight into the CSS file.
The FontSquirrel generator mentioned below doesn’t work with non-FontSquirrel fonts – but MyFonts.com offered this option when compiling a webfont kit so it’s all sorted now.
Just putting this here for future reference.
posted 2013-11-09 11:12:23 -0800
Tsuyoshi Orihashi

Tsuyoshi Orihashi responded

posted 2012-05-31 08:55:40 -0700
Marjorie Roswell

Marjorie Roswell commented
Alas/darn, the “similar font” resource doesn’t really let you look up your font (in my case: FrancoisOneRegular ) and find an alternative in TypeKit. It looks like you just have to eyeball it. Given that the problem with @font-face seems to be cross domain linking, would there be any way to upload our fonts so that they’re in the same domain?
posted 2012-05-31 06:42:19 -0700
Marjorie Roswell

Marjorie Roswell commented
In essence, @font-face doesn’t appear to work with NationBuilder. (It works locally, just not live on NationBuilder in certain browsers.) The similar font resource is helpful—thanks for sharing it. Can you provide some documentation/guidance on how to use Typekit? Even better if @font-face worked, certainly less hassle for my current project. I wonder if this might help resolve the font issue on NB: http://www.fontsquirrel.com/blog/2010/11/troubleshooting-font-face-problems
posted 2012-05-31 06:32:16 -0700
Tsuyoshi Orihashi

Tsuyoshi Orihashi commented
Finally I found a solution that doesn’t involve .htaccess

Replace

url(‘Overlock-BoldItalic-OTF-webfont.woff’) format(‘woff’),

with

url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAA… (omitted) …a6YAAA==) format(‘woff’),

And keep the rest the same.
I succeed in one point and failed on the other point. im still attempting to figure out what causes a success or a failure. Haven’t found it yet.
posted 2012-05-29 01:15:23 -0700
Tsuyoshi Orihashi

Tsuyoshi Orihashi commented
I tried to embed the font subset file inside the CSS as follows (generated by Font Squirrel, Base64 Encode)

src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAA… (omitted) …a6YAAA==) format(‘woff’),

didn’t succeed in the FireFox. This only leave the possibility that FireFox doesn’t allow cross domain linking so far.
posted 2012-05-28 23:48:09 -0700
Tsuyoshi Orihashi

Tsuyoshi Orihashi commented
Thank y’all for your attention and kind advices and references! Comparing pages with Typekit and @font-face, Typekit does include all font data inside the CSS instead of linking them. I’ll try the same later!
posted 2012-05-20 13:36:52 -0700
Tsuyoshi Orihashi

Tsuyoshi Orihashi responded

posted 2012-03-27 08:43:54 -0700