@font-face vs. cufon

Question

i'm working on a website and currently using the @font-face tehnique (this + this) to load the fonts. I noticed that some of the special characters are not loading properly -> ŠĐŽČĆ šđžčć. This is, those characters exist in the font itself. So, i made a test... I loaded up a test page with @font-face fonts and cufon fonts... The result is below ->

enter image description here

and of course, here is the code ->

<html>
    <head>
        <script type="text/javascript" src="cufon-yui.js"></script>
        <script type="text/javascript" src="ReprobateCRO_400.font.js"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
        <script type="text/javascript">Cufon.set('fontFamily', 'ReprobateCRO').replace('h1');</script>
        <style type="text/css">
            @font-face {
                font-family: 'ReprobateCROLASTRegular';
                src: url('reprob_cro_last_last-webfont.eot');
                src: local('ReprobateCROLASTRegular'),
                     url('reprob_cro_last_last-webfont.eot?#iefix') format('embedded-opentype'),
                     url('reprob_cro_last_last-webfont.woff') format('woff'),
                     url('reprob_cro_last_last-webfont.ttf') format('truetype'),
                     url('reprob_cro_last_last-webfont.svg#ReprobateCROLASTRegular') format('svg');
                font-weight: normal;
                font-style: normal;
            }
            h2{
                font-family:ReprobateCROLASTRegular;
            }
        </style>
    </head>
    <body>
        <h1>--> CUFON --> šđžčć ŠĐŽČĆ</h1>
        <br/><br/>
        <h2>--> @FONT-FACE --> šđžčć ŠĐŽČĆ</h2>
    </body>
</html>

So far i've tryed switching the encoding from utf8, widnwos1250, and nothing seems to work with the @font-face tehnique...

So, i have two questions... Does anybody know what's going on here? And, if i switch to using cufon insted of @font-face - how much would that slow down the page loading? (concidering cufon uses JS to load the fonts)

Thank you for your time!

the @font-face special chars are messed up in all modern browsers.. tested in chrome, firefox, IE > 7, opera, safari... looks the same everywhere... — Andrej, Jul 27 '11 at 06:04
so far i think it's a problem with the @font-face generator.. it doesen't seem to render special chars... — Andrej, Jul 27 '11 at 06:22
found a fix, but i can't post it as anwser... it was the font-face generator.. I didn't explicitly checked to make special chars.. so to fix this, go to font-face generator, check expert setting >> subsetting >> custom Subsetting >> choose your language... and.. viola! — Andrej, Jul 27 '11 at 06:28

score 10 · Accepted Answer · 2015-04-27T13:52:39.400

I myself had a lot of issues with @font-face recently while I was working on a web-font intensive web site and it turned out that the online web-font generating tools themselves were the guilty ones. They simply generated bad .woff / .ttf /.svg /.otf files which resulted in a lot of issues for which it was very hard to pinpoint the source of the problem.

In my experience the only online web-font generating service that provides 100% valid - issue free web-fonts is Font Squirrel. It also allows a lot of useful stuff such as font subsetting which might also be the problem in your case (i.e. you didn't specify to include additional characters in your generated web-fonts - Serbian / Croatian is part of Latin Extended B if I am not mistaking).

score 1 · Answer 2 · edited Aug 06 '14 at 12:04

1

The H2 has the wrong font definition: the single quotes are missing.

It is now:

font-family:ReprobateCROLASTRegular;

Should be:

font-family:'ReprobateCROLASTRegular';

edited Aug 06 '14 at 12:04

fedorqui

275,237
103
548
598

answered Aug 06 '14 at 11:46

Richard van Heukelum

11
1

score 1 · Answer 3 · answered Oct 26 '11 at 19:53

1

Have you tried it with http://fontface.codeandmore.com/ an alternative @font-face generator?.

answered Oct 26 '11 at 19:53

Tien Do

1,256
2
8
6

score 0 · Answer 4 · answered Aug 14 '11 at 14:26

You seem to have worked out the font issue; re: load times, my experience is that both font-face and cufon will potentially be slow enough to have a brief flash of default text. It depends on your host and the user's connection of course; but both methods require a relatively heavy download (either the JS or the font).

So, all else being equal IMHO you may as well use font-face; at least browsers are getting better at caching the font file so after the initial page load you can get faster rendering. With cufon it always has to load and execute the JS so you'll never get rid of that part of the load time.

score 0 · Answer 5 · answered Sep 16 '11 at 12:36

You implementation is good.

But when you used font-face. The font that you used. Must have all the characters that you want use. The .ttf or what ever must have all the characters and special characters when you will used it.

When you used Cufon. The Cufon generator make a lot of extra font letters for you. In the font generator of Cufon. You can select a lot of extra's for the font.

Do you understand it??

@font-face vs. cufon

5 Answers5