Using Google Font in Website

Asyraf Wahi Anuar - February 05, 2022

Estimated reading time: 1 minute, 29 seconds

Google Fonts is a free Google service that provides access to thousands of fonts. All of the fonts are available under an open-source license. This is very useful for developers which enables them to apply different types of font faces directly from the Google Font API. Google Font also allow users to download the font and use it offline. This tutorial will provide the steps to apply Google Font to your website.

Browsing and Select Fonts
Navigate to Google Font. You can browse or search the specific font using the searching toolbar. Click the selected font and you are required to choose the font style (eg thin, regular, medium, bold). Once you made the decision, click ‘+ select this style’. Then it will be loaded into the selected font family panel. It is possible to add more than one font type and style.

Adding Google Font To Web
Include the Google Font link into the <head> section and the CSS style. You also can apply the font CSS in external CSS.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Code The Pixel</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    <style>
    body{
        font-family: 'Roboto', sans-serif;
    }
    </style>
</head>
<body>
  <h1>Code The Pixel. Google Font</h1>
</body>
</html>

That's all. Now you can use the Google Font on your web.

Cite this article (APA 6th Edition)