To completely customize the look of your website, you tin can't forget well-nigh typography — how you arrange and style text. Depending on your pattern, business organization niche, and audience, y'all may want to modify the typeface, size, or color of your font.

For instance, if you favor a dark gray over black in your colour scheme, then you'll want to modify the default font color of your text. If you're in media, then you may opt for a sans serif font, which is considered the easiest typography to read. Just if you're in the creative field, then you may opt for a decorative typeface like Morris Troy. These are merely a few reasons y'all might desire to style the font on your website.

Download Now: Free Intro Guide to HTML & CSS

Let's look at how you tin alter font on your site with just a scrap of code.  We'll embrace:

  • how to change font type in HTML
  • how to alter font size in HTML
    • how to alter font size within the same paragraph
  • how to modify font color in HTML
  • how to change font in a div in HTML

How to Alter Font Type in HTML

To alter font blazon in HTML, utilize the CSS font-family belongings. Set it to the value you want and place it inside a style attribute. Then add together this style attribute to an HTML element, like a paragraph, heading, push button, or span tag.

This is how y'all employ inline CSS. Inline CSS means your HTML and CSS will be placed together in the body department of your HTML doc. And then, technically, you lot'll exist changing font "in HTML."

You used to be able to just apply the font tag to alter the style of text in HTML. So say you lot wanted to change your font to Arial, size 20px, and a nice orange color. You would have written the following line of HTML:

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

Even so, this font tag was deprecated back in 1998 so it doesn't work with the latest version of HTML, HTML5. It has been replaced past a much more constructive way to change the appearance of text: namely, CSS. CSS text formatting is a more lightweight and flexible alternative to the HTML font tag — and it'southward not difficult to learn.

Let'south rewrite the instance to a higher place using CSS to change the font type of a paragraph. It's important to note that I'm using CodePen, which uses Times New Roman as its default typeface. I'one thousand going to add together the manner attribute to the beginning paragraph chemical element, which means only this paragraph will exist styled. The other paragraph and headings on the page will remain equally Times New Roman.

Here's the HTML with inline CSS:

                                                                
   <h2>How to Alter Font Type in HTML [Inline CSS]</h2>
                      
<p style="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 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.
                      
</p>
                      
<h3>The Caption</h3>
                      
<p>Since I'm using the CodePen Editor, the default typeface is Times New Roman. That means irresolute the typeface of a paragraph will crave me to utilize a way attribute that contains the CSS font-family holding set to "Arial." The other elements on the page are not targeted by inline CSS and therefore remain Times New Roman.
                      
</p>

Hither's the outcome:

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

While inline CSS works perfectly for changing a unmarried element on the page, other styles of CSS are recommended over inline CSS. For example, internal CSS can be placed in the head section of the HTML doc to style multiple elements on the page.

For case, let's say I want to alter the font of every paragraph chemical element to Arial. And then I could use a CSS selector to target all paragraphs and identify it inside the caput section of the page.

Here'south the CSS:

                                                                
   p {
                      
 font-family: Arial;
                      
 }

Here's the HTML:

                                                                
   <h2>How to Change Font Blazon 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 than dummy text. This is more than 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>Since I'm using the CodePen editor, the default typeface is Times New Roman. That ways changing the typeface of all paragraphs on the page will require me to employ a CSS type selector and fix the CSS font-family holding  to "Arial." The headings  on the page will remain Times New Roman.
                      
</p>

Here's the result:

Encounter the Pen GRrBpyQ past Christina Perricone (@hubspot) on CodePen.

Now that we empathize how to modify font type using inline and internal CSS, let's plow our attention to font size.

How to Change Font Size in HTML

To change font size in HTML, use the CSS font-size belongings. Gear up it to the value you want and place it inside a manner attribute. Then add this style aspect to an HTML chemical element, like a paragraph, heading, button, or span tag.

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

Same as above, I'm going to outset by adding the style attribute to the offset paragraph element, which means only this paragraph will exist styled. The other paragraph and headings on the page will remain their default sizes.

Here'due south 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 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 dummy text.
                      
</p>
                      
<h3>The Explanation</h3>
                      
<p>I'm using the CodePen Editor but loading BootstrapCDN, then the default font-size of the body and paragraphs are 16px, H2s are 32px, and H3s are 28px. The default typeface is too Helvetica. That means changing the size of the showtime paragraph will require me to use a style attribute that contains the CSS font-size property 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:

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

Now allow's say I want to change the font of every paragraph element to 20px. And then I could apply a CSS selector to target all paragraphs and place it inside the head section of the page.

Here'due south the CSS:

                                                                
   p {
                      
 font-size: 20px;
                      
 }

Hither's the HTML:

                                                                
   <h2>How to Modify Font Size in HTML [Internal CSS]</h2>
                      
<p>This is dummy text. This is more 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.
                      
</p>
                      
<h3>The Explanation</h3>
                      
