How to change font in html

Fonts play a very important role in making a website more user friendly and increasing content readability. Font face and color depends entirely on the computer and browser that is being used to view your page but you can use HTML tag to add style, size, and color to the text on your website. You can use a tag to set all of your text to the same size, face, and color.

The font tag is having three attributes called size, color, and face to customize your fonts. To change any of the font attributes at any time within your webpage, simply use the tag. The text that follows will remain changed until you close with the tag. You can change one or all of the font attributes within one tag.

Note −The font and basefont tags are deprecated and it is supposed to be removed in a future version of HTML. So they should not be used rather, it’s suggested to use CSS styles to manipulate your fonts. But still for learning purpose, this chapter will explain font and basefont tags in detail.

Set Font Size

You can set content font size using size attribute. The range of accepted values is from 1(smallest) to 7(largest). The default size of a font is 3.

Example

This will produce the following result −

Relative Font Size

You can specify how many sizes larger or how many sizes smaller than the preset font size should be. You can specify it like or

Example

This will produce the following result −

Setting Font Face

You can set font face using face attribute but be aware that if the user viewing the page doesn’t have the font installed, they will not be able to see it. Instead user will see the default font face applicable to the user’s computer.

Example

This will produce the following result −

Specify alternate font faces

A visitor will only be able to see your font if they have that font installed on their computer. So, it is possible to specify two or more font face alternatives by listing the font face names, separated by a comma.

When your page is loaded, their browser will display the first font face available. If none of the given fonts are installed, then it will display the default font face Times New Roman.

Setting Font Color

You can set any font color you like using color attribute. You can specify the color that you want by either the color name or hexadecimal code for that color.

Note − You can check a complete list of HTML Color Name with Codes.

Example

This will produce the following result −

The Element

The element is supposed to set a default font size, color, and typeface for any parts of the document that are not otherwise contained within a tag. You can use the elements to override the settings.

The tag also takes color, size and face attributes and it will support relative font setting by giving size a value of +1 for a size larger or −2 for two sizes smaller.

HTML Font Style – How to Change Text Color and Size with an HTML Tag

When you code in HTML and add some text, you don’t want to leave it like that. You want to make that text look good.

And to do that, you need to change their appearance through the color and font-size properties of CSS.

In this tutorial, I will show you two different ways you can make your HTML texts look good.

Basic font-size Syntax

How to Change Text Size and Text Color in the HTML Tag

You can change the color and size of your text right inside its tag with the color and font-size properties. This is known as inline CSS. You do it with the style attribute in HTML.

In the HTML code below, we will change the color and size of the freeCodeCamp text.

It looks like this in the browser:

To change the size of the text, you’ll use the style attribute, and then set a value with the font-size property like this:

The text now looks like this in the browser:

If you are wondering what 4rem is, it’s a unit of measurement. It’s the same as 64 pixels, because 16px makes 1rem unless you change the root font-size ( html ) to another value.

To change the color of the text, you can use the style attribute, and then set a value with the color property:

This is what we now have in the browser:

Combining the font-size and color properties gives us this in the browser:

How to Change Text Size and Text Color in an External CSS File

You can also change the color and size of text in an external stylesheet. Most importantly, you have to link the external CSS in the head section of your HTML.

The basic syntax for doing it looks like this:

Now, to change the text size and color of the freeCodeCamp text, you need to select it in the stylesheet and apply the appropriate properties and values to it.

Remember this is our simple HTML code:

You can change the color and size of the text by selecting the element (h1) and assigning values to the color and font-size properties:

We have the same result in the browser:

Conclusion

I hope this tutorial gives you the knowledge to be able to change the size and color of your HTML text so you can make them look better.

Thank you for reading, and keep coding.

Web developer and technical writer focusing on frontend technologies.

If you read this far, tweet to the author to show them you care. Tweet a thanks

Learn to code for free. freeCodeCamp’s open source curriculum has helped more than 40,000 people get jobs as developers. Get started

freeCodeCamp is a donor-supported tax-exempt 501(c)(3) nonprofit organization (United States Federal Tax Identification Number: 82-0779546)

Donations to freeCodeCamp go toward our education initiatives, and help pay for servers, services, and staff.

How to Change Font in HTML

Written by Anna Fitzgerald

Learn more HTML tips in our free introductory guide.

When customizing the look of your website, you can’t forget about typography — how you arrange and style text on the page. Depending on your branding, you’ll want to change the typeface, size, and color of your font to match.

