CSSWebdesignWordpress

Beautify your site in 3 simple steps using Google fonts

Using custom fonts in your design, you can make your design look more professional, more creative and more attractive. It all depends on your creativity and imagination. And now google makes it easier for everyone.

Here are the steps required :

Return to top

STEP 1. Choose your font

Visit google font directory and choose best font that fits to your design.

You can filter and sort fonts as your like. Here are some tips on how to chose best font for your design:

  • Sans-serif fonts : Headings, Site titles and small text like footer.
  • Serif fonts : Content, print styles, block quotes.
  • Display fonts : Eye-catching titles & promotions.
  • Handwriting fonts: Block quotes, promotions and testimonials
Return to top

STEP 2. Embed font file in header

When you select a font it will take you to font preview page.

Lobster font preview

Font preview page

Click on Use this font button to get the embed code. It will give you something similar to this:

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

If you are going to embed multiple fonts in your theme, you can combine them using following format:

<link href='http://fonts.googleapis.com/css?family=Lobster|Yanone+Kaffeesatz:bold|Allan:italic' rel='stylesheet' type='text/css'>

Just copy and paste this code in your site header file – header.php for wordpress – before your stylesheet link tag. See the example below:

<link href='http://fonts.googleapis.com/css?family=Droid+Serif:regular,italic|Yanone+Kaffeesatz:700|Allan:bold' rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href="http://shailan.com/my-theme-style.css" />
Return to top

STEP 3. Use font in your theme stylesheet

Now that we embedded the font, we can use this font in our stylesheet, using font name on “Use this font” tab.

For example to use Puritan font in your paragraph text, you need to use following code.

p { font-family: 'Droid Sans', arial, serif; }

You can preview and test fonts in font previewer before using in your designs.

Font previewer gives you capability to change font size, variants, styles and various other CSS attributes interactively.

If you like this post, here is a list of my other web design tutorials:

Reply

«
»