How To Change The Font In Html5

To completely customize the look of your website, you can't forget most typography — how you arrange and style text. Depending on your design, business niche, and audience, you may desire to modify the typeface, size, or color of your font.

For instance, if you lot favor a dark grayness over blackness in your color scheme, then you'll want to change the default font colour of your text. If you're in media, and then you may opt for a sans serif font, which is considered the easiest typography to read. But if you're in the artistic field, then you may opt for a decorative typeface similar Morris Troy. These are simply a few reasons you might want to style the font on your website.

Download Now: Free Intro Guide to HTML & CSS

Allow's await at how you can alter font on your site with just a bit of lawmaking. We'll cover:

how to change font type in HTML
how to change font size in HTML
- how to change font size inside the aforementioned paragraph
how to modify font color in HTML
how to change font in a div in HTML

How to Change Font Type in HTML

To change font type in HTML, use the CSS font-family property. Set information technology to the value you desire and place information technology within a style attribute. Then add together this fashion attribute to an HTML element, like a paragraph, heading, button, or bridge tag.

This is how you use inline CSS. Inline CSS ways your HTML and CSS volition be placed together in the body section of your HTML md. And so, technically, you'll exist changing font "in HTML."

You used to be able to but use the font tag to change the style of text in HTML. So say you wanted to change your font to Arial, size 20px, and a dainty orange colour. You would have written the following line of HTML:

                                          
<font face up="Arial" size="20px" color="#FF7A59">Your text hither.</font>

Withal, this font tag was deprecated dorsum in 1998 so it doesn't piece of work with the latest version of HTML, HTML5. Information technology has been replaced by a much more effective manner to change the appearance of text: namely, CSS. CSS text formatting is a more lightweight and flexible culling to the HTML font tag — and it's non hard to learn.

Let's rewrite the example in a higher place using CSS to change the font type of a paragraph. Information technology'southward important to annotation that I'm using CodePen, which uses Times New Roman every bit its default typeface. I'1000 going to add together the style aspect to the first paragraph chemical element, which ways simply this paragraph will exist styled. The other paragraph and headings on the page volition remain as Times New Roman.

Here's the HTML with inline CSS:

                                                                   <h2>How to Modify Font Type in HTML [Inline CSS]</h2>
                      <p manner="font-family: Arial">This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.
                      </p>
                      <h3>The Explanation</h3>
                      <p>Since I'thousand using the CodePen Editor, the default typeface is Times New Roman. That means changing the typeface of a paragraph will require me to use a style attribute that contains the CSS font-family belongings gear up to "Arial." The other elements on the page are non targeted by inline CSS and therefore remain Times New Roman.
                      </p>

Hither'southward the outcome:

Meet the Pen oNBMjeB by Christina Perricone (@hubspot) on CodePen.

While inline CSS works perfectly for changing a single element on the page, other styles of CSS are recommended over inline CSS. For example, internal CSS tin exist placed in the head department of the HTML doc to style multiple elements on the folio.

For example, let's say I desire to change the font of every paragraph element to Arial. And so I could utilize a CSS selector to target all paragraphs and place it inside the head section of the folio.

Here'south the CSS:

                                                                   p {
                       font-family: Arial;
                       }

Hither'southward the HTML:

                                                                   <h2>How to Change Font Blazon in HTML [Internal CSS]</h2>
                      <p>This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more than dummy text. This is more than dummy text. This is more than dummy text. This is more dummy text. This is more than dummy text. This is more dummy text. This is more than dummy text. This is more dummy text.
                      </p>
                      <h3>The Caption</h3>
                      <p>Since I'm using the CodePen editor, the default typeface is Times New Roman. That means changing the typeface of all paragraphs on the folio will require me to use a CSS type selector and set up the CSS font-family belongings  to "Arial." The headings  on the page volition remain Times New Roman.
                      </p>

Here's the result:

See the Pen GRrBpyQ by Christina Perricone (@hubspot) on CodePen.

Now that we understand how to change font blazon using inline and internal CSS, allow's turn our attention to font size.

How to Change Font Size in HTML

To change font size in HTML, use the CSS font-size property. Set up it to the value y'all want and place it inside a style attribute. Then add this mode attribute to an HTML element, like a paragraph, heading, push button, or bridge tag.

To continue to rewrite the first case that used the obsolete font tag, allow's change the font size of a paragraph to 20px with CSS. For this example, I'm nevertheless going to use CodePen, but I'm going to load Bootstrap CSS on the folio. That means, in add-on to the default font type being Helvetica, the default font size of paragraphs will be 16px, heading 2s will be 32px, and heading 3s volition be 28px.

