Getting started overview

Google Fonts provides a library of open-source fonts for web developers to embed into their websites and applications. The primary methods for integrating Google Fonts include direct CSS embedding via <link> tags or @import rules, and using the Google Fonts Developer API for more advanced programmatic control. For basic CSS embedding, no API key or Google account is required. However, if you plan to use the Google Fonts Developer API, a Google Cloud Project and an API key are necessary.

The entire Google Fonts library is available for free, eliminating pricing considerations for usage. Integration focuses on selecting fonts and applying them correctly within your web project's stylesheets. This guide outlines the steps to get started, from obtaining necessary credentials for the API to making your first font request.

Quick Reference for Getting Started with Google Fonts:

Step What to Do Where
1. Select Fonts Browse and choose desired fonts. Google Fonts website
2. Embed (CSS) Copy the <link> tag or @import rule. Google Fonts Quick Start
3. Apply CSS Use font-family in your stylesheet. Your project's CSS file
4. (Optional) API Key Setup Create a Google Cloud Project and generate an API key. Google Cloud Console
5. (Optional) API Request Construct a request to the Google Fonts Developer API. Google Fonts API reference

Create an account and get keys

For basic usage of Google Fonts through CSS embedding (<link> tags or @import rules), you do not need to create an account or obtain any API keys. The fonts are hosted directly by Google and can be linked into any web project without authentication. This is the most common and simplest method for integration.

However, if your project requires dynamic font loading, detailed font metadata queries, or specific programmatic interactions with the font library beyond simple embedding, you will need to utilize the Google Fonts Developer API. To access this API, you must have a Google Account and create an API key through the Google Cloud Console.

Steps to obtain a Google Cloud API key for the Google Fonts Developer API:

  1. Sign in to Google Cloud Console: Navigate to the Google Cloud Console and sign in with your Google Account. If you do not have a Google Account, you will need to create one.
  2. Create a new project: From the project selector dropdown (usually at the top of the page), click "New Project". Provide a project name and click "Create".
  3. Enable the Google Fonts Developer API: Once your project is created and selected, go to the "APIs & Services > Library" section. Search for "Google Fonts Developer API" and click on it. Then, click the "Enable" button.
  4. Create credentials: After enabling the API, go to "APIs & Services > Credentials" from the left navigation menu. Click "Create Credentials" and select "API key".
  5. Restrict your API key (Recommended): For security, restrict your API key to prevent unauthorized use. Under "API key restrictions", select "HTTP referrers (web sites)" and add your domain(s). Additionally, under "API restrictions", select "Restrict key" and choose "Google Fonts Developer API" from the dropdown list. Save your changes.

Your API key will be displayed. Keep this key secure, as it grants access to the Google Fonts Developer API associated with your project.

Your first request

The simplest "first request" for Google Fonts involves embedding fonts using CSS. This method does not require an API key.

Method 1: CSS <link> tag (Recommended for web projects)

  1. Choose your fonts: Go to the Google Fonts website. Browse the font library and select the fonts you wish to use. For each font, click on it, then select the styles (e.g., Regular 400, Bold 700) you need by clicking "Select this style".
  2. Copy the embed code: Once you've selected your fonts and styles, a "Selected families" panel will appear on the right side of the page. This panel provides the <link> tag code. Copy the entire <link> tag provided, which will look similar to this example for Lato and Open Sans:
    <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=Lato:wght@400;700&family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
  3. Paste into your HTML: Paste this <link> tag into the <head> section of your HTML file, usually before any other stylesheets. This ensures the fonts are loaded early.
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Google Fonts Page</title>
    <!-- Google Fonts Embed Code -->
    <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=Lato:wght@400;700&family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
    <!-- Your custom CSS -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1 style="font-family: 'Lato', sans-serif;">Hello with Lato!</h1>
    <p style="font-family: 'Open Sans', sans-serif;">This is a paragraph with Open Sans.</p>
