Lately, I’ve been head down shoulders-deep in work.  What’s new, right?

This project is…  – well, I can’t talk much about it (yet), but what I can say is that I’m very excited to see its launch and the potential progress throughout the future as it gets bigger and more people get excited and start using it.

One of the challenges faced, you might guess by my title, the use of a custom font.  Now, this isn’t a “new” thing across the web, quite a number of places do this – that being said, its not as common knowledge as one might think.  There are plenty of places out there which talk about how to do it, what can and cannot be done, etc. but I find that there are gross contradictions from one article and/or blog to the next.

I’m always up for a new challenge, but it seems that each time I find myself hunting after something which initially seems simple, it becomes quite complicated.

After much searching, I was able to locate a great resource that cleared a great deal of the fog.

Back in 2009, Scott Kimler posted on his family/personal blog  xBrowser Fonts

My goodness did his post help me a lot.  Between his post and a few others which elaborated on a few points that his touched on, I set forth to tackle this and wipe it out!

Here’s some of what I learned:

1. Don’t use Microsoft’s eot font generator – the file it creates is quite large and can only be used where you set its allowance to – as in if you didn’t think about every last place its going to be used, it won’t work… for IE browsers, that is.  The other browsers don’t support EOT fonts
   • Instead, use EOT Fast – it’s easy to use.  just download it, unzip it, and then grab whatever font you want and drop it, literally, on top of the install file.  Vwalla, instant font creation.
   • btw: I feel that kudos should go out to microsoft for having an option for so long while other browsers only just  recently caught up to the wave of font embedding desires.
2. TTF rules all – just about the rest of the browsers, except for IE, accept true type fonts
3. Include the others: SVG for mobile, WOFF, for older mozilla browsers, and OTF – for just in case
4. Syntax is EVERYTHING – if even just the tiniest misstep is made, it won’t freakin’ work.  It might for one browser, but it won’t for the rest.  This includes using the proper case for the format types.  The mac and firefox (on Windows 7) are quite particular about the proper casing of OpenType and TrueType.
   • @font-face {
     font-family: “My Super Font”;
     src: url (‘fonts/superfont.eot’);
     src: local(‘Super Font’), url (‘fonts/superfont.otf’) format(‘OpenType’);
     src: local(‘Super Font’), url (‘fonts/superfont.svg’) format(‘SVG’);
     src: local(‘Super Font’), url (‘fonts/superfont.ttf’) format(‘TrueType’);
     src: local(‘Super Font’), url (‘fonts/superfont.woff’) format(‘WOFF’);
     font-weight: normal;
     }
     .thisnewclass {
     font-family: ‘My Super Font’,Arial,Verdana,Sans-Serif;
     }
5. It CAN work cross platform, including on a mac! (more on this in this blog)
6. Without bringing in any jquery, you can have control over BOLD and ITALIC in your css
   • Notice how the example in #4 has the font-weight: normal?  What you can do is create essentially the same @font face (a second time), stick with the same font-family name, and have the call to the exact file location change to the specific font file   (often, its the same font name with a b added to the end of it’s name for bold and i for italic) then set the font-weight to:bold or :italic. �

      

     This will give you control in your css to call 1 font family, but to designate the font weight being bold, italic, or normal.  If you are desiring numeric weights, you’ll have to specify that in the @font-face rather than using the words “normal” “bold” or “italic”

All of that after quite a lot of hunting.  There are some great tools out there to assist in creating the different file types.  I’ll let you do some google or bing searching to discover them if you really want – just do a search for “embed font creator” or “embedded font generator” and you’ll find several options to choose from.

Currently, I’m faced with a perplexing issue.  As much as I can get all of these things to work across browser on a static piece, I’m running into troubles getting this to work when using a css tree system while deploying to Azure.  It could be the font, as it is a commercial font, or it could be azure, but I’ve gone through much trial and error  to get cross-platform viewability to work.  I’d assume that its not a font issue:  I was able to use the same font files, create a static file, and get those to work and view perfectly on a mac, but once deploying to azure…. no dice.  They instead revert to a font that’s stuck in perpetual BOLD mode.

I’ll continue hunting for a solution to this issue.  If I find that solution, I will update this blog post with the details.