Same equally above, I'chiliad going to starting time by adding the style attribute to the first paragraph element, which ways just this paragraph will be styled. The other paragraph and headings on the folio will remain their default sizes.

Hither's the HTML with inline CSS:

                                                                   <h2>How to Change Font Size in HTML [Inline CSS]</h2>
                      <p style="font-size: 20px">This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more than dummy text. This is more dummy text. This is more dummy text.
                      </p>
                      <h3>The Explanation</h3>
                      <p>I'm using the CodePen Editor only loading BootstrapCDN, so the default font-size of the body and paragraphs are 16px, H2s are 32px, and H3s are 28px. The default typeface is also Helvetica. That means changing the size of the start paragraph will require me to use a mode attribute that contains the CSS font-size holding set to "20px." The other elements on the folio are not targeted by inline CSS and therefore remain their default sizes.
                      </p>

Here's the result:

See the Pen How to Change Font Size in HTML [Inline CSS] by Christina Perricone (@hubspot) on CodePen.

Now let's say I desire to change the font of every paragraph element to 20px. And so I could use a CSS selector to target all paragraphs and place it inside the caput department of the page.

Hither'south the CSS:

                                                                   p {
                       font-size: 20px;
                       }

Hither's the HTML:

                                                                   <h2>How to Change Font Size in HTML [Internal CSS]</h2>
                      <p>This is dummy text. This is more than dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more than dummy text.
                      </p>
                      <h3>The Explanation</h3>
                      <p>I'one thousand using the CodePen Editor but loading BootstrapCDN, so the default font-size of the body and paragraphs are 16px, H2s are 32px, and H3s are 28px.  The default typeface is also Arial. That means irresolute the size of all paragraphs on the folio will require me to utilise a CSS blazon selector and prepare the CSS font-size property  to "20px." The headings  on the folio volition their default sizes.
                      </p>

Here's the event:

Run into the Pen How to Change Font Size in HTML [Internal CSS] past Christina Perricone (@hubspot) on CodePen.

Change Font Size Inside the Aforementioned Paragraph

Another advantage of CSS over the deprecated font tag is that it provides y'all more granular control over your code and then y'all tin can practise things like change the font size of text within the aforementioned paragraph.

If I'd like to go along the paragraph at its default font size, then I'd merely wrap the text that I wanted to change the size of in <span> tags. Then I'd add a style aspect with the font-size property set up to the value I desire.

Here's the HTML with inline CSS:

                                                                   <h2>How to Change Font Size Inside the Same Paragraph [Inline CSS]</h2>
                      <p>This is dummy text. This is more dummy text. <span  way="font-size: 22px">This is larger text.</span> This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more than dummy text.
                      </p>
                                            <h3>The Explanation</h3>
                      <p>I'm using the CodePen Editor merely loading BootstrapCDN, so the default font-size of paragraphs are 16px. To change the font size of text within a paragraph, I volition wrap the text in bridge tags. Then, I will add a style attribute that contains the CSS font-size property fix to a value other than 16px. In this example, it's set to 22px.
                      </p>

Here'south the result:

See the Pen How to Modify Font Size Within the Same Paragraph [Inline CSS] past Christina Perricone (@hubspot) on CodePen.

If I'd like to change the font size of the paragraph and text within that paragraph to two dissimilar sizes, then I'd be ameliorate off using internal CSS. I'd still wrap the text that I wanted to change the size of in <span> tags. And then I'd add together an ID attribute to both the paragraph and span element. Using the respective ID selectors, I'd set the paragraph and span chemical element to two unlike sizes.

Here'southward the CSS:

                                                                   #larger {
                        font-size: 18px;
                      }
                      #smaller {
                        font-size: 14px;
                      }

Here's the HTML:

                                                                   <h2>How to Alter Font Size Within the Same Paragraph [Internal CSS]</h2>
                      <p id="larger">This is dummy text. This is more than dummy text. <bridge id="smaller">This is smaller text.</span>  This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.
                      </p>
                                            <h3>The Explanation</h3>
                      <p>I'm using the CodePen Editor but loading BootstrapCDN, so the default font-size of paragraphs are 16px. To modify the font size of a paragraph and text inside a paragraph, I will wrap the text in bridge tags and add ID attributes to both the paragraph and span chemical element. Then, I volition use ID selectors and set them to differnet font sizes in the head section of the folio.
                      </p>

