How to Use Google Fonts in a HTML Website

Posted on December 16, 2013 by Dan Doicaru in HTML/CSS Category with Easy Difficulty

In this tutorial you will learn how to use Google Fonts in your HTML Website, the easy way. If you want to use Google Fonts is fancy and cool, but your website may suffer from that. Read more to discover why. You can find and use Google Fonts from here.

Open Source Fonts

All fonts provided by Google are Open Source. This means that you are free to share them with your friends. You can even customize them for your own use, or collaborate with the original designer to improve them. And you can use them in every way you want, privately or commercially - in print, on your computer, or in your websites.

Searching the Right Font

Google offers a large number of free fonts to make the web more beautiful, readable, accessible and open for everyone. To use Google Fonts in your HTML Website you must first choose a font from Google's Fonts Database.

If you enter on Google Fonts, you will see a column with filter, in the left of the page. With these filters you can search your desired font, sorting by thickness, slant or width and even by script language.

In the right column you can preview every font and check the filters results. Each font has some buttons in the right to check all font styles, to quick use that font or pop out a window with all characters available in that font. Also the blue button "Add to Collection" should be used when you want to use more fonts in your website.

google-fonts-page-screenshot

As an example, for titles you will use a font and for subtitles another font. It is highly recommended to not use more than 3 custom fonts in your website and we will explain below why.

Pick a Font and Choose the Right Style

Assuming that you found your desired font, click on the "Quick Use" Button. You will be redirected to the settings page.

Here you must choose font styles that will look good on your page. As the tip on the right is saying, using many font styles can slow down your webpage. Base styles are Light, Normal and Bold. If you are using italic font, make sure to test how the font will look with the style checked and unchecked.

How to Use Google Fonts with Styles

Depending on your language, you can choose the character sets you want. That means if are using different alphabet characters, they will render correctly only if you set the right character set. Some fonts may not support all characters sets and be aware of using multiple sets. This will slow your page load time.

Integrate and Use Google Fonts in HTML

After choosing the right styles, you can integrate font in your HTML page. In the same page with styles there are instructions on how to use Google Fonts in HTML.

The most used and recommended option is the standard solution. That means you can integrate the fonts using the <link> tag inside the <head> part of your site.

<head>
	<link href='http://fonts.googleapis.com/css?family=Alegreya+Sans+SC:300,400' rel='stylesheet' type='text/css'>
</head>

Great, now you must set the font in your main CSS file or using a <style> tag. The best method to use a global font in your website is to apply the font-family property to <body> tag.

<head>
	<link href='http://fonts.googleapis.com/css?family=Alegreya+Sans+SC:300,400' rel='stylesheet' type='text/css'>
	<style type="text/css">
		body {
			font-family: 'Alegreya Sans SC', Arial, sans-serif;
			font-size: 10pt;
		}
	</style>
</head>

And you are done. Your text should now have the custom font. Again, remember not to use Google Fonts more than 2 (one for titles and one for content) and maximum 5 styles for main font.

See Live Demo

Download Files

Rate & Share
1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5.00 out of 5)
Related Articles
Comments
  1. Gravatar Icon juliana jones:

    Hey Dan, i read article how Google font is used. Good job ….
    This article is very informative for designers

Hint: Wrap your code syntax (html, css or others) between <pre> and </pre> tags. All comments are moderated.


+ 7 = 14

Search
Subscribe by E-mail

HTML-TUTS is created and maintained by Dan Doicaru.
This website is a rebrand to Extreme Design Studio (extremestudio.ro), built under WordPress platform.