One word: fonts.
On second thought, let's say some more words about fonts as it is impossible to overestimate the role of fonts in website design. They create the mood, set the style, make visitors pay attention to the desired elements of web pages, and facilitate the perception of content.
Google makes it easy to connect any style of letters and characters from Google Fonts collection. All you need to do to start using this feature is specify a few settings, then copy a special link to the font and add it to your web document.
Let's take a closer look at each step of connecting a font from Google.
Font selection
First, select the font you're interested in. If you want to find a font based on some specific parameters, the page has filters to search for fonts by name, thickness, alphabet, and much more.
After finding that special font you enjoy, click on the font and "Get font" button on the font's page:
Don't forget you can select multiple fonts this way.
Well that was easy, wasn't it? However, there are a few more steps to take, so let's continue.
Adding a font to an HTML file
There are several ways to insert a font into a page, either directly into HTML or via CSS. We'll concentrate on the first option.
Once you have selected a font, click the icon at the top right of the screen to view the selected font families. After that, you can click the "Get embed code" button and this menu should pop up as soon as you click.
To embed the selected fonts into a web page, copy the code that comes up and paste it into the <head> element of your HTML document:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Google Fonts</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@1,200&display=swap"
rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>Your best day of your life is today.</p>
</body>
</html>The <link> tag defines the relationship between the document and an external document. In this example, we've copied the <link> tag from the site to an external font file.
Now, to change the font of the text in the items, type a CSS style with a line of code from the subtitle "Specify in CSS". It will look like this:
p {
font-family: 'Raleway', sans-serif;
}The font-family property takes the name of the fonts that will be used to format the text as a value. Let's check the result in a browser:
Great! We've managed to connect and use the font.
Adding a font to a CSS file
As mentioned earlier, Google Fonts lets you embed the font directly into the CSS file. CSS code is generated in the "@import" tab. This code is usually added to the very beginning of the file. Connecting and using the same font will look like this:
@import url(https://fonts.googleapis.com/css2?family=Raleway:ital,wght@1,200&display=swap);
p {
font-family: 'Raleway', sans-serif;
}@import allows you to import the contents of a CSS file into the current style sheet.
Google Fonts is free and easy to use, and it automatically generates the necessary code, so all we need to do is simply copy it.