Popular External Fonts (Google Fonts and Others)

In addition to web-safe fonts, web developers often use external font services to add more stylistic options to their designs. Some of the most popular sources of external fonts include:

Google Fonts Google Fonts is a free web font service provided by Google. It offers a vast selection of fonts, ranging from serif and sans-serif to decorative fonts.
Adobe Fonts (formerly Typekit) Adobe Fonts is a paid service included with Adobe Creative Cloud, offering a wide variety of professional fonts. It's often used for more custom or specific typography needs.
Fonts.com Fonts.com is a commercial font service offering thousands of high-quality fonts from renowned font foundries.
Font Squirrel Font Squirrel offers a collection of free, high-quality fonts for commercial use. They also provide web font kits that you can easily integrate into your site.
DaFont DaFont is a repository of free fonts, mainly focused on decorative or creative fonts. While it's great for specific projects, licensing should be checked before using them for commercial work.

How to Use External Fonts (Example with Google Fonts)

Step 1: Choose a Font Go to Google Fonts and pick the font you want. For example, let's choose Roboto.

Step 2: Embed the Font in Your HTML Google Fonts provides a link that you can embed in your HTML file to load the font. For Roboto, you would copy the link like this:

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

Step 3: Apply the Font in Your CSS Once the font is loaded via the <link> tag, you can use it in your CSS just like any other font family. Here’s an example:

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

h1 {
  font-family: 'Roboto', sans-serif;
  font-weight: 700; /* Bold version of Roboto */
}

p {
  font-family: 'Roboto', sans-serif;
  font-weight: 400; /* Regular version of Roboto */
}

Full Example:

<!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>
  <!-- Embed the Google Font -->
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Roboto', sans-serif;
    }

    h1 {
      font-family: 'Roboto', sans-serif;
      font-weight: 700;
      color: #333;
    }

    p {
      font-family: 'Roboto', sans-serif;
      font-weight: 400;
      color: #555;
    }
  </style>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This is an example of using Google Fonts on a webpage. We are using the Roboto font in this example.</p>
</body>
</html>

PreviousHow to Use Web Safe Fonts in CSS NextExample Using Adobe Fonts

Last updated 1 year ago

hashtagHow to Use External Fonts (Example with Google Fonts)

How to Use External Fonts (Example with Google Fonts)