Here'south the outcome:

See the Pen ow to Change Font Size Within the Aforementioned Paragraph [Internal CSS] by Christina Perricone (@hubspot) on CodePen.

For a more in-depth await at the properties and values yous tin can use to change the size of your text, read How to Modify Font Size in CSS.

How to Alter Font Color in HTML

To modify font colour in HTML, use the CSS color belongings. Set it to the value yous want and place information technology inside a way aspect. Then add this style attribute to an HTML element similar a paragraph, heading, button, or span tag.

Using the same instance as above, let's at present change the font color of a paragraph to Lorax orange (hex color code #FF7A59) with CSS. For this example, I'm going to use the CodePen Editor and not load Bootstrap CSS. But if yous practise want to use that framework, the default font color is the same (ie. black) and and so is the procedure.

Same every bit in a higher place, I'k going to offset by adding the fashion aspect to the get-go paragraph element, which means simply this paragraph volition be styled. The other paragraph and headings on the folio volition remain the default colour (black).

Here's the HTML with inline CSS:

                                                                   <h2>How to Change Font Color in HTML [Inline CSS]</h2>
                      <p fashion="color: #FF7A59">This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.
                      </p>
                      <h3>The Explanation</h3>
                      <p>Since I'yard using the CodePen Editor, the default font color is black. (This is ordinarily the example no matter what tool or framework you're using to build your web projects.) That means changing the color of a paragraph will crave me to employ a style attribute that contains the CSS color belongings ready to the hex color code #FF7A59. The other elements on the folio are not targeted by inline CSS and therefore remain blackness.
                      </p>

Here's the result:

See the Pen How to Change Font Color in HTML [Inline CSS] by Christina Perricone (@hubspot) on CodePen.

Now permit'southward say I want to change the color of every paragraph element to maroon. And then I could utilize a CSS selector to target all paragraphs and place it within the caput section of the page.

Here's the CSS:

                                                                   p {
                       colour: #FF7A59;
                       }

Here'southward the HTML:

                                                                   <h2>How to Change Font Color in HTML [Internal CSS]</h2>
                      <p>This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.
                      </p>
                      <h3>The Explanation</h3>
                      <p>Since I'm using the CodePen Editor, the default font color is black. That ways irresolute the color of all paragraphs on the page will require me to apply a CSS blazon selector and set the CSS color property to the hex colour code for orangish (#FF7A59). The headings  on the page will remain blackness.
                      </p>

Here's the result:

Run into the Pen How to Change Font Color in HTML [Internal CSS] by Christina Perricone (@hubspot) on CodePen.

To learn how to change the background color of your text, read How to Change Text and Background Colour in CSS.

How to Change Font in a Div in HTML

Irresolute font in a div is no unlike than changing font in a paragraph or bridge chemical element.

A "div" in HTML is only an element that can divide your web folio into sections so you can target them with unique CSS backdrop.

If you lot'd like to modify the font blazon, size, and color of text on a page, then you could wrap it in div tags and use a CSS selector to style that chemical element. Permit's wait at an case:

Hither's the CSS:

                                                                   #case {
                        font-family: Arial;
                        font-size: 20px;
                        color: #FF7A59;
                      }

Here'south the HTML:

                                                                   <h2>How to Alter Font in a Div in HTML [Internal CSS]</h2>
                                            <div id="example">This is dummy text. This is more than dummy text. This is smaller text.This is more dummy text. This is more dummy text. This is more dummy text. This is more than dummy text. This is more dummy text.</div>
                                            <h3>The Explanation</h3>
                      <p>I'm using the CodePen Editor so the default font-type, size, and color is Times New Roman, 16px, and blackness. To change all these properties of a section of text, I could wrap the text in a div and add an ID attribute to the chemical element. Then, I can apply an ID selector and fix the font-family unit, font-size, and font-color properties in the caput section of the page.
                      </p>

Here's the result:

Encounter the Pen How to Change Font in a Div in HTML [Internal CSS] by Christina Perricone (@hubspot) on CodePen.

Changing Your Font with HTML & CSS

With some basic web design knowledge, you lot tin can change the type, size, and color of your font. This tin enable you lot to customize every detail on your site and make your content more readable. If you're building with the Bootstrap framework, bank check out more than ways you tin can override the default settings in Bootstrap CSS to create a truly unique website.

Editor'due south Note: This postal service was originally published in July 2020 and has been updated for comprehensiveness.

New Call-to-action