Quick and Easy Web Fonts

27 May

If you’re a web designer you know how troubling it is to embed fonts into your site without creating images or using a service like siFR or cufon or the paid service, Typekit. There are only a few select universal fonts that everyone has on their computer such as – Arial, Verdana, Trebuchet, Georgia, Times New Roman, Tahoma, and several others. While some of these may work great for copy text, they aren’t the best for creative heading texts.

Last week Google announced the inception of Google Font Directory. At first I was skeptical because there are so many solutions out there. So, I tried it out today. With one line of code and one CSS attribute, I had a beautiful, selectable font embedded in my website. There are quite a few fonts to choose from, and I imagine this will be a great platform for font designers to get noticed in the community. Expect a large library of fonts in the future. See the library here.

The silky smooth process goes like this:

Step 1: Import the Google Font stylesheet.

(This code should be placed within your <head> tag in your HTML file as the first LINK tag)

<link rel="stylesheet" type="text/css"
href="http://fonts.googleapis.com/css?family=FONT+NAME">

Step 2: Declare a CSS selector and identify the font-family attribute for that element.

(This code should be placed within your <head> tag in your HTML file)

<style type="text/css">
      h1 {
        font-family: 'FONT NAME GOES HERE', serif;
        font-size: 48px;
      }
 </style>

Step 3: Add the element to your document.

(This should be placed within your <body> tag)

<h1>This is my heading title</h1>

Here are some of the fonts that are offered right now.

Go to Google Font Directory

Related Posts

No comments yet

Leave a Reply

Share Be a pal and share this would ya?
Quick and Easy Web Fonts