ShoutMeLoud – Shouters Who Inspire

Superlinks
≡ Menu
≡ Menu

Solutions to Make Your Fonts/Layouts Browser Compatible

CW
Solutions to Make Your Fonts/Layouts Browser Compatible

It is quite obvious that webmasters & web designers often use CSS to style their fonts – be it the post titles or the ones on the header. As far as I know, majority of the browsers including IE support CSS3 @font-face but, what happens if some unknown browser does not do the same???  Simple! You’ll end up in a complete mess of your layout. So, in this article, I’ll explain about the common issues that arise on using custom fonts, not picking up the right fallback fonts and obviously, a solution to solve the above two problems as well.

To illustrate the layout issues, let’s consider two fonts namely, Courier (web safe font) and Mistral (custom font) at 24pt with normal case.

layout issues

From the screen shot above, it is clear that the standard font (Courier) occupies twice the width of the custom font (Mistral). Why because, different fonts have different weights, letter spacing, height, width and so on… Thus, it becomes the responsibility of the user to add fallback fonts when they intend to use custom fonts on their design. Take a look at the picture below to better understand about fall back fonts.

fallback fonts

I hope you got a better idea about fallback fonts. Well, it isn’t enough if you just include a web safe font as your fallback font. You need to select a proper one to ensure a safe layout. For example, if you choose Clarendon as your custom font, the best match on web safe font is Georgia.best match

SOLUTION 1: Use web safe fonts as fallback – select the one that best fits your custom font.

What if you already run a website on a custom font and you don’t want to upset your readers by changing the same. Well, I’ve a solution for the same! There’s a JavaScript called as Modernizr which will solve your problem. The script detects the CSS3 features supported by the browser and suitably adds a class on the <html> tag which depends on what the browser supports and what it does not.

To get this stuff working on your template, just download the script from their website – Modernizr. Make sure you tick the first check box in the option that says “@font-face” if you wish to solve only the font-face layout issue. Download the same and add the script  just before </head> in your template – be it blogger or WP. It should look similar to the one shown below.

<script src="http://www.abc.com/modernizr.js"></script>
</head>

I’ll illustrate the usage of the above script with the h1 element on your template/theme. Let’s assume that your initial <h1> tag has the following CSS defined.

h1 {
 font-family: font-family:"Nimbus Roman No9 L",Georgia,serif;
 font-weight: bold;
 font-size: 24px;
 letter-spacing: 1px;
 text-transform: none;
}

When you make use of the Modernizr script, all you need to do is, simply add/define another CSS  for your dynamically generated no-fontface class as shown below. The same shall be repeated for the other elements on your template/theme.

.no-fontface h1 {
 font-family: font-family:"Georgia",Times New Roman,serif;
 font-weight: bold;
 font-size: 24px;
 letter-spacing: 1px;
 text-transform: none;
}

SOLUTION 2: Use Modernizr – Don’t forget to define the CSS for your dynamically generated classes using the same.

I’ve just shared my knowledge of making fonts/layouts browser compatible. I’m sure there are many web design geeks out there who can achieve the same in a different manner. So, I’m open to suggestions. Please share them via comments.

  • Author Bio

  • Latest Post

Article by Mukund

Mukund has written 29 articles.

If you like This post, you can follow ShoutMeLoud on Twitter. Subscribe to ShoutMeLoud feed via RSS or EMAIL to receive instant updates.


{ 0 comments… add one }

Leave a Comment