Use a non standard font

by Rod 14. July 2011 18:38

The web is a big place. A big, colorful, resourceful place. As a result, finding out how to do things to which there are around 10000 standards, nobody seems to be in agreement on the standard, and Microsoft goes it's own way (as usual); the task is quite daunting.

My story is about trying to use a "non web standard" font on a site,

 

I was presented with a simple problem: Make a site and we want to use this font. The options were using graphics for every line text (with a multilingual site, a painful proposition) or use custom fonts. A little bit of research showed me that @font-face was the css I was looking for (and no, Obi Wan Kenobi did not tell me those were the droids I was looking for).

So, with a TTF of the font I needed, I used it as recommended:

@font-face {
   font-family: 'myFont';
   src: url('/myFont.ttf');
}

 

Then, I declared my custom font family as any ol' regular font:

body   
{
...
    font-family: 'myFont', Verdana, sans-serif;
    ...
}

And it works! Yes! It works! Chrome - Check. Firefox-Check. IE-No go (...any version).

Turns out that that IE doesn't like TTF files and it needs MS own "eot" format. Ok. Some after some Google time, I found this nice online converter. Perfect! So I use it as prescribed on my Site.Master (you'll see why in a sec):

        @font-face
        {
            font-family: "myFont";
            src: url('<%= ResolveUrl("myFont.eot") %>');
            src: local(myFont), url('<%= ResolveUrl("myFont.ttf") %>') format('opentype');
        }

And it works, but NOT on all IE standards (IE7 - check. IE8 - check, IE-9 Nope). Android? nope. As a side note, what makes it partly work on IE is that IE doesn't understand the "local(...)" tag, so it uses the eot.

It turns out that there multiple standards and not ALL work the same on all browsers (or even on the different version of the same browser) and you need to use some browsers hacks tricks to make it work on all browsers.

        @font-face {
            font-family: 'myFont';
            src: url('<%= ResolveUrl("myFont.eot") %>');
            src: url('<%= ResolveUrl("myFont.eot") %>?#iefix') format('embedded-opentype'),
                 url('<%= ResolveUrl("myFont.woff") %>') format('woff'),
                url('<%= ResolveUrl("myFont.ttf") %>') format('truetype'),
                url('<%= ResolveUrl("myFont.svg") %>#') format('svg');
        }

I used this converter to create all the font files the "trick" requires from the TTF I already had. If you feel slightly lazy, this site will generate the css for you. Go here for an explanation of the hack.

Stay programming my friends!

 

Tags: , , ,

Entity Framework | SQL

Powered by BlogEngine.NET 2.5.0.6

About Us

Wuji Touch is a software consulting firm based in Delray Beach, Florida. We specialize in Microsoft technologies, but we also have experience with Progress OpenEdge, iOS, and Android development. This is our blog. These are the tales of the pains and pleasures we experience daily in our journey through 1s and 0s.

Month List