Custom Font Embedding DOES NOT WORK Cross-Browser

Question

I have have "Gulim", a custom font, embedded into my website at mangodownload.com (you can see it on the homepage, if you see Arial, it does not work on your browser.)

Unfortunately, this font does NOT work on many browsers.

Here is my CSS for the font:

@font-face { 
    font-family: "Gulim";
    src: url("/style/fonts/Gulim.ttf");
    src: local("Gulim"), url("/style/fonts/Gulim.ttf") format("truetype");
}

Any ideas on achieving cross-browser support for ALL browsers?

PLEASE NOTE: I have tried converting the font, and tried FontSquirrel. I keep receiving the same message; 'font size too large'. My gulim.ttf file is 10mb.

What's a `.tff` font? The `.ttf` extension is the more normal one for TrueType. — robertc, Apr 21 '12 at 15:42
SO deleted my link. I'll edit it. @robertc the .tff was a mistake on my part, sorry. I've fixed it. — Hugo Cornellier, Apr 21 '12 at 15:50

score 4 · Accepted Answer · answered Apr 21 '12 at 15:47

4

@font-face {
    font-family: 'yourfunkyfont';
    src: url('fonts/yourfunkyfont.eot');
    src: url('fonts/yourfunkyfont.svg') format('truetype'),
         url('fonts/yourfunkyfont.eot?#iefix') format('embedded-opentype'),
      url('fonts/yourfunkyfont.woff') format('woff'),
      url('fonts/yourfunkyfont.ttf') format('truetype'),
      url('fonts/yourfunkyfont.svg#yourfunkyfont') format('svg');
}

this will work only if you add the following MIME-types in your IIS (other webserver):

.woff - application/x-font-woff
.svg - application/x-font-woff

answered Apr 21 '12 at 15:47

Peter Aron Zentai

11,482
5
41
71

I know this, but how do I convert my font to .woff and .svg? – Hugo Cornellier Apr 21 '12 at 15:51
@HugoCornellier, convert your font with a [font convertor](http://www.google.com/search?rls=en&q=font+conversion). – Sparky Apr 21 '12 at 15:56
They all say my font's filesize is too big. Any way to size down the file, then convert it? Unfortunately, the file is >10mb. – Hugo Cornellier Apr 21 '12 at 16:00

score 0 · Answer 2 · answered Apr 21 '12 at 15:43

0

There is no way to do this cross-browser unless you can get your font in the various formats required by various browsers. The CSS to use is as follows:

@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
     url('myfont-webfont.woff') format('woff'), 
     url('myfont-webfont.ttf')  format('truetype'),
     url('myfont-webfont.svg#svgFontName') format('svg');
}

As you can see, you need the font in eot, woff, ttf and svg formats.

answered Apr 21 '12 at 15:43

James Allardice

164,175
21
332
312

What is the easiest way to achieve these conversions, without using FontSquirrel? – Hugo Cornellier Apr 21 '12 at 15:52
I don't know, but it [can't be difficult to find out](https://www.google.com/search?q=font+converter). – James Allardice Apr 21 '12 at 15:53
They all say my font's filesize is too big. Any way to size down the file, then convert it? Unfortunately, the file is >10mb. – Hugo Cornellier Apr 21 '12 at 16:01
1

@HugoCornellier You could try something like [FontForge](http://fontforge.sourceforge.net/). – robertc Apr 21 '12 at 18:40

Custom Font Embedding DOES NOT WORK Cross-Browser

2 Answers2