How to Change the Font Type Using HTML Programming

Last Updated: March 21, 2019

Coding an HTML page to use a certain font is a cool thing, and it styles a HTML page with the font of your choice. This article will explain how to do it.

Steps

1
Have your "HTML markup" well under way in your editor of choice. If you're new to this, look up instructions on creating your first HTML page.
2
Find the point in your HTML page where you would like to specify the font to be used. It will be at the start of the chosen text; a sentence or paragraph.

Advertisement
3
Remember that we tell the web browser, via our HTML, how to present our text using "attributes". These precede and end the piece we would like to alter the appearance of. These attributes are marked with special symbols which the browser recognizes as special commands to be used to control the content. These are < and >.
4
Know the initial part of the attribute. It is as follows:
- <span style="font-family:name of font goes here">
- The <font> tag can still be used, but it is deprecated. The face attribute of the <font> tag allows you to use a font locally installed on the system. You can also use fonts defined with the CSS @font-face at-rule.
5
Close the text with the following closing attribute, after specifying the section of it to be changed.
6
Go back to using the font and settings you normally use in your browser. Notice the slash on the opening "closing" attribute. That will give you the complete command in HTML.

Warnings

If you really want to use a strange font you might create a graphic of the word(s) using the font and insert that instead. That way, it will be displayed exactly as you've created it.

⧼thumbs_response⧽
Helpful 3 Not Helpful 0
As mentioned in the Tips section, you cannot assume that the machine someone is using to look at your website will have the font you've specified. So, try to avoid weird and exotic fonts.

⧼thumbs_response⧽
Helpful 2 Not Helpful 1
A big caveat is that HTML5 will not be using this attribute and you will need to use CSS. If you want to know how to do this, you can look up instructions for it on the Internet.

⧼thumbs_response⧽
Helpful 2 Not Helpful 1