HTML How to change fonts – CSS font-family

  • Reading time:7 mins read

HTML How to change fonts – sample code

The font-family property defines which font to display for a given HTML element.

<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">And this is a paragraph.</p>

HTML How to change fonts The best browser-safe fonts in HTML and CSS

The following fonts are the most popular, and will certainly appear the same in all browsers. This is what a paragraph looks like using them:

Arial  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet magna ut nunc ornare lacinia. Etiam sed ex sit amet massa congue varius quis eget mi. 
Verdana Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet magna ut nunc ornare lacinia. Etiam sed ex sit amet massa congue varius quis eget mi. 
Helvetica Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet magna ut nunc ornare lacinia. Etiam sed ex sit amet massa congue varius quis eget mi. 
Tahoma Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet magna ut nunc ornare lacinia. Etiam sed ex sit amet massa congue varius quis eget mi. 
Trebuchet MS Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet magna ut nunc ornare lacinia. Etiam sed ex sit amet massa congue varius quis eget mi. 
Times New Roman Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet magna ut nunc ornare lacinia. Etiam sed ex sit amet massa congue varius quis eget mi. 
Georgia Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet magna ut nunc ornare lacinia. Etiam sed ex sit amet massa congue varius quis eget mi. 
Garamond Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet magna ut nunc ornare lacinia. Etiam sed ex sit amet massa congue varius quis eget mi. 
Courier New Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet magna ut nunc ornare lacinia. Etiam sed ex sit amet massa congue varius quis eget mi. 

 

 

HTML how to change fonts

 

HTML How to change fonts CSS font fallback – What happens if the chosen font cannot be displayed in the browser?

There is a solution if the font you want to see cannot be displayed in the browser. If the font of your choice is not available, you can specify plans B and C to replace it with. This is called fallback, and it looks like this in the code:

p.a {
  font-family: "Times New Roman", Times, serif;
}
p.b {
  font-family: Arial, Helvetica, sans-serif;
}

This is CSS formatting for the font of two paragraphs (p.a and p.b). The first font after font-family will be displayed if available. However, if the font is not available, the paragraph will appear with the next font in line. If that is not available either, then the third font will be used, and so on.

 

If you’d like to see more programming tutorials, check out our Youtube channel, where we have plenty of video tutorials in English.

In our Programming Tutorials series, you’ll find useful materials which will help you improve your programming skills and speed up the learning process.

HTML and CSS:

JavaScript:

Java:

Other materials:

Learn to code and change your career!

100% ONLINE

IDEAL FOR BEGINNERS

SUPPORTIVE COMMUNITY

SELF-PACED LEARNING

Not sure if programming is for you? With CodeBerry you’ll like it.