Top 3 Products & Services

Dated: Mar. 17, 2012

Related Categories

If you're like myself, you would easily come to a realization that web compatible fonts are down-right dull for content and even more so for content headlines. People have come up with many ingenious ways to counter this problem. However, each of these methods has its downside. Let's observe:

1. Graphic Headlines: These look wonderful. Almost perfect if you ask me. However, given the amount of time you put in, especially for a content rich website, it's very counterproductive. Also give the fact that graphic headlines are counterproductive in the realm of SEO, and also makes the web pages load slower.
2. Flash Headlines: These look even more pretty than the regular graphics headline. But, it's got all the downside of graphic headlines, plus it won't load for iPhone/iPod visitors. Also, Flash is the least compatible graphic medium.
3. Scripted Headlines: These don't look as good as the graphics headline, but at least you can use various fonts for you headlines. This would work even if the visitor doesn't have this font installed in their system. But the drawback is that you would have to be a handy with scripting. Now, keep in mind that this method can be setup with various languages: JavaScript, Java, Python, PHP, and many others. We use this method on TW site as well to show the page title at that top of each page.

However, there is an easier method that it can make your headlines look even better than other scripted headlines. Behold !  There are a number of ways you can add these fonts to your website, but we'll show you the method that we chose for implementation.

Since, almost all the content on TW is encapsulated with CSS, all that's needed is for us to tweak the CSS file a bit. Let's start:

1. Make sure you've already mentioned your css file in the head tag like this:
   <link rel="stylesheet" type="text/css" href="style.css"/>
    
2. Now, let's head on over to the css file and add the following:
   @import url(http://fonts.googleapis.com/css?family=Google+Font+Name);
   this is best to be put at the top of the css file so avoid incompatibilities. To know what font is best, you'll need to visit the website and choose the font you like.
    
3. We're going to assume that you'll want to show H1, H2, and H3 tags to show these fonts. Last step is to add the following in the css:
   H1,H2,H3 {color: #444;font-family: 'Google+Font+Name';}

That's it. Save your work and preview results.

Conclusion:

Remember the most important aspect of Google Web Fonts; they not only look good, but they are just fonts to the search engines that spider your website. So it's tons easier for Google, MSN, Bing, and other search engines to know what's written in the headlines now, instead of using graphic images.

Now that you've gotten free know-how on this topic, try to grow your skills even faster with online video training. Then finally, put these skills to the test and make a name for yourself by offering these skills to others by becoming a freelancer. There are literally 2000+ new projects that are posted every single freakin' day, no lie!

Previous Article

Next Article