Web Designers have long awaited the ability to use better fonts on websites they design. Having to tell the customer that the choices are extremely limited has always been a real sore spot for me. Thanks to scripting, and libraries that has all changed. As exciting as being able to control fonts in a much better way is the upcoming CSS3 that promises a virtual candy store for the web developer.
Want to add some nice heading fonts to your website? Here is the way to have nice fonts like the Lobster font used here at Logistics Studio.
What you will need:
- Basic html and css knowledge
- Access to your site files probably with an ftp client
- A text or html editor
- Google Font Directory
That is all you really need to get your website fonts looking a whole lot better.
What you need to do:
- Access fonts at the Google Font Directory and select a font, we will use Lobster for this tutorial. Acquire the embed code
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
- Use the embed code in the head of your html page, header.php, or equivalent
- Acquire the css from the Google Font Directory and apply it to the elements in your css that you wish to have display Lobster
h1 { font-family: 'Lobster', arial, serif;}
The embed code only needs to be added one time per document, however it is possible to style as many of your text elements as you like using the new font through the CSS.
Adding shadows to the text in a document really is cool, however there are certain browsers that do not support this feature, but for those that do it is a nice treat. The results will look like this.
If you want to walk on the wild side by adding shadows to your website fonts then add this little text-shadow code to your CSS.
-
h1 { font-family: 'Lobster', arial, serif;text-shadow: 2px 2px 2px #000;}
Typekit offers a similar service for fonts. The resources at Typekit are quite extensive, and work similar to the Google Fonts. Typekit offers a free trial offer with two fonts, and three other paid programs.
Wtih the Google Font Directory, Typekit, and who knows what other provider there is no reason to have boring fonts in a website anymore. Display sizes can vary like with all fonts with different weights so be sure to double check the size with the alternate selected. Have fun with font