Font Family

Exercise

  1. In the "index.html" file, replace the code with the following:
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS</title>
  <link rel="stylesheet" href="./css/styles.css">
</head>

<body>
  <h1>Different Font Family</h1>
  <p>This will be the default font-family for the page from the body selector</p>
</body>

</html>
  1. Save.
  2. If "Live Server" is not already running, right-click anywhere in the editor and select "Open with Live Server" from the context menu.
  3. In the "styles.css" file, replace the code with the following:
body {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

h1 {
  font-family: 'Courier New', Courier, monospace;
}
  1. Save.
  2. In the browser, you should see the following:

    3. Exercise 2 Result

Code Walkthrough and Explanation


font-family

font-family in CSS is a property used to set the font for an HTML element. It allows you to specify a prioritized list of font family names and/or generic family names to be used as the font for a particular element. The browser will search for the first font family on the list that it can find on the user's computer or device, and use that font. If none of the fonts in the list are available, the browser will use its default font. The property can be applied to any HTML element that displays text, such as <p>, <h1>, <a>, etc.

In the above example, the font family is set to "Courier New", followed by Courier, and finally a generic font family monospace. The browser will first look for "Courier New" font family, if not found it will look for Courier font family, and so on. If none of the font families is available, it will use the default monospace font.


Experiment with the Code


Video and Code References


Questions? Subscribe and ask in the video comments:




GitHub and Other References