CODEWITHSUNDEEP
htmlcssfontsfont-facecufon
Andrej
Andrej

Reputation: 736

@font-face vs. cufon

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!

Upvotes: 11

Views: 6329

Answers (5)

user188654
user188654

Reputation:

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).

Upvotes: 10

Richard van Heukelum
Richard van Heukelum

Reputation: 11

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

It is now:

font-family:ReprobateCROLASTRegular;

Should be:

font-family:'ReprobateCROLASTRegular';

Upvotes: 1

Tien Do
Tien Do

Reputation: 1256

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

Upvotes: 1

Mike Vierwind
Mike Vierwind

Reputation: 7009

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??

Upvotes: 0

BenB
BenB

Reputation: 116

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.

Upvotes: 0

Related Questions