WebDesign&Such

Well that was a long title! Here’s the deal. I finished up a website for a client yesterday and was doing a last minute check in Internet Explorer to make sure there were no problems. Well that would be too easy, wouldn’t it?! Unless you’ve been under a rock the last few months you know about the Google Font API. They host fonts and give you the code to embed them onto your website. A great solution, and free, unlike Type Kit.

Well since it’s a Google product I figured it was obviously cross browser safe. So I was surprised (and not pleasantly) when I opened my clients site in Internet Explorer and saw that instead of the font Josefin Sans Std Light showing up, (I am using it for headings and navigation items on the website), the browser was showing Arial. WTF? Popped open Safari, no problem. Looked in Chrome, and again, Arial was showing! So I went to the source, the page right on the Google Font API website where you can preview the font. And after looking at that page in the browsers, I realized something important: The fonts in the Google Font API are NOT cross-browser compliant! Keep reading to see what I’m talking about (screenshots), and the solution I came up with to solve this problem. Continue reading

So you know what a favicon is..right? At least pretend you know what it is.. it’s the little picture that shows up in your browser bar right next to the domain name of the website you’re on. In this example you can see how the WebDesign&Such favicon appears in the browser bar and in the Firefox tab. You can also see the Smashing Magazine favicon (free shout for those guys).

If you need to know how to add a regular favicon to your post or Wordpress blog, I covered this in a previous post. Check it out here, there is also a link to the Photoshop plugin that you need to create the ico file.

The topic I’m going to cover today is slightly different however, I’m going to show you how to make an animated favicon.. niiiice! Here’s an example of an animated favicon, this is the favicon I used on a previous version of BeantownDesign.com

Continue reading