If you are new to Web Development, one of the first things that you should learn is how to style your text. The style of text plays an important role in how users interact with the website and the way your website looks. CSS font-family helps you to control how your text appears, from bold and classic styles to all the modern fonts.
In this blog, you will learn everything about the CSS font family, how it works, and how you can install custom fonts on your website. So let’s get started!
Table of Contents:
What is CSS?
CSS stands for Cascading Style Sheets. It is a stylesheet language that you can use to style the appearance of your webpage. While HTML is used to construct the base structure and contents (such as the headings, paragraphs, and images), CSS is used to change the view of the elements, such as the colors, fonts, sizes, spacings, and layout of the elements. You can say that HTML is the building block of your website, whereas CSS is the paint, decoration, and layout to make everything look attractive and easy to use.
Your path to becoming a web developer starts here
Master Web Development Today
What is CSS Font Family?
The CSS Font Family is basically a property that helps you choose the style of the text on your website. It helps you to regulate the appearance of the text if you wish your text to look beautiful in a simple font, such as Arial, or fancy, such as Times New Roman, or even a custom font that you can add yourself. This is important because the font you use will make the content look good and easier to read. The CSS Font Family gives your text its own personality and helps you to make your website more polished and engaging.
Given below is the syntax for implementing CSS Font Family:
Syntax:
font-family: font-name/s, generic family
You can define the font family in the following way:
Example:
font-family: Arial, sans-serif;
From the above example, the browser will choose Arial as the first option for the font style. If it is not installed on your device, it will choose sans-serif as the second option.
Note: If a font name consists of spaces in it (like Times New Roman), you need to put it inside double quotes like this: “Times New Roman”.
Types of CSS Font Family
While you are working with the CSS Font Family property, it is important to understand that the fonts are grouped into two main categories: specific font family and generic font family. Both of these font families play an important role in how the text is displayed on your website.
Specific Font Family in CSS
Specific Font families are basically the actual names of fonts like Arial, Georgia, or Times New Roman. Your device may or may not support these fonts, hence they are listed first in a font stack. The fonts give your web page a personal appearance and are selected to suit your design style and brand. Some examples of specific font families in CSS are given below:
Examples:
p {
font-family: "Times New Roman", serif;
}
body {
font-family: Arial, sans-serif;
}
code {
font-family: "Courier New", monospace;
}
In each of the three examples, the first name is the specific font family.
In example 1, font-family: “Times New Roman”, serif; uses Times New Roman as the first font style, and then falls back to any serif font if it is not available.
In example 2, font-family: Arial, sans-serif; uses Arial at first, then uses sans-serif as the secondary option if Arial is not available.
In example 3, font-family: “Courier New”, monospace; is used to display text in Courier New, then it uses monospace if Courier New is not available.
Get 100% Hike!
Master Most in Demand Skills Now!
Generic Font Family in CSS
Generic Font Families are basically the general types of fonts that are used by your browser when the specific font is not available. They help you to make sure that your text still looks similar in style, even if you can’t show the exact font.
There are 5 main Generic Font Families in CSS:
1. Serif: Serif is basically a generic font family that consists of small lines or strokes at the end of each letter. These little lines are called serifs. They provide the text with a more classic look; therefore, serif fonts are used in newspapers, books, and magazines. Examples of Serif fonts are: Times New Roman, Georgia, etc.
The code to implement the Serif font is given below:
font-family: serif;
The image of the Serif font is given below for your reference:
2. Sans-serif: Sans-serif is also a generic font family that does not contain small lines or strokes at the end of letters. The word “sans” means “without”; hence, sans-serif means “without serifs”. These types of fonts look clean and modern, and they can be used on websites, blogs, and other digital content. Example: Arial, Helvetica, Verdana, Trebuchet MS, and Gill Sans.
The code to implement the Sans-Serif font is given below:
font-family: sans-serif;
The image for the Sans-Serif font is given below for your reference:
3. Monospace: Here, every letter and symbol uses the same amount of space. This gives the text a simple, fixed, and typewriter-like appearance. Example: Courier New, Monaco, Lucida, Consolas, and Everson Mono.
The code to implement the Monospace font is given below:
font-family: monospace;
4. Cursive: These fonts are supposed to join the letters together with flowing strokes. This gives the text a smooth, handwritten look. Example: Comic Sans MS, Adobe Poetica, Sanvito, and Zapf-Chancery.
The code to implement the Cursive font is given below:
font-family: cursive;
5. Fantasy: These types of fonts are decorative and creative and look similar to regular letters. They are used as headings or special designs. Example: Cottonwood, Critter, and Alpha Geometrique.
The code to implement the Fantasy font is given below:
font-family: fantasy;
The image for the Fantasy font is given below for your reference:
How to Set a CSS Font?
It is easy to set a font in CSS, and it is done using the CSS Font Family property. This property helps you to choose how your text should look by applying a specific font or a group of fonts to your HTML elements.
By using the CSS font family, you can list more than one font. The browser will try to use the font that is listed first. In case it is not present on your device, it will attempt the following one in the list, and so on. In this way, your text will appear properly even if you have not installed the exact font.
Given below is an example to check the default font in the Browser (Google Chrome).
Code:
Output:
Explanation:
The above HTML code is used to create a simple webpage that consists of a heading and a paragraph. The <head> tag is used to set the basic settings, like the title and character type. The <body> tag is used to show the text “Hi, This is the heading.” as the heading and “Welcome to Intellipaat.” as a paragraph on the page. The font is Times New Roman.
Using a Generic Font Family Name
If you want to use a generic font family for an element, then you have to mention the name of the generic font family, like serif, sans-serif, etc.
Syntax:
element{
font-family: serif;
}
Here, this element refers to an individual component of the HTML code. The full HTML code using this element is given below:
Code:
Output:
Explanation:
The above code is used to display a heading and a paragraph on a webpage. It uses a serif font style for all the text to give it a classic look.
Using a Specific Font Family Name
If you want to use a specific font family, you have to specify the first preference for font, and then you have to mention the generic font family, which is used when you don’t have the font family installed on your computer.
Syntax:
element{
font-family: Arial, sans-serif;
}
Here, the first preference is the Arial font, but if Arial is not installed on your computer, the sans-serif font is chosen as the second option. The full HTML code using this element is given below:
Code:
Output:
Explanation:
The above HTML code is used to set the CSS Font Family to Arial for the whole page. If the Arial font is not available, the browser will use the sans-serif font.
How to Use a Font Stack?
A font stack is basically a list of fonts that you write in the font-family property. It is separated by commas. All the fonts inside the font-family property are written in the order of their preference. At first, the browser will try the first font, and if it is not available on your device, it will move to the next one, and so on. This helps to make sure that your text looks good even though the exact font you want is not supported. The fonts are checked from left to right, and the first font has the highest priority.
An example of implementing a font stack is given below:
element{
font-family: Verdana, Tahoma, sans-serif
}
Here, the first priority is the Verdana font, but if you don’t have it installed on your device or if it is not supported by your browser, then it moves to the second font. If it is not available as well, it moves to the next font, and so on.
The full HTML code using this element is given below:
Code:
Output:
Explanation:
In the above HTML code, the CSS Font Family is set to Verdana at first. If Verdana is not available on your computer, try Tahoma. If it is not available as well, it chooses the default sans-serif font. This helps in improving cross-browser and device compatibility.
Using Google Fonts
Google Fonts offers you a range of hundreds of free fonts that you can apply to your website. It is a great way to bring your web page into focus with no concern regarding the existence of fonts on your computer.
Steps to Use Google Fonts with CSS Font Family
Some of the important steps to implement Google Fonts with CSS Font Family are given below:
1. At first, visit the official website of Google Fonts.
2. Then choose the font style you like the most.
3. After you have chosen the font style, click on Select this style.
4. After that, you have to copy the <link> provided.
5. You have to paste that <link> inside the <head> section of your HTML file.
6. In your CSS, you have to use the font name with the font-family property.
Example:
<!-- Inside your HTML <head> -->
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
This is the <link> that you have copied from the website. After that, it should be pasted inside the <head> of your HTML document as shown above.
Again, in your CSS file, you have to use the font name with the font-family property.
Example:
/* In your CSS file */
body {
font-family: 'Roboto', sans-serif;
}
The entire HTML code along with the CSS part is given below:
Code:
Output:
Explanation:
The above HTML code is used to create a simple webpage that uses a Roboto font from Google Fonts. The <link> tag in the <head> section is used to load the Roboto font, and the CSS inside the <style> tag is applied to the entire page using the CSS Font Family. If the Roboto font isn’t available on your computer, it will use the sans-serif font by default.
Best Practices for CSS Font Family
1. You should not use one font, but a font stack where you will use a series of fonts.
2. You should always include generic font families like serif or sans-serif at the end.
3. Always be careful about the performance. Too many custom fonts can make your site slow.
4. You should also experiment with all your fonts and different devices to find how they appear.
5. You should choose readable fonts for a better user experience.
Conclusion
By using the CSS Font Family, you can get control over the appearance of your text. You can use it while building a portfolio, a blog, or a business website. You should ensure that you select the correct font because it will make your website more readable and well-designed. Or you can use simple fonts that are web-safe, Google fonts for variety, or your own special fonts, which will help to preserve the exclusivity of your site. Once you understand the use of CSS Font Family, you can style your website the way you like. To learn more about CSS, go through our blog and enroll in our Web Development Course.
CSS Font Family – FAQs
Q1. Can I use multiple font families for the same element?
No, you cannot apply multiple font families to one element; however, you can specify a list of fonts in it.
Q2. Does font-family affect the loading speed of the website?
Yes, the numerous custom fonts or big font files may impact the speed of your site a little.
Q3. Are system fonts better for performance?
This is true as the system fonts load quicker since it is already installed in the device of the user.
Q4. Can I set different font families for headings and paragraphs?
Yes, it is possible to specify that various font-family codes can be applied to each of the elements (such as h1, p) in CSS.
Q5. Is it necessary to include a generic font at the end of a tech stack?
Yes, by adding a generic font, you can ensure that your text will still display properly even though other fonts fail to load.