How To Change Font In HTML

The HTML markup is enriched with abundant styles and formatting tools that is surely going to win hearts of many internet enthusiasts as well as professional developers.

Unlike many programming languages, the HTML markup language offers its own set of unique styling of web pages and the contents that are associated with the website’s pages. If you are a novice and want to learn how to change the font style in HTML, then the solution is given right here. But first, let us know a few things about fonts in HTML.

In general computer terminology, a font is a text style that is used for displaying text which is typed and read by electronic devices such as a desktop, laptop, tablet, smartphone, etc. A font is also commonly known as ‘typeface’. Some of the common fonts or typeface we use on our devices are:

  • Arial
  • Comic Sans MS
  • Courier New
  • Helvetica
  • Lucida Sans
  • Times New Roman
  • Trebuchet MS
  • Verdana

Thus, if you have used a word processing document like MS Office Word suite or LibreOffice Writer, you must be aware of the various fonts or typeface which comes bundled with the software applications.

Similarly, we can use several fonts or typeface in HTML and apply them in various contents in web pages.

Why Is Indentation Required In HTML

In simple words, the purpose of indentation in HTML is to make the entire markup language easy to read and understand by any person who takes a look at it, including the developers, who are individuals actually behind the development of websites.

Thus, in order to have a better and a clear understanding of what exactly is indentation in HTML, let’s take a look at the following syntax below:

HTML syntax:

<html>

<head>

<title>Page Title</title>

</head>

<body>

<h1>Heading</h1>

<p>

This is a demo on how to indent in HTML.

</p>

</body>

</html>

As you can see in the above syntax, the lines containing ‘<title></title>’, ‘<h1></h1>’ and ‘<p></p>’ tags are indentation in HTML.

In HTML, indentation basically refers to the space that is left between the margin and the start of an indented line. This helps in giving a clear understanding, especially when entering important lines of text, such as to display vital information and also highlight the text to gain focus on the website.

Now, taking the above syntax again, we have three major areas of highlighted information that is displayed on the site. These highlighted information are:

  • The main title for the web page
  • The main heading in the body of the web page
  • The normal text that is to be displayed in the body of the web page

Changing Font Styles In HTML

If you are designing a website using HTML, you can specify different fonts for different areas of content in web pages of your website. The HTML markup language supports a lot of fonts that allow you to make your contents appear visually appealing and legible, too.

To use a certain font or typeface in HTML markup, there is a simple syntax that allows the usage of font styles in web pages.

<font face=”input_font_name”>

Let’s take an example where we are going to use the ‘<font>’ tag in HTML.

<!DOCTYPE html>

<head>

<title>Using Font Demo</title>

</head>

<body>

<font face=”Arial”>This sample text is in Arial typeface.</font>

</body>

</html>

In the example given above, the ‘<font>’ tag and ‘face’ attribute are used to set a specific font or typeface for the desired web page content.

There are, however, other things which you can add in the ‘<font>’ tag to make your text appear interesting to readers. For instance, you can make the text appear small, medium or big in size, apply colour to texts and even have the text stylised into bold, italics, underline, superscript, subscript, etc.

Since, the release of the latest version of HTML5, web designers are, therefore, being encouraged to implement the CSS3 for the usage of fonts. The reason behind this is that CSS3 does not break the fonts used in text contents in web pages, in contrast to the prior versions of HTML. Also, modern browsers may, however, not be able to display fonts accurately.

On Demand Support By Codexoxo

Codexoxo is dedicated to rendering HTML solutions and support services and thus, catering to the needs of individuals and businesses. To avail instant support services from the certified experts at Codexoxo, give us a call on our toll-free help desk phone number <enter-phone-number>. Let our experts assist you.

Contact us right away!

Call Now