Using Google Fonts in your web projects is an excellent way to enhance the visual appeal of your website. This guide will show you how to integrate Google Fonts into your HTML, CSS, and JavaScript.

Step 1: Choosing a Google Font

First, visit the Google Fonts website. Browse through the available fonts and select the one you want to use. For this example, let’s choose the font “Roboto.”

Step 2: Getting the Embed Code

After selecting your desired font, click on the font to open its page. Google Fonts provides an “Embed” tab where you can get the necessary code to include in your project.

Go to the “Embed” tab.
Copy the <link> code provided. It will look something like this:

<link href="https://fonts.googleapis.com/css2family=Roboto:wght@400;700&display=swap" rel="stylesheet">

Step 3: Adding the Google Font to Your HTML

Next, you need to add the copied <link> code to the <head> section of your HTML file. This ensures that the font is loaded when your page is viewed.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google Fonts Example</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph using the Roboto font.</p>
</body>
</html>

Step 4: Applying the Google Font in CSS

To use the font in your CSS, you need to specify it in the font-family property. Here’s how you can do it:

body {
    font-family: 'Roboto', sans-serif;
}

h1 {
    font-weight: 700; /* Bold */
}

p {
    font-weight: 400; /* Regular */
}

Step 5: Using Google Fonts with JavaScript

In some cases, you might want to dynamically change the font using JavaScript. You can achieve this by modifying the CSS properties via JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google Fonts Example</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Roboto', sans-serif;
        }
    </style>
</head>
<body>
    <h1 id="title">Hello, World!</h1>
    <button onclick="changeFont()">Change Font</button>

    <script>
        function changeFont() {
            document.getElementById('title').style.fontFamily = "'Roboto', sans-serif";
            document.getElementById('title').style.fontWeight = '700';
        }
    </script>
</body>
</html>

Conclusion

Congratulations! You’ve successfully learned how to incorporate Google Fonts into your HTML, CSS, and JavaScript. Using web fonts from Google Fonts is a simple yet effective way to enhance the typography of your website. Remember to choose fonts that complement your design and ensure readability for your users. Happy coding!