For example, if you favor a dark gray over black in your color scheme, you’ll want to change the default font color of your text. If you’re in media, you may opt for a sans serif font, which is considered the easiest typography to read. But if you’re in the creative field, you may opt for a more decorative typeface. These are just a few reasons you might want to style the font on your website.

In this post, we’ll show you how to change your fonts in HTML to help your copy stand out, delight readers, and drive conversions.

How to Change Font in HTML

Let’s look at how you can change the font on your site with just a bit of code. We’ll cover:

Let’s get started.

How to Change Font Type in HTML

To change font type purely with HTML, use the CSS font-family property. Set it to the value you want and place it inside a style attribute. Then add this style attribute to an HTML element, like a paragraph, heading, button, or span tag.

Though this approach only requires you to add code to your HTML file, it actually uses the style language CSS. More specifically, this technique is called inline CSS. Inline CSS means your HTML and CSS will be placed together in the body section of your HTML document.

The Beginner’s Guide to HTML

Fill out the form for your free intro to HTML guide.

Let’s look at a basic example: using inline CSS to change the font type of a paragraph. I’ll add the style attribute to the first paragraph element, which means only this paragraph will be styled. The other paragraph and headings on the page will remain as Times New Roman, the default font type in most browsers.

While inline CSS works fine for changing a single element on the page, we recommend other styles of CSS, namely external CSS, over inline CSS.

External CSS is placed in a CSS file, separated from the HTML. For most developers, this is considered the correct way to change the font face in HTML because you don’t need to copy and paste the same style rules into each tag. Instead, just target all of one type of element with a CSS selector.

Learn More: The Beginner’s Guide to HTML & CSS

Want to learn more about HTML? Download our free guide for best practices for getting started with HTML.

For example, let’s say I want to change the font of every paragraph element to Arial. I could use the CSS selector “p” to target all paragraphs:

You can use external CSS with plain CSS code, or paired with a framework like Bootstrap CSS.

Now that we understand how to change font type, let’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 it to the value you want and place it inside a style attribute. Then add this style attribute to an HTML element, like a paragraph, heading, button, or span tag.

Continuing with our example above, let’s change the font size of a paragraph to 26 pixels with CSS. Same as above, I’ll start by adding the style attribute to the first paragraph element, which means only this paragraph will be styled. The other paragraph and headings on the page will keep their default sizes.

Now let’s say I want to change the font of every paragraph element to 26px. I can use a CSS selector to target all paragraphs:

Change Font Size Within the Same Paragraph

Another advantage of CSS is that it provides you with more granular control over your code, so you can do things like apply different font sizes to text inside the same paragraph.

If I want to keep the paragraph at its default font size, I can just wrap the text that I wanted to change the size of in tags. Then, I’ll add a style attribute with the font-size property set to the value I want.

To achieve this effect with external CSS, I’ll still wrap the text that I want to change the size of in tags. But, I’ll add an ID attribute to the span element. Using an ID selector, I set the span element to a different size.

For a more in-depth look at the properties and values you can use to change the size of your text, read How to Change Font Size in CSS.

How to Change Font Color in HTML

To change font color in HTML, use the CSS color property. Set it to the value you want and place it inside a style attribute. Then add this style attribute to an HTML element like a paragraph, heading, button, or span tag.