<p>I'm using the CodePen Editor but loading BootstrapCDN, so the default font-size of the torso and paragraphs are 16px, H2s are 32px, and H3s are 28px.  The default typeface is besides Arial. That means changing the size of all paragraphs on the folio will require me to use a CSS type selector and set the CSS font-size property  to "20px." The headings  on the folio will their default sizes.
                      
</p>

Here's the result:

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

Change Font Size Within the Same Paragraph

Another advantage of CSS over the deprecated font tag is that information technology provides yous more than granular command over your code so yous can do things like modify the font size of text inside the same paragraph.

If I'd like to keep the paragraph at its default font size, then I'd just wrap the text that I wanted to alter the size of in <span> tags. Then I'd add a style attribute with the font-size belongings set to the value I desire.

Here'south the HTML with inline CSS:

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

Here's the consequence:

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

If I'd similar to change the font size of the paragraph and text within that paragraph to two dissimilar sizes, and so I'd be improve off using internal CSS. I'd still wrap the text that I wanted to change the size of in <span> tags. Then I'd add an ID attribute to both the paragraph and bridge element. Using the respective ID selectors, I'd set up the paragraph and bridge element to two unlike sizes.

Hither's the CSS:

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

Here's the HTML:

                                                                
   <h2>How to Change Font Size Within the Same Paragraph [Internal CSS]</h2>
                      
<p id="larger">This is dummy text. This is more dummy text. <span id="smaller">This is smaller text.</span>  This is more than dummy text. This is more than dummy text. This is more dummy text. This is more dummy text. This is more dummy text.
                      
</p>
                                            
<h3>The Caption</h3>
                      
<p>I'm using the CodePen Editor merely loading BootstrapCDN, and so the default font-size of paragraphs are 16px. To change the font size of a paragraph and text inside a paragraph, I will wrap the text in span tags and add ID attributes to both the paragraph and span element. And then, I will utilize ID selectors and set up them to differnet font sizes in the head section of the page.
                      
</p>

Hither's the effect:

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

For a more than in-depth look at the properties and values you can employ to alter the size of your text, read How to Alter Font Size in CSS.

How to Change Font Colour in HTML

To alter font color in HTML, employ the CSS color property. Prepare it to the value you want and place it inside a style attribute. Then add together this manner aspect to an HTML chemical element like a paragraph, heading, push, or bridge tag.

Using the same instance as to a higher place, let's now change the font colour of a paragraph to Lorax orange (hex colour code #FF7A59) with CSS. For this example, I'grand going to use the CodePen Editor and non 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 process.

Aforementioned equally above, I'm going to first by adding the style attribute to the get-go paragraph element, which means but this paragraph will be styled. The other paragraph and headings on the page will remain the default color (black).

Here'south the HTML with inline CSS:

                                                                
   <h2>How to Change Font Color in HTML [Inline CSS]</h2>
                      
<p style="colour: #FF7A59">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 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 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 blackness. (This is normally the case no matter what tool or framework yous're using to build your web projects.) That means changing the colour of a paragraph volition require me to use a style attribute that contains the CSS color property set to the hex colour lawmaking #FF7A59. The other elements on the page are not targeted past inline CSS and therefore remain blackness.
                      
</p>

Here's the event:

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

Now allow's say I want to change the color of every paragraph element to maroon. Then I could use a CSS selector to target all paragraphs and place it inside the caput section of the page.

Here's the CSS:

                                                                
   p {
                      
 color: #FF7A59;
                      
 }

Here'south the HTML:

                                                                
   <h2>How to Modify 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 than dummy text. This is more than 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>Since I'g using the CodePen Editor, the default font color is blackness. That means changing the color of all paragraphs on the page volition require me to use a CSS type selector and set up the CSS colour property to the hex colour lawmaking for orange (#FF7A59). The headings  on the folio will remain blackness.
                      
</p>

Hither'southward the consequence:

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

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

How to Alter Font in a Div in HTML

Irresolute font in a div is no different than changing font in a paragraph or span element.

A "div" in HTML is just an chemical element that can divide your web page into sections then yous tin target them with unique CSS properties.

If you lot'd like to change the font type, size, and color of text on a page, so you lot could wrap information technology in div tags and employ a CSS selector to fashion that chemical element. Let'southward expect at an example:

Here'southward the CSS: 

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

Hither'due south the HTML: 

                                                                
   <h2>How to Change 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 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 black. To change all these properties of a section of text, I could wrap the text in a div and add together an ID aspect to the chemical element. Then, I tin use an ID selector and set the font-family unit, font-size, and font-color properties in the head department of the folio.
                      
</p>

Here's the result:

See the Pen How to Modify Font in a Div in HTML [Internal CSS] past Christina Perricone (@hubspot) on CodePen.

Irresolute Your Font with HTML & CSS

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

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

New Call-to-action

css introduction

Originally published Apr sixteen, 2021 vii:00:00 AM, updated October 08 2021