Google font issue IE8

As previously discussed in a recent blog, web fonts can enhance your websites visual appeal, but be warned!

Litchfield Morris are putting the final touches on a completely new website for Bruton Knowles. The website is a complete redesign and build from their current online presence. The site was designed to use a webfont available from Google's webfont directory entitled Molengo (click here to view).

Problem loading fonts in Internet Explorer
Following the instructions provided on Googles own pages, the font was added to the stylesheet using the advanced import method:

@import url(http://fonts.googleapis.com/css?family=Molengo);

Whenever a page is requested and the CSS loads to display the page the Molengo font characteristics would be embedded from the Google servers. During the process of the website build the font displayed correctly in Firefox, Safari, Chrome and Internet Explorer on both Mac and PC platforms.

However when the client viewed the page on their own Windows laptop the font would not display correctly and the default Arial font would display instead. This created display issues as the font metrics of each particular font varied slightly. This was a cause for concern as the error could not be replicated on any of the test platforms Litchfield Morris have available. We are able to test in Firefox, Safari, Chrome and Internet Explorer versions 6, 7 and 8. Posts to the Google webfonts forum went unanswered as the deadline for launch grew closer. Extensive searching of the web discovered other people were having the same issue, not necessarily just with the Molengo font but a select few. It was only after extensive searching that a solution was discovered.

This issue lies with the creator of the font, because the font name table was incorrectly coded by the author. Although most browser can interpret this font name correctly, in our experience it appears that this issue affects only a limited variation of Windows and Internet Explorer configurations.

The Solution
Litchfield Morris were able to solve the issue by using a different font provider than Google and generate their own webfonts that are served directly from our own server. We used the Font Squirrel @fontface service to generate web versions of the files. A @font-face font kit is supplied with different version of the font selected depending on the browser being used to view the page:

TrueType Fonts for Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+
EOT fonts for Internet Explorer 4+
WOFF fonts for Firefox 3.6+, Internet Explorer 9+, Chrome 5+
SVG fonts for iPad and iPhone
Cufón fonts in case you want them
Demo.html and stylesheet.css so you can get going fast

By using the correct font name in our CSS we were successfully able to display the Molengo font on our clients PC.

Conclusion
Our experience has taught that while webfonts dramatically increase the visual appeal of a website, it is important to ensure that the font you have selected is viewable on as many systems and browsers as possible.

Would you like to improve the visual appearance of your website? Contact us today to discuss your requirements.

marketing

How do you get seen and heard in a competitive, crowded market? You make a noise...elegantly.

Before we do anything else for our clients, we make sure that we understand your current proposition, your vision and your target market place.

With that end in mind, Litchfield Morris then defines the marketing strategy to strengthen your impact, and make your message visible and your voice heard.

design and brand

Every business message counts. Its voice needs to be heard above the noise, endorsing your brand. Each communication you send influences your customer response and staff enthusiasm.

Litchfield Morris has an enviable track record in effectively promoting our professional service clients. In this market, your image needs to be contemporary, whilst retaining its gravitas. Our expertise matches the quality of your business with the tone of voice of your communications.

digital and website

Your professional service needs to be found online with ease. Litchfield Morris design and build websites and new media solutions that are easy for our clients to use and for your clients to find.

We make your digital impact efficient, effective and broad based. What’s more, we take away the pain of keeping up with technology with a digital marketing platform that keeps you in touch with your network.

project delivery

Our solutions are quality assured, within budget and on time. We specialise in all aspects of marketing and design related project management for professionals, and believe it is an essential and unique part of our service. We take the responsibility, so you are set free.

For Litchfield Morris, finishing a project is as important as starting one. Our business director takes a personal pride in project management, applying his professional quality assurance skills to ensure fulfilment, delivery and client satisfaction.

marketing and graphicdesign agency