Coding for Beginners: How to change text font family in HTML & CSS
Font Family
Try our course: https://podtech.org/topic/font-family/
In this section we are going to look at font family. Font family is often referred to as CSS Font-Family Property and this is how we determine the property of font we would like to display on our web page. This is represented in the CSS section of your code and can be applied to all your p or h tags or labelled for individual use. This property is refered to as:
font-family
The ‘font-family’ property will specify the font type to be displayed. Here is how to write the CSS:
font-family: “Times New Roman”, times, sans-serif;
There are two types of font family names:
Family-Name
These are referring to specific font-family, like “Sans”, “Times” or “Arial”.
Generic-Family
These are referring to the larger generic category of fonts such as “Serif” and “Sans-Serif”.
In the example above we can see that:
Font-Type – Times New Roman
Family-Name – Times
Generic-Family – Serif
These properties can be included in the h or p tags. When including the family-name and the generic-family name we have to separate the values with a comma.
If a browser doesn’t support a specific font-family, they will automatically display the default font-family of that respective tag.
What this means is that the browser will initially try to load your font choice and if it isn’t available or in its database, it will try to load the default font-family as a backup option.
The following list are the best web-safe fonts for HTML and CSS:
Arial (sans-serif)
Verdana (sans-serif)
Helvetica (sans-serif)
Tahoma (sans-serif)
Trebuchet MS (sans-serif)
Times New Roman (serif)
Georgia (serif)
Garamond (serif)
Courier New (monospace)
Brush Script MT (cursive)
The first part is Family-Name and the words contained in the brackets are Generic-Family.