</body>
</html>
  4. Apply the font in your CSS: In your stylesheet (style.css in the example above, or inline styles), use the font-family CSS property to apply the selected fonts to your elements. The exact font-family name is provided in the "Selected families" panel or can be found on the font's individual page.
    /* style.css */
body {
    font-family: 'Open Sans', sans-serif;
}
h1 {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
}

Method 2: CSS @import rule

Alternatively, you can use the @import rule directly within your CSS file. This method is generally less performant than the <link> tag and is recommended for simplicity when adding fonts to an existing stylesheet without modifying HTML.

  1. Choose your fonts and copy @import: Follow step 1 from Method 1. In the "Selected families" panel, switch to the @import tab and copy the code.
    @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Open+Sans:wght@400;700&display=swap');
  2. Paste into your CSS: Paste this @import rule at the very top of your main CSS file, before any other CSS rules.
  3. Apply the font in your CSS: Same as step 4 in Method 1.

Method 3: Google Fonts Developer API (Requires API Key)

Using the Developer API allows for programmatic access to font metadata and custom font file generation. This is useful for applications that need to list fonts dynamically or integrate with other services. A common use case is to query the available fonts or their properties.

For example, to list all available fonts, you would make a GET request to the Google Fonts Developer API list method:

curl \
  'https://www.googleapis.com/webfonts/v1/webfonts?key=[YOUR_API_KEY]'

Replace [YOUR_API_KEY] with the API key you generated in the Google Cloud Console. The response will be a JSON object containing an array of items, where each item represents a font family with details like its variants, subsets, and category. For more specific API usage, consult the Google Fonts Developer API documentation.

Common next steps

  • Optimize font loading: Explore techniques like font-display (e.g., swap) or preloading fonts to improve performance and user experience, as documented by MDN Web Docs on font-display.
  • Variable fonts: Investigate Google Fonts' support for variable fonts, which allow for a single font file to contain many stylistic variations, reducing file size and improving flexibility.
  • Local font hosting: For maximum control over performance and to mitigate external dependencies, consider downloading selected fonts and hosting them locally on your server. This involves using @font-face rules in your CSS to point to your self-hosted font files.
  • Combine with CSS frameworks: Integrate Google Fonts seamlessly into popular CSS frameworks like Bootstrap or Tailwind CSS by defining your font stacks in their configuration files.
  • Use with JavaScript frameworks: For single-page applications (SPAs) built with React, Angular, or Vue.js, you can embed fonts in your main HTML file or dynamically load them as part of your component lifecycle.

Troubleshooting the first call

If your Google Fonts are not displaying correctly after your first integration attempt, consider these common issues:

  • Incorrect <link> or @import path: Double-check that the URL in your <link> tag or @import rule is exactly as provided by the Google Fonts website. Any typos will prevent the stylesheet from loading.
  • Missing preconnect attributes: The <link rel="preconnect"> tags provided by Google Fonts help establish early connections to the font server. Ensure these are present in your HTML <head> for optimal performance and reliable loading.
  • Incorrect font-family name in CSS: The font-family property in your CSS must exactly match the font name specified by Google Fonts (e.g., 'Lato', sans-serif;). Pay attention to capitalization and spaces.
  • CSS specificity issues: Ensure your CSS rules applying the font-family have sufficient specificity to override any default browser or framework styles. Use developer tools to inspect the computed styles of your elements.
  • Network blocking or CORS issues: Although rare with Google Fonts due to their extensive CDN, ensure no firewall or browser extension is blocking requests to fonts.googleapis.com or fonts.gstatic.com. Check your browser's developer console for network errors.
  • API Key restrictions (for API users): If using the Google Fonts Developer API, verify that your API key is correctly restricted (HTTP referrers, API restrictions) and that the domain making the request is allowed. An improperly configured API key will result in 403 Forbidden errors.
  • CSS loading order: Ensure your Google Fonts <link> tags or @import rules are placed before any custom CSS that attempts to use those fonts. This ensures the font definitions are available when the browser parses your styles.