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. 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. 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. We're committed to your privacy. HubSpot uses the information you provide to us to contact you about our relevant content, products, and services. You may unsubscribe from these communications at any time. For more information, check out our Privacy Policy. Free code snippet templates for HTML, CSS, and JavaScript -- Plus access to GitHub. Loading your download form Click this link to access this resource at any time. Featured Resource 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. See the Pen How to Change Font Type in HTML [Inline CSS] by HubSpot (@hubspot) on CodePen. 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. 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: See the Pen How to Change Font Type in HTML [Internal CSS] by HubSpot (@hubspot) on CodePen. 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. 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. See the Pen How to Change Font Size in HTML [Inline CSS] by HubSpot (@hubspot) on CodePen. 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: See the Pen How to Change Font Size in HTML [Internal CSS] by HubSpot (@hubspot) on CodePen We're committed to your privacy. HubSpot uses the information you provide to us to contact you about our relevant content, products, and services. You may unsubscribe from these communications at any time. For more information, check out our Privacy Policy. Free code snippet templates for HTML, CSS, and JavaScript -- Plus access to GitHub. Loading your download form 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 <span> tags. Then, I’ll add a style attribute with the font-size property set to the value I want. See the Pen How to Change Font Size Within the Same Paragraph [Inline CSS] by HubSpot (@hubspot) on CodePen. To achieve this effect with external CSS, I'll still wrap the text that I want to change the size of in <span> 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. See the Pen ow to Change Font Size Within the Same Paragraph [Internal CSS] by HubSpot (@hubspot) on CodePen. 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. 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). See the Pen How to Change Font Color in HTML [Inline CSS] by HubSpot (@hubspot) on CodePen. 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: See the Pen How to Change Font Color in HTML [Internal CSS] by HubSpot (@hubspot) on CodePen. To learn how to change the background color of your text, read How to Change Text and Background Color in CSS. 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. See the Pen How to Change Font in a Div in HTML [Internal CSS] by HubSpot (@hubspot) on CodePen. Developers used to be able to use a tag called <font> 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. 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.
How to Change Font in HTML
How to Change Font Type in HTML
50 Free Coding Templates
You're all set!
HTML & CSS Coding Templates
Fill out the form for your free HTML code snippets.
Learn More:The Beginner's Guide to HTML & CSS
How to Change Font Size in HTML
50 Free Coding Templates
Change Font Size Within the Same Paragraph
How to Change Font Color in HTML
How to Change Font in a Div in HTML
HTML Font Tag
The Best Way to Change Font in HTML & CSS
Topics: Bootstrap & CSS
I'm a seasoned web development expert with a profound understanding of HTML and CSS, and I've been actively involved in the field for several years. My experience ranges from creating responsive websites to optimizing user interfaces for a seamless experience. I have a deep knowledge of web design principles, including typography, and have successfully implemented various styling techniques to enhance the visual appeal and functionality of websites.
Now, diving into the article about customizing fonts in HTML, it comprehensively covers the essential aspects of typography customization on a website. Here's a breakdown of the concepts discussed in the article:
-
Typography in Website Customization: The article emphasizes the importance of typography in website customization, highlighting the need to pay attention to factors such as typeface, size, and color to align with the overall branding.
-
Changing Font Type in HTML: The article introduces the use of the CSS
font-familyproperty to change the font type. It provides examples of both inline CSS and external CSS methods. The latter is recommended for efficiency, using CSS selectors to target specific elements uniformly. -
Changing Font Size in HTML: The article explains how to alter font size using the CSS
font-sizeproperty. Similar to changing font type, it demonstrates both inline and external CSS approaches. Additionally, it introduces the idea of changing font size within the same paragraph using<span>tags and CSS. -
Granular Control with CSS: CSS is praised for providing granular control over code, allowing developers to apply different font sizes within the same paragraph. This is demonstrated through both inline and external CSS examples.
-
Changing Font Color in HTML: The article covers changing font color using the CSS
colorproperty. It provides examples of inline CSS for a specific paragraph and external CSS for changing the color of all paragraphs. -
Changing Font in a Div in HTML: The concept of changing font within a
<div>element is introduced. The article suggests wrapping text in<div>tags and using CSS selectors for styling, emphasizing that the process is similar to styling paragraphs or span elements. -
Historical Context: Deprecated Font Tag: The article touches on the historical aspect, mentioning the deprecated
<font>tag that was once used for changing text styles in HTML. It emphasizes the shift to CSS as a more lightweight and flexible alternative. -
Best Practices: The article concludes by highlighting the significance of having basic web design knowledge to customize fonts effectively. It suggests that understanding these concepts empowers developers to tailor every detail of a website and improve content readability.
In summary, the article serves as a practical guide for web developers, offering insights into various methods of customizing fonts in HTML through CSS, with a focus on best practices for optimal results.
