How To Change Font Style On Google Pixel 2

To completely customize the await of your website, you can't forget about typography — how yous arrange and style text. Depending on your design, business organization niche, and audience, you may want to change the typeface, size, or color of your font.

For example, if you favor a nighttime grey over blackness in your color scheme, and so you'll desire to change the default font color of your text. If you're in media, then you lot may opt for a sans serif font, which is considered the easiest typography to read. But if y'all're in the creative field, then you lot may opt for a decorative typeface like Morris Troy. These are just a few reasons you might want to style the font on your website.

Download Now: Free Intro Guide to HTML & CSS

Let'due south look at how you can change font on your site with just a flake of code. We'll embrace:

how to alter font type in HTML
how to change font size in HTML
- how to modify font size inside the same paragraph
how to change font colour in HTML
how to change font in a div in HTML

How to Change Font Blazon in HTML

To change font type in HTML, use the CSS font-family property. Set information technology to the value you want and place it inside a fashion aspect. And then add this style attribute to an HTML chemical element, like a paragraph, heading, button, or span tag.

This is how you utilize inline CSS. Inline CSS means your HTML and CSS will be placed together in the torso section of your HTML doc. And so, technically, you'll be irresolute font "in HTML."

You used to be able to but use the font tag to alter the mode of text in HTML. So say you wanted to modify your font to Arial, size 20px, and a overnice orange color. You would have written the following line of HTML:

                                          
<font confront="Arial" size="20px" colour="#FF7A59">Your text hither.</font>

However, this font tag was deprecated back in 1998 then information technology doesn't work with the latest version of HTML, HTML5. It has been replaced by a much more constructive way to change the appearance of text: namely, CSS. CSS text formatting is a more than lightweight and flexible alternative to the HTML font tag — and it'due south non hard to learn.

Let's rewrite the example above using CSS to change the font type of a paragraph. It'southward important to note that I'm using CodePen, which uses Times New Roman as its default typeface. I'm going to add the style aspect to the first paragraph element, which means simply this paragraph volition be 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 Change Font Type in HTML [Inline CSS]</h2>
                      <p style="font-family unit: 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 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>Since I'grand using the CodePen Editor, the default typeface is Times New Roman. That means changing the typeface of a paragraph will require me to utilise a way attribute that contains the CSS font-family property fix to "Arial." The other elements on the page are not targeted past inline CSS and therefore remain Times New Roman.
                      </p>

Here's the result:

See the Pen oNBMjeB past Christina Perricone (@hubspot) on CodePen.

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

For example, allow's say I want to change the font of every paragraph chemical element to Arial. Then I could use a CSS selector to target all paragraphs and place it inside the head section of the folio.

Here'southward the CSS:

                                                                   p {
                       font-family unit: Arial;
                       }

Here's the HTML:

                                                                   <h2>How to Modify 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 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 than dummy text. This is more dummy text. This is more than 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 use a CSS type selector and prepare the CSS font-family holding  to "Arial." The headings  on the page will remain Times New Roman.
                      </p>

Here's the result:

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

At present that we understand how to alter font type using inline and internal CSS, permit's plough our attention to font size.

How to Alter Font Size in HTML

To alter font size in HTML, use the CSS font-size property. Prepare it to the value y'all want and place it inside a style attribute. And then add this style aspect to an HTML element, like a paragraph, heading, push, or span tag.

To continue to rewrite the outset instance that used the obsolete font tag, let's change the font size of a paragraph to 20px with CSS. For this example, I'm nonetheless going to use CodePen, only I'1000 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 volition be 16px, heading 2s volition be 32px, and heading 3s will be 28px.

Same as above, I'k going to outset by adding the fashion attribute to the beginning paragraph element, which means only this paragraph volition be 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 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'm using the CodePen Editor but loading BootstrapCDN, and so the default font-size of the body and paragraphs are 16px, H2s are 32px, and H3s are 28px. The default typeface is as well Helvetica. That ways changing the size of the first paragraph volition crave me to use a style attribute that contains the CSS font-size property gear up to "20px." The other elements on the page 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'due south say I want to change the font of every paragraph element to 20px. So I could use a CSS selector to target all paragraphs and place information technology inside the head department of the page.

Here'due south the CSS:

                                                                   p {
                       font-size: 20px;
                       }

Here's the HTML:

                                                                   <h2>How to Change Font Size 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 dummy text. This is more dummy text. This is more than dummy text.
                      </p>
                      <h3>The Explanation</h3>
                      <p>I'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 as well Arial. That ways changing the size of all paragraphs on the folio will require me to employ a CSS type selector and prepare the CSS font-size property  to "20px." The headings  on the page will their default sizes.
                      </p>

Here's the result:

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

