How To Change The Font In HTML

Programming

Fonts take a noteworthy purpose in the creation of an easier to understand site and for the expansion of content consistency. Fonts style face and shading relies totally upon the PC and program which is utilized to view the page yet one may utilize HTML <font> tag to change its color, size, and style on the site. The user may utilize a <basefont> tag to set the entirety of the content to a similar face, size, and shading.

How to Change the Font Size in HTML

The strategy for altering a font size is very straightforward and simple. One may establish font size through the size attribute. The possibility of recognized numbers is from 1 (minimum) to 7 (maximum). The built-in size of a font is 3. Simply type the tag for the code like this, <font size=”number”>text</font>. The number of sizes is input in the form ” “. Although, it is important to remember that this solely works on HTML 5.

For adding or reducing the font size in comparison with the built-in size, use <font size=”+num”> or <font size=”- num”> , here “num” means any number from 1-7.

Increase the font size by two sizes by typing:


<font size="+2">text.</font>

Reduce the font size by one by typing:


<font size="-1"> text.</font>

How to set the Font Face

For establishing a font face utilizing face attribute, the user must know that in case of not possessing the required font downloaded by the client viewing it, they may not view it. As an alternative, the client will be viewing only the built-in font face pertinent to the client’s PC.

HTML code:


<!DOCTYPE html>

<html>

<head>

<title>Font Face</title>

</head>

<body>

<font face="Comic sans MS" size="5">Comic sans MS</font><br/>

<font face="Times New Roman" size="5">Times New Roman</font><br/>

<font face="WildWest" size="5">WildWest</font><br/>

<font face="Bedrock" size="5">Bedrock</font><br/>

<font face="Verdana" size="5">Verdana</font><br/>

</body>

</html>

It may establish the accompanying outcome in the resulting fonts: Comic Sans MS, Times New Roman, WildWest, Bedrock, and Verdana.

How to specify alternate Font Faces

Another user might possess the option to view the font style on the condition that they possess the particular font style downloaded on the PC. Therefore, it is likely to indicate at least two font face options by entering the font face titles, divided by a comma.


<font face="Helvetica, Arial">

<font face="Comic Sans MS, Lucida Calligraphy, Lucida Console">

As the page loads, the browser may show the first accessible font face. In case none of the mentioned font styles is downloaded, then it may show the built-in font face, Times New Roman.

Also, go through a total rundown of HTML Standard Fonts.

How to set the Font Color

You can set the font color to any color you like. You can use a hexadecimal code (#FF00FF) or use the name of the color (magenta).


<!DOCTYPE html>

<html>

<head>

<title>Setting Font Color</title>

</head>

<body>

<font color="#FF00FF"> This text is in red</font><br/>

<font color="pink">This text is pink</font>

</body>

</html>

It will create a text in red and pink.

How To Make a Text Bold In HTML?

For having a bold text in HTML, utilize the <b>… </b> code or <strong>… </strong> code. Both of these codes possess a similar work, however, <strong> label enhances semantic solid significance to the font. The <b> code is an actual markup component, yet does not enhance semantic significance.

HTML Marked Formatting

In case the user needs to check or mark a font, they can compose the font inside <mark>………</mark>.

Underlined Text

In case the user composes anything inside <u>………</u> component, it will appear in an underlined text.

Strike Text

Font composed inside <strike>…………………..</strike> component is shown with a strikethrough. It is a thin line that puts across on the sentence.

Monospaced Font

In case the user needs each letter to have a similar width, at that point he is supposed to compose the font inside <tt>………….</tt> component.

Note: We realize that the vast majority of the font styles are known as variable-width font styles because various letters have distinctive width. (for instance: ‘w’ is more extensive than ‘I’). Monospaced Font gives comparative space among each letter.

Superscript Text

In case the user put the text inside <sup>…………..</sup> component, it will appear in superscript; which implies that it is shown a large portion of a character’s stature over different characters.

Subscript Text

In case the user put the text inside <sub>…………..</sub> component, it appears in subscript; which implies it is shown a large portion of a character’s stature beneath different characters.

Deleted Text

Text that is inside the code <del>……….</del> will be shown as deleted text.

Inserted Text

Text that is inside the code <ins>……….</ins> will be shown as inserted text.

The font style code has different components known as size, face, color to alter your textual styles. To do that whenever you are on your site page, essentially utilize the <font> code. The font that will be written will stay modified until you close with the </font> tag. You can transform one or the entirety of the font style attributes inside one <font> tag.

Related Posts