htmlcssfontsfont-facecufon

@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!

Solution

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