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 – 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:
- HTML color codes
- How to create perfect HTML tables
- Best way to create HTML table with HTML and CSS
- How to create perfect CSS background images
- How to center an image in HTML?
- How to change background color in HTML?
- How to disable scrolling in HTML?
- How to change text color in HTML?
- How to link CSS to HTML?
- HTML comments
- HTML image tags
- HTML How to set a background image?
- HTML How to change fonts
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.
