Text is the main element that conveys information to visitors to our website. Rather than displaying plain text without any styling to visitors, we can format the text to make it more attractive, easier to read, and consistent with the visual theme of the website. In this article, we will learn how to install fonts, format fonts, size, color, and text spacing (letter spacing) using CSS.

Install Fonts from Google Fonts via CDN

Using Google Fonts is a practical way to add attractive fonts to the websites we create. With CDN (Content Delivery Network), we can load fonts directly from Google servers without downloading them. Here are the steps to install fonts from Google Fonts.

Visit the Google Fonts website.
Select the font you like.
Choose the font variants (italic, bold, regular).
Copy the CDN code. Click the Get embed code button, and a CDN code link will appear as shown 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=Poppins:wght@400;600&display=swap" rel="stylesheet"> //poppin fonts

Paste the CDN link in the <head> section of the HTML.

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Install Fonts via CDN - NganggurDev</title>
  <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=Poppins:wght@400;600&display=swap" rel="stylesheet">
</head>

Setting Fonts

After installing the font CDN in the <head> tag, the next step is to apply the font to the HTML text. Here is an example.

<!DOCTYPE>
<html>
  <head>
	 <meta charset="UTF-8">
	 <meta name="viewport" content="width=device-width, initial-scale=1.0">
	 <title>Install Fonts via CDN - NganggurDev</title>
	 <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=Poppins:wght@400;600&display=swap" rel="stylesheet">
	 <style>
		 p {
		  font-family: "Poppins", sans-serif;
		 }
	 </style>
  </head>
  <body>
	 <p>I'am text with poppins font</p>
  </body>
</html

The explanation of the code in the <style> tag is as follows.

font-family is used to specify the font type to be used for the text.
Poppins is the name of the font we will use, which we obtained from Google Fonts.
sans-serif is the generic fallback font. If the browser cannot load the “Poppins” font, the text will use the sans-serif font instead.

If we want all text on the website page to use the Poppins font, we can adjust the CSS code as follows.

body {
 font-family: "Poppins", sans-serif;
}

With that CSS code, all text on the page, whether it's paragraphs, headings, links, or other text, will default to the Poppins font.

Setting Text Size

We can set the text size using the font-size property. For example:

p {
  font-size: 16px;
}

As a result, the text in the paragraph will have a size of 16 pixels. The common units we can use are:

px fixed unit.
em and rem relative units recommended for responsive design.
% based on the size of the parent element (parent element).

Setting Text Color

By using the color property in CSS, we can set the text color as desired. For example:

p {
 color: crimson;
}

In the example above, the paragraph text will be displayed in the color crimson. In addition to using color names like crimson, you can also specify colors using HEX, RGB, or RGBA codes. For a more detailed explanation of how to set colors in CSS, please read the following article: Learn CSS for Beginners #5: How to Set Colors and Backgrounds from Names to Gradients.

Setting Spacing in Text

We can use three common properties from CSS to set spacing in text. These three properties are:

letter-spacing

With this property, we can set the spacing between letters.

p {
  letter-spacing: 2px;
}

word-spacing

Allows us to adjust the spacing between words.

p {
  word-spacing: 4px;
}

line-height

Prioritizing reading comfort for visitors is key. One way to improve readability is by using the line-height property in CSS, which is used to adjust the line height of text.

p {
  line-height: 1.6;
}

Conclusion

By understanding how to install fonts with CDN from Google Fonts and using CSS properties such as font-family, font-size, color, and line-height, we can customize text appearance in a professional and attractive manner. This not only enhances the aesthetics of the design but also strengthens the user experience (UX) and SEO.

Thank you, see you in the next article.