Let’s now change the font color of a paragraph to Lorax orange (hex color code #FF7A59) with CSS. Same as above, I’m going to start by adding the style attribute to the first paragraph element, which means only this paragraph will be styled. The other paragraph and headings on the page will remain the default color (black).

Now let’s say I want to change the color of every paragraph element to maroon. I could use a CSS selector to target all paragraphs with external CSS:

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

How to Change Font in a Div in HTML

A div in HTML is simply a generic element that can divide your web page into sections so you can target them with unique CSS properties. Changing the font in a div is no different than changing the font in a paragraph or span element.

If you’d like to change the font type, size, and color of text on a page, you can wrap it in div tags and use a CSS selector to style that element.

HTML Font Tag

Developers used to be able to use a tag called to change the style of text in HTML. If you wanted to change your font to Arial, you would have written the following line of HTML:

However, the font tag was deprecated in 1998, having been replaced by CSS. CSS formatting is a more lightweight and flexible alternative to the HTML font tag.

The Best Way to Change Font in HTML & CSS

With some basic web design knowledge, you 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 readable.

Editor’s Note: This post was originally published in July 2020 and has been updated for comprehensiveness.

Originally published Jun 8, 2022 7:00:00 AM, updated June 08 2022

Change Font HTML: A How-To Guide

The font-family CSS rule lets you define the font of an HTML web document. To refer to external fonts, you can use the url() method to define a font face. Or, you can embed a font CSS file from a site like Google Fonts.

As developers, there will be a time when we won’t want to use the default font that’s populated when our HTML is processed. This article aims to show you how to change the font in your HTML document using best practices.

How to Change Font in HTML

There are three ways to change the font of a web page in HTML:

In this article, we’ll talk about each of these methods of changing a font.

HTML Change Font: Built-in Font-Family

The first way we can change our font is by using the font-family property in our inline styling. This can be done like so:

We simply use the font-family property to indicate which font we would like to use in our block of text. Many of the standard fonts are readily available to use.

It’s a good idea to have a backup font, just in case the first font-choice cannot be loaded. It’s as easy as adding a comma and the new font-family name. I always end with a generic grouping as well in that one edge case that the first two are not available.

The generic grouping at the end is just the default sans-serif font for whatever device the client is using. The generic family names that are available to us: monospace, serif, sans-serif, cursive, and fantasy. You can also access some specific fonts like Times New Roman.

81% of participants stated they felt more confident about their tech job prospects after attending a bootcamp. Get matched to a bootcamp today.

Find Your Bootcamp Match

The average bootcamp grad spent less than six months in career transition, from starting a bootcamp to finding their first job.

Start your career switch today

HTML Change Font: Using a font-face

You can use the font-face rule to import a font from an external source onto your web page.

To use this approach, you must have access to an external font document. Font documents usually have the extension “.ttf”.

Let’s take a look at how to change a font using the font-face attribute. Here is the CSS style rule we need to use:

We use the font-face style attribute to declare our new font. The font-family attribute defines the name of our new font. src: url() instructs our CSS document on where to find our font. The value of “yoururl” should be the URL of your text font.

Our font will not change our web page just yet. We have to tell our CSS style sheet which elements should use our new font:

This code tells our CSS style sheet to apply the “Open Sans” font to some elements on our web page. h1, h2, h3 is a CSS selector that applies our style to the elements listed. These elements are HTML headings.

Change Font HTML: External CSS Font

Some sites such as Google Fonts let you embed a font onto your site using a CSS style sheet. These styles let you define font types using CSS attributes. In this instance, we’ll try to use the ‘Bangers’ and the ‘Yellowtail’ font from Google Fonts:

Find Your Bootcamp Match

Select your interest
First name

Last name

Email

Phone number

By continuing you agree to our Terms of Service and Privacy Policy, and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.

If you were to run the code above in your IDE of choice and load it, it will default to the generic fonts. If you would like to use these fonts, you can though with a few simple clicks:

The working demo above shows both built-in and third party fonts being used. Try your hand at importing other fonts!

Conclusion

You can change an HTML font by using the font-family attribute or by using an external CSS style sheet with custom fonts. To embed a custom font into the CSS of your site, you can use the font-face rule.

Do you want to learn more about coding in HTML? Read our How to Learn HTML guide. In this guide you’ll find top tips on how to learn HTML as well as guidance on the best online courses.

HTML Fonts

HTML Tutorial Index

HTML Overview

HTML Basics

HTML Tags

HTML Forms

HTML has an amazing font tag that helps in customizing the colors, sizes, and styles of web page fonts. In this chapter, you will learn about the primary tag and its importance.

Note: The HTML font tag is obsolete and is not supported in HTML5. CSS is used instead.

HTML font Tag

Text having high readability and different styles attracts the entire website and beautifies the content. Proper style and color to the font can make your document more user-friendly and readable. The type of font and its color supportability depend on the web browser, which the user will use for seeing the web pages. Form an HTML coder’s point; it is done using the FONT tag, which is written as:

It includes its three attributes for adding different styles and increasing or decreasing size according to our choice and can play with text’s color, which will get wrapped in your web page.

This customization of text in web pages can be done at any moment in HTML coding. You have to use tag to do this.

Font Size Setup in HTML

Texts in web development using HTML can be sized accordingly using the size attribute of the font tag. The size ranges from 1 up to 7 from lowest to highest.

Moreover, you can customize the font size relative to the original font size. It is termed relative font sizing.

Font Style Setup in HTML

This is made possible using the face attribute of the font tag.

Font Color Setup in HTML

This can be set using the color attribute of the font tag.