Change Font Size Within the Same Paragraph

Some other reward of CSS over the deprecated font tag is that it provides you more than granular command over your code so yous can do things like change the font size of text within the same paragraph.

If I'd like to go on the paragraph at its default font size, then I'd just wrap the text that I wanted to modify the size of in <bridge> tags. And so I'd add a style attribute with the font-size property set to the value I want.

Here'southward 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 than dummy text. <bridge  style="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 dummy text.
                      </p>
                                            <h3>The Explanation</h3>
                      <p>I'm using the CodePen Editor only loading BootstrapCDN, so the default font-size of paragraphs are 16px. To change the font size of text within a paragraph, I will wrap the text in bridge tags. So, I volition add together a manner attribute that contains the CSS font-size property ready to a value other than 16px. In this instance, it's set to 22px.
                      </p>

Here's the upshot:

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

If I'd like to change the font size of the paragraph and text within that paragraph to ii unlike sizes, then I'd exist amend off using internal CSS. I'd still wrap the text that I wanted to change the size of in <bridge> tags. So I'd add an ID aspect to both the paragraph and span element. Using the respective ID selectors, I'd set the paragraph and span element to 2 different sizes.

Hither'due south the CSS:

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

Hither'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 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 but loading BootstrapCDN, so the default font-size of paragraphs are 16px. To alter the font size of a paragraph and text within a paragraph, I will wrap the text in span tags and add ID attributes to both the paragraph and span element. So, I will use ID selectors and fix them to differnet font sizes in the caput department of the page.
                      </p>

Hither's the outcome:

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

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

How to Change Font Colour in HTML

To change font color in HTML, use the CSS colour property. Set information technology to the value you want and identify it inside a style attribute. Then add this fashion aspect to an HTML element similar a paragraph, heading, push, or span tag.

Using the aforementioned example as above, let's now alter the font colour of a paragraph to Lorax orange (hex color code #FF7A59) with CSS. For this example, I'one thousand going to use the CodePen Editor and not load Bootstrap CSS. But if yous exercise desire to use that framework, the default font color is the same (ie. black) and and then is the process.

Aforementioned every bit above, I'm going to showtime by calculation the style aspect to the first paragraph chemical element, which means merely this paragraph will exist styled. The other paragraph and headings on the folio will remain the default color (black).

Here's the HTML with inline CSS:

                                                                   <h2>How to Modify Font Color in HTML [Inline CSS]</h2>
                      <p mode="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 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 Caption</h3>
                      <p>Since I'g using the CodePen Editor, the default font color is black. (This is unremarkably the instance no matter what tool or framework you lot're using to build your web projects.) That means changing the color of a paragraph volition crave me to use a way attribute that contains the CSS color belongings prepare to the hex color code #FF7A59. The other elements on the page are not targeted past inline CSS and therefore remain black.
                      </p>

Here'south the result:

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

Now let's say I desire to modify the color of every paragraph element to maroon. Then I could utilize a CSS selector to target all paragraphs and identify it within the head section of the page.

Here's the CSS:

                                                                   p {
                       color: #FF7A59;
                       }

Here's the HTML:

                                                                   <h2>How to Change Font Colour in HTML [Internal CSS]</h2>
                      <p>This is 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 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.
                      </p>
                      <h3>The Explanation</h3>
                      <p>Since I'thou using the CodePen Editor, the default font color is black. That means irresolute the color of all paragraphs on the page will require me to utilize a CSS type selector and set the CSS colour holding to the hex color lawmaking for orange (#FF7A59). The headings  on the page will remain black.
                      </p>

Here'south the result:

See 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 Color in CSS.

How to Change Font in a Div in HTML

Changing font in a div is no different than irresolute font in a paragraph or span element.

A "div" in HTML is just an element that can divide your web page into sections so y'all tin target them with unique CSS properties.

If you'd like to change the font type, size, and color of text on a page, then you could wrap information technology in div tags and utilise a CSS selector to style that element. Permit'southward look at an instance:

Hither'south the CSS:

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

Here'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 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 Caption</h3>
                      <p>I'grand using the CodePen Editor then the default font-blazon, size, and color is Times New Roman, 16px, and black. To alter all these backdrop of a section of text, I could wrap the text in a div and add together an ID attribute to the element. Then, I tin can apply an ID selector and fix the font-family, font-size, and font-color backdrop in the head section of the page.
                      </p>

Here's the result:

See the Pen How to Alter 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 can change the blazon, size, and color of your font. This tin can enable yous to customize every particular on your site and make your content more readable. If you lot're building with the Bootstrap framework, cheque out more ways you lot can override the default settings in Bootstrap CSS to create a truly unique website.

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

New Call-to-action