CSS Font Family
FREE
Overview
A font is basically a graphical representation of a character or a group of characters that includes different typefaces, sizes, weights, slopes, colors, or designs.
They enhance the look of the text and, in turn, enhance the web page and make it accessible and usable.
CSS Fonts
We all browse various websites each day, and a majority of them differ in their appearance. We find some of them exceptionally attractive and readable, while some of them are just mundane.
What makes these sites so distinguishable, and what leads to better usability and readability?
The answer is "Fonts and Typography".
A simple HTML page can be made attractive by beautifying it with CSS. We can use various fonts, make them bold, change their color and adjust the font style and size accordingly. This can be done using font-family in CSS and font style in CSS.
Take a look at the above example.
Site 1 has a better look as the headings and the paragraph is distinguishable.
Now observe site 2. The headings and the paragraphs are not distinguishable, which makes it difficult to comprehend and is not eye-catching either. Making the right use of the fonts and adjusting the size and color makes it appealing.
Why is Font Selection Important?
Fonts play a vital role in all websites. They not only make the text readable and eye-catching but also retain the user's attention. Who likes a bland website, after all?
It is important to use a font that the user can comprehend. Also, using the right size, color scheme, bold/italics, variant, and weight makes it interactive.
What is Font Family in CSS?
The font family in CSS is a set of fonts that have common designs and properties. The fonts which are defined in the font family differ in font weight like bold, italic, etc.
The font-family property is used in CSS to specify the font for a text. It is a prioritized list of various fonts, from the highest to lowest priority which is separated by commas.
They are prioritized at the user's discretion which he/she mentions, and then the browser checks for the font's compatibility on the device.
The browser selects the first font in the list and checks if that is installed or not, otherwise proceeds to the next font. Many browsers do not support all the fonts, so it's better to use multiple fonts.
This is known as font-stack, where we specify multiple fonts so that if the browser is not able to apply the first font on the result, it proceeds to the next font to apply it.
If it is not available either, this process continues till the next compatible font is encountered in the list that we have mentioned. It might happen that all the fonts that we have mentioned in the list are not compatible, so in this case, it is always recommended to use a generic family name at the end of the font list.
This is to ensure that at least our desired generic font family gets rendered on the result.
The common practice is to start with the font we want to render and always end with a generic family.
Syntax:
Example: We can define the font family in the following way.
Here the browser will choose Arial first as it is specified first. If it is not installed on our device, it will set sans-serif as the generic fallback option.
Note: If a font name contains white space, it must be quoted with double quotes (" ").
Types of Font Family in CSS
There are two types of font families in CSS.
Specific Font Family in CSS
As the name suggests, they are used only for a specific type of font. Specific font families in CSS have specific fonts with various styles within the one font family name.
These include Arial, Times New Roman, Tahoma, etc.
For example, Arial is a specific font within the Sans-Serif font family.
Take the example of the Arial font family. It consists of various fonts like Arial bold and Arial italic, which are just variations of the Arial font family. They differ in terms of their weights, so they considered font styles in CSS.
Example:
Generic Font Family in CSS
The Generic font family in CSS is used for a general font, and almost all browsers support them. The generic font family is determined by the font family properties, such as cursive strokes or decorative strokes at the edge of the letters.
There are five generic font families in CSS:
1. Serif- Serif is a generic font family that includes fonts having small, winged tips or strokes at the end of each letter. Such strokes are known as Serifs. They are traditional typefaces. They are mostly used in textbooks, newspapers, etc.
Example: Times New Roman, Georgia etc.
The above fonts in the Serif font family have common properties of Serifs, and they are similar to each other.
Serif is a generic font family, while Times New Roman and Georgia are font families within the Serif family.
Note: Here, we are calling Times New Roman and Georgia font-families as they are specific font families and have fonts within their own families for different weights, i.e., font styles in CSS(bold, italic, etc.).
Like Times New Roman has Times New Roman bold and Times New Roman Italic. They differ in their font style.
Appearance-
2. Sans-serif- Sans-serif is a generic font family that includes fonts that are much cleaner and do not have those strokes at the end of each letter. It literally means "without Serif". They are commonly seen in digital spaces like articles etc.
Example: Arial, Helvetica, Verdana, Trebuchet MS, and Gill Sans.
The above fonts in the Sans-serif font family have common properties of having no strokes, and they are similar to each other.
Sans-serif is a generic font family, while Arial and Helvetica are font families within the Sans-serif family.
Appearance-
3. Monospace- They have letters of the same width. It renders a mechanical look.
Example: Courier New, Monaco, Lucida Console, Consolas, and Everson Mono.
The above fonts in the Monospace font family have the common properties of having letters with the same width, and they are similar to each other.
Monospace is a generic font family, while Courier New and Monaco are font families within the Monospace family.
Appearance-
4. Cursive- They are used to join the letters using connective strokes and give them a handwritten look.
Example: Comic Sans MS, Adobe Poetica, Sanvito, and Zapf-Chancery.
The above fonts in the Cursive font family have common properties of having connective strokes, and they are similar to each other.
Cursive is a generic font family, while Comic Sans MS and Adobe Poetica are fonts within the Cursive family.
Appearance-
5. Fantasy- They are decorative fonts that maintain the characteristics of non-cursive, traditional alphabet glyphs.
Example: Cottonwood, Critter, and Alpha Geometrique.
The above fonts in the Fantasy font family have common properties of having non-cursive characters, and they are similar to each other.
Fantasy is a font family, while Cottonwood and Critter are font families within the Fantasy family.
Appearance-
Difference Between Serif and Sans-Serif Fonts
In the above image, we can see that the Serif font has the strokes at the end of the letters, which are called serifs, while the Sans-serif font is cleaner and does not have the strokes at the end of the letters.
Serif is used widely in prints like magazines and newspapers but is not displayed well on screen. For this purpose, Sans-serif fonts are suitable to be used on computer screens.
How To Set a CSS Font?
If we do not specify a font type, the browsers choose their own font to display.
The default font in Google Chrome is 'Times New Roman'.
Let us see an example to see the default font of the browser (Google Chrome).
Output:
As you can see, the font is Times New Roman.
There are other ways by which we can set a CSS font.
Using a Generic Font Family Name
If we want to use a generic font family for an element, then we mention the name of the generic font family-like serif, sans-serif etc.
Syntax-
An element is an individual component of the HTML document. Here we are setting the font-family property on the element.
Using a Specific Font Family Name
For using a specific font family, we specify the first preference for font, and then we mention the generic font family, which is used when the first font is not installed on your device.
Here our first preference Arial is used, but if Arial is not installed on our device, the sans-serif font family is then chosen as the generic fallback.
How to Use a Font Stack?
The font we list as the font family value is known as a font-stack.
It is a list of font family names that are comma-separated and listed according to their preference. The browser will try to apply the first font to the result. If it is not installed in the system or supported by the browser, it will move on to the next font and check the same. Listing many fonts in the font stack ensures maximum browser and operating system compatibility.
The fonts are listed according to their priority from left to right, i.e., from the highest to the lowest priority.
Example-
Here our first priority is Verdana font, but if it is not installed on our device or is not supported by the browser, then it moves on to the second font. If it is not available either, it moves to the next one, and so on.
From all the fonts listed, the browser should support at least one of the fonts, and listing the generic name will guarantee that something in the desired font family will be rendered.
Conclusion
- A font is basically a graphical representation of a group of characters that includes different typefaces, sizes, weights, slopes, colors, or designs.
- They enhance the look of the web page and makes it accessible and usable.
- The font-family property is used in CSS to specify the font for a text.
- There are two types of Font Family in CSS - Specific font family and Generic font family.
- While specifying the font families, it is recommended to use three-four font names so that at least one of them is available.