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 :

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

STEP 2 Embed font file in header

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

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

[html title=”Font embed code”]<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:

[html title=”Embedding multiple fonts”]<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:

[html title=”Sample code”]<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="https://wpassist.me/my-theme-style.css" />

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.