Languages
[Edit]
EN

CSS - Google Fonts

0 points
Created by:
MindOfMadness3
306

In this article, we would like to show you how to use Google Fonts working with CSS.

Quick solution:

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
  <head>
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono" rel="stylesheet"><style>
    body {
      font-family: 'Roboto Mono', monospace;
    }
    </style>
  </head>
  <body>
    Example text...
  </body>
</html>

 

Detailed explanation

1. Go to the Google Fonts page and choose your font.

CSS - choose Google Font
CSS - choose Google Font

2. Select the style.

CSS - select Google Font style
CSS - select Google Font style

3. Copy and paste link elements to the <head> of your HTML, and assign the CSS rules into the element where you want to place the font.

CSS - copy Google Font code to your HTML
CSS - copy Google Font code to your HTML

Practical example

In this section, we present the runnable code in which we import the "Roboto Mono" Google Font. 

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <!-- Google Font link elements below -->
  <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+Mono:ital,wght@1,400;1,500&display=swap" rel="stylesheet">
  <style>
  body {
    font-family: 'Roboto Mono', monospace;  /* Google Font CSS rules here */
  }
  </style>
</head>
<body>
  Example text...
</body>
</html>
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join