HTML <font> Font Tag
Tags: learnhtml, htmlf
Published: 2021-05-10 05:26:39

---
title: HTML <font> Font Tag
published: true
date: 2021-02-23 20:31:09 UTC
tags: LearnHTML,HTMLF
canonical_url: https://sharepointanchor.com/learn-html/html-font-tag/
---

In HTML, the **<font> Font tag** is used to **define the font characteristics** such as font’s **color** , **size** and **face**. You can also change this behavior by using the **CSS property**.

- The font tag has basically three attributes. They are:
  - **Size**
  - **Color**
  - **Face/Type**

**Note** : The **<font>** tag is a **deprecated HTML tag** , and it is **not available in HTML 5**.

<svg aria-hidden="true" focusable="false" data-icon="clock" width="20" height="20" fill="none" stroke="currentColor" style="display:inline-block;vertical-align:-0.1em" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>Estimated reading time: 4 minutes

## Syntax:

The <font> tag contains both the **starting <font> tag** and **ending </font> tag**. The content is written between these two tags.

```

<font attribute="value"> Write your text here </font>

```

## Sample of the HTML <font> Tag:

```

<!DOCTYPE html>
<html>
  <head>
    <title>HTML <font> Tag</title>
  </head>
  <body>
<h2>Example for HTML <font> tag:</h2>
    <p>
      <font size="3" color="#FF00FF">This text is in Pink.</font>
    </p>
    <p>
      <font size="5" color="green">Green text, font size increased.</font>  
    </p>
    <p>
      <font size="4" face="Comic sans MS" color="blue">Blue tex, typeface changed.</font>
    </p>
  </body>
</html>

```

## Result:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/Result-34.png)<figcaption>Result</figcaption>

### Download Sample File:

[HTML-font-tag](https://sharepointanchor.com/wp-content/uploads/2021/02/HTML-font-tag.html)[Download](https://sharepointanchor.com/wp-content/uploads/2021/02/HTML-font-tag.html)

## CSS Style for Changing the Font Characteristics:

You can use the **CSS Color property** to change the **color** of the text. Also use the **CSS font-family** or **font-face** properties to change the **text type** and use the **CSS font-size property** to change the **text size**.

### Example:

```

<!DOCTYPE html>
<html>
  <head>
    <title>HTML <font> Tag</title>
  </head>
  <body>
<h2>Example for HTML <font> tag with CSS property:</h2>
    <p style="font-size:16px; color:green;">This is the Green color text.</p>
    <p style="font-size:20px; color:#1c87c9;">Blue color text, and font size increased.</p>
    <p style="font-size:18px; color:salmon; font-family:WildWest;">Salmon color text, typeface changed.</p>
  </body>
</html>

```

### Result:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/Result-1-9.png)<figcaption>Result</figcaption>

## Attributes:

The <font> tag supports both the **Global attributes** and **Event Attributes**.

| Attribute | Value | Description |
| --- | --- | --- |
| color | 
- rgb (x, x, x)
- #xxxxxx
- colorname
 | This value is used to **change the color** of the given text. |
| face | font\_family | It is used to **set the typeface**. |
| size | number | Helps to set the **size of the text**. |

<figcaption>Attributes</figcaption>
## Styling Methods for <font> Tag:

You can use the following properties to style an HTML **<font>** font tag.

### Properties to style the visual weight/emphasis/size of the text in <font> tag:

- **CSS font-style** – This CSS property helps to set the font style of the text such as normal, italic, oblique, initial, inherit.
- **CSS font-family** – This CSS property specifies a prioritized list of one or more font family names or generic family names for the selected element.
- **CSS font-size** – This CSS property will help to set the size of the font.
- **CSS font-weight** – This CSS property used to define whether the font should be bold or thick.
- **CSS text-transform** – This CSS property will control the text case and capitalization.
- **CSS test-decoration** – This CSS property specifies the decoration added to text such as **text-decoration-line** , **text-decoration-color** , **text-decoration- style**.

### Styles to coloring the text in <font> Tag: 

- **CSS color** – This CSS property will specify the color of the text content and decorations.
- **CSS background-color** – This CSS property helps to set the background color of an element. 

### Text layout styles for <font> Tag:

- **CSS text-indent** – This CSS property is used to specify the indentation of the first line in a text block.
- **CSS text-overflow ** – This CSS property helps to describe how overflowed content that is not displayed should be signaled to the user.
- **CSS white-space** – This CSS property describes how white-space inside an element is handled.
- **CSS word-break**  – This CSS property decides where the lines should be broken.

### Other Properties for <font> Tag:

- **CSS text-shadow**  – This CSS property helps to add the shadow to text.
- **CSS text-align-last**  – This CSS property will set the alignment of the last line of the text.
- **CSS line-height** – This CSS property defines the height of a line.
- **CSS letter-spacing** – This CSS property helps to decide the spaces between letters/characters in a text.
- **CSS word-spacing** – This CSS property specifies the spacing between every word.

## Browser Support:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/Browser-Support-10.png)<figcaption>Browser Support</figcaption>

### Related Articles:

- **[HTML <dd> Definition Description Tag](https://sharepointanchor.com/learn-html/html-dd-definition-description/)**
- **[HTML <center> Center Tag](https://sharepointanchor.com/learn-html/html-center-tag/)**
- **[Basic HTML Definitions and Usages in the Real World](https://sharepointanchor.com/learn-html/basic-html-definitions-and-usages-in-real-world/)**
- **[HTML <code> Code Tag](https://sharepointanchor.com/learn-html/html-code-tag/)**
- **[HTML <aside> Aside Tag](https://sharepointanchor.com/learn-html/html-aside-tag/)**

## Frequently Asked Questions:

**What is a <font> tag in HTML?** 

The HTML <font> tag defines the **font characteristics** such as **size** , **color** , and **typeface**.

 
 
**What is the function of font tag?** 

The font tag will **create an attractive and readable web page**.

 
 
**What is the syntax of the HTML font tag?** 

The basic syntax of the HTML font tag is:  
**<font attribute=”value”>Text </font>**

 
 
**Is font tag is deprecated HTML tag?** 

**Yes**. The <font> tag is **deprecated HTML tag** , and it is **no longer available in HTML 5**.

 
 
**What are the attributes available in HTML <font> tag?** 

The font tag contains the following three attributes:  
**Color**  
**Size**  
**Face/Type**

 
 

The post [HTML <code><font></code> Font Tag](https://sharepointanchor.com/learn-html/html-font-tag/) appeared first on [Share Point Anchor](https://sharepointanchor.com).