David Siegfried

Typekit problems and solutions

If anyone is keeping up with my progress on this site in the trial/soft-launch period of the new davidsiegfried.com here is what I have learned this evening.

typekit.com

I have been having some problems with typekit and the problems were two-fold.

First, in case you are unaware of typekit, it is a web application that specializes in helping web designers bring great fonts to the modern web. Essentially I can choose from their screen approved, impressively sized gallery of great fonts and through a little javascript and more importantly some great CSS3 techniques you see renderings of text you have never seen in your browser unless it was a painful and tedious image (or flash). The main reason for using typekit is I don’t have to worry about the legality of which fonts are approved for this process and which aren’t. Typekit has handled that for me. Thank goodness.

The technology, namely CSS3, as I understand it does something along the lines of caching a font file on the users computer and then that font file does the work just as a normal font file installed on your computer. This means any browser that supports the CSS3 @font-face rule gets essentially native fonts the likes of which were not possible before. So for you Safari, Chrome and Firefox users, you are enjoying ‘Brevia medium-italic’ right now and I hope it pleases you as it does for me.

The problems occurred when I set up typekit with ‘Brevia light-italic’ aimed at my site without really understanding how it worked. In Firefox, where I do my development the fonts rendered perfectly and at this point I am largely unsure why, but, Firefox will occasionally do a little intuition work and make things that are broken look a-okay. Well, Chrome and Safari were having none of it and they refused to give me any ‘light’ or ‘italic’ and were presenting boring old ‘Brevia normal’. Lame indeed.

With a little help from some speedy tech support I was directed to this page where I learned that I can’t just expect typekit to do all my work for me, I had to specify the lightness and italics in my stylesheet just like a normal font. So I added some really basic CSS properties like this:

p{

  font-weight: 200; /* for lightness */

  font-style: italic; /* for italics */

}

All of a sudden things started working across all browsers and WHAMMY! (like the sports guy in anchorman) everything came together for me.

A typekit problem that wasn’t my fault

So, feeling fairly happy with the new results I went to try to solve my other typekit problem. I was using a script font for my headers called ‘Bistro Script Web’. Honestly it was the best script font I had ever seen. However, it seemed to render about 15 pixels lower than where I wanted it if I was viewing it on a mac. I wasn’t sure what the problem was so, I sent a support email to typekit support and got this response:

“Bistro Script Web, the font, looks like it has some problems in that it is spaced inconsistently across browsers. We’re going to address this eventually, starting with a blog post in the near future that will explain why fonts are sometimes spaced so. Meanwhile, I’m sorry for the inconvenience.”

So, I went ahead an replaced that font with a similar font called ”Adage Script’. It has some of the same scriptyness in some ways but it is a little less forceful in its stroke and makes me a little less happy. Still, considering there isn’t another good option I am pretty happy with the results. Also, a big thank you to A.J. Laventure for the assist with how things looked on the mac.

With typekit under control I did some other minor updating but, for now the site remains in many ways unfinished. On my short list for the week is:

• Correct links for the right sidebar on the about page.
• Addition of social media icons on the contact page.
• Small social media icons for the footer and some text like: friend, follow or stalk?
• I’m not totally sure I am done with the twitter flickr sections on the about page and they may separate themselves and appear on other pages in addition to the about page.
• I have to dig up some blog posts I wrote a while back about facebook taking over the web (a little dated but fun) and a css project in easy cross-browser builds (even for ie6).
• I still need to resolve the “share with friends” links on the blog page.
• Improvements to the ie8 stylesheet.

Plenty of work to do, but I am feeling better about people coming by and taking a look at my site now that some of the main problems have been taken care of.

• 2
  comments »
• Share
  with friends »
• Back
  to the blog »