CSS Google Fonts
Google Fonts lets you use hosted web fonts by linking a stylesheet and naming the font in font-family.
Web fonts let you use typefaces that are not installed on the visitor's device. A hosted service like Google Fonts delivers the font files for you, so all you do is link the stylesheet and reference the font by name.
Two steps to use one
- Add a link to the font's stylesheet in the head of your HTML.
- Reference the font name in your CSS font-family property.
Step 1: link in the HTML head
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">
</body>
</html>Step 2: use it in CSS
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Roboto", sans-serif;
}
</style>
</head>
<body>
<h1>Welcome</h1>
<p>This text renders in the Roboto web font.</p>
</body>
</html>Note: Always keep a generic fallback like sans-serif in the stack so text still renders if the web font fails to load.
Loading many font families and weights adds download weight to your page, so include only the styles you actually use. For the basics of the property itself, see CSS Font Family.
