How to use Google fonts in CSS

If you don’t like the look of standard fonts for your website, you could always choose to use Google Fonts. The big benefit of using Google Fonts is the fact many visitors have already saved the Google Fonts on their computer because Google Fonts are commonly used by many websites. Using Google Fonts in CSS is fairly simple. As a first step you will need to look for the required Google Font. The font will be accompanied by an HTML code which needs to be pasted in the head section of the HTML. Next the Google Font can be called up in the CSS by adding the font name behind the font-family. Please find below a practical example of how to use Google Fonts in CSS:

<html>
<head>

<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<style>
p{
font-family: 'Roboto', sans-serif;
font-size: 14px;
}
</style>

</head>
<body>

<p>This paragraph will use the Google Font called 'Roboto'</p>

</body>
</html>


Was this useful?