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?

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

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.

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.

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!

The issue may be mostly due to firefox not allowing cross domain linking I believe

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.