Css how to change font

How to change the font type, size, and color on a web page

This page contains instructions on how to change a font and its color on a web page. With the introduction of HTML5, the proper way to configure web page fonts is to use Cascading Style Sheets. The old method, of using an inline style attribute or font tag, is deprecated, and should no longer be used.

Although the deprecated methods may still render correctly in modern Internet browsers, they are no longer guaranteed to do so. To create web pages that display correctly for the maximum number of users, use the CSS methods described on this page.

The methods for changing font attributes on this page work for text contained in most HTML tags, including

Using CSS for a single application

If you plan on changing the font face and its color for one word, sentence, or paragraph on a web page, configure its attributes in the element tag. Using the style attribute, you may specify the font face and color with font-family, color, and the font size with font-size, as shown in the example below.

Example code

Result

This text has the Courier font, is Blue, and 20px in size.

Using CSS for one or more pages

Custom font for one page

In the head portion of your web page, you may insert code between the tabs to change the appearance of your text in various elements. The next blue box contains example code that, once called, would change your font face to Courier and color it red. As you can see, we have defined the class name as «custom.»

Once defined, this styling can be applied to most elements in your page by attaching the class «custom» to them. The following box shows two lines of code and their respective results.

Example

Result

This whole sentence is red and Courier.

Only the word test is red and Courier.

Custom font for many pages

Importing an external CSS file can be very beneficial in that it allows users to change rules for multiple pages at the same time. The following section shows an example for creating a basic CSS file that changes the font and it’s color for most elements. This file may be loaded into more than one web page, even an entire site.

Using the font tag

Although deprecated, the HTML tag can still be used and may be necessary to be used with some online services. When using the FONT tag, you must include the face attribute, which describes the font to be used. In the example below, we are using the Courier font and the hexadecimal color code #005CB9, which is a dark blue.

How to Use CSS to Change Fonts on Web Pages

Set the font for specific words, paragraphs, or entire web pages

Jennifer Kyrnin is a professional web developer who assists others in learning web design, HTML, CSS, and XML.

Simple styling options let you change a web page’s font using Cascading Style Sheets. Use CSS to set the font of individual words, specific sentences, headlines, whole paragraphs, and even entire pages of text.

The screenshots below apply to the JSFiddle.net code playground, but the concepts that are described are true no matter where your code is implemented.

How to Change the Font With CSS

Make the HTML and CSS changes explained below using any HTML editor or text editor.

Locate the text where you want to change the font. We’ll use this as an example:

Surround the text with the SPAN element:

Add the attribute style=»» to the span tag:

Within the style attribute, change the font using the font-family style.

Save the changes to see the effects.

Tips for Using CSS to Change Font

The best approach is to always have at least two fonts in your font stack (the list of fonts), so that if the browser doesn’t have the first font, it can use the second font instead.

Separate multiple font choices with a comma, like this:

The example outlined above uses inline styling, but the best kind of styling uses an external style sheet to modify more than just the one element. Use a class to set the style on blocks of text.

This text is in Arial

In this example, the CSS file to style the above HTML would appear as follows:

Always end CSS styles with a semicolon (;). It’s not required when there’s only one style, but it’s a good habit to start.

CSS Fonts

Choosing the right font for your website is important!

Font Selection is Important

Choosing the right font has a huge impact on how the readers experience a website.

The right font can create a strong identity for your brand.

Using a font that is easy to read is important. The font adds value to your text. It is also important to choose the correct color and text size for the font.

Generic Font Families

In CSS there are five generic font families:

All the different font names belong to one of the generic font families.

Difference Between Serif and Sans-serif Fonts

Note: On computer screens, sans-serif fonts are considered easier to read than serif fonts.

Some Font Examples

The CSS font-family Property

In CSS, we use the font-family property to specify the font of a text.

Note: If the font name is more than one word, it must be in quotation marks, like: «Times New Roman».

Tip: The font-family property should hold several font names as a «fallback» system, to ensure maximum compatibility between browsers/operating systems. Start with the font you want, and end with a generic family (to let the browser pick a similar font in the generic family, if no other fonts are available). The font names should be separated with comma. Read more about fallback fonts in the next chapter.

Example

Specify some different fonts for three paragraphs:

.p1 <
font-family: «Times New Roman», Times, serif;
>

.p2 <
font-family: Arial, Helvetica, sans-serif;
>

.p3 <
font-family: «Lucida Console», «Courier New», monospace;
>

How to Change Font and Text Color Using CSS

Learn 3 ways to Change Font and Text Color Using CSS

The presentation of a document written in markup languages such as HTML is described using a style sheet language known as CSS. HTML stands for HyperText Markup Language whereas CSS is the abbreviation for Cascading Style Sheets. They are unique in their syntax. While HTML could be regarded as the structure of a website, CSS is the styling done on the structure.

It is quite interesting to note that several websites could very well have the same HTML code but their styling or CSS is what would make them different! Talking about CSS in particular, a graphic designer displays their creativity through it. Not only does it give the web designer control over the appearance of the web pages but also aids in creating a visual-hierarchy through parameters like shape,color, space and size.

So let’s dive into this tutorial and learn the different ways of how we can change font color and also change text color in CSS.

Setting up a HTML file

Let’s create a HTML file named Index.html. We will call its CSS file as style.css. Using this file, you will learn how to change text color in CSS.

After adding the required boilerplate, the contents Index.html are as follows –

Learning how to change text color in CSS

We can change text color in CSS quite easily. There are three techniques we can use which are as follows-

Using color keywords to change text color in CSS

To change text color in CSS, you can use the color keywords to achieve this.

The font color will successfully be changed to red from the default color.

Using Hexadecimal values to change text colors in CSS

More often than not, while designing a website, there could be a specific color scheme or brand kit that you might be required to use. This cannot be possible if you are using color keywords such as blue, green, red etc. So you can now learn to use the hexadecimal values to change the font color of the paragraph elements.

Let’s take a look how you can achieve this –

Add the following code to style.css. This will change the color of the paragraph elements to a specific shade of blue of our choice.

Using RGBA color values to change text color in CSS

RGBA color value manipulation is also a good way to change text color in CSS. The RGBA abbreviation stands for Red, Blue, Green and Alpha. The Alpha value controls the transparency of the color. For example, if the value of Alpha is set to 1- it means the color is completely opaque. On the other hand, when it is 0.75, it suggests the color would be only 75% opaque or 25% transparent.

So here is how you will change the color of our h2 tag in Index.html using the RGBA color values –

Once the above code is added to the style.css file, you can say that you know how to change font color in CSS.

Conclusion

Now you know how to change font color in CSS efficiently. Although this can be achieved through internal CSS and inline CSS as well, the best practice remains using an external CSS file just like you did in this tutorial.

So now the next time someone asks you “How to change the font color using CSS?”, you will not only be able to tell them how to do that but also share some tips about different font properties as well!

In this tutorial, we covered the three different ways you can change font color in CSS. To sum it up, they are-

Fundamental text and font styling

In this article we’ll start you on your journey towards mastering text styling with CSS. Here we’ll go through all the basic fundamentals of text/font styling in detail, including setting font weight, family and style, font shorthand, text alignment and other effects, and line and letter spacing.

What is involved in styling text in CSS?

Note: If the above paragraph leaves you feeling confused, then no matter — go back and review our Box model article to brush up on the box model theory before carrying on.

The CSS properties used to style text generally fall into two categories, which we’ll look at separately in this article:

Note: Bear in mind that the text inside an element is all affected as one single entity. You can’t select and style subsections of text unless you wrap them in an appropriate element (such as a or ), or use a text-specific pseudo-element like ::first-letter (selects the first letter of an element’s text), ::first-line (selects the first line of an element’s text), or ::selection (selects the text currently highlighted by the cursor).

Fonts

Let’s move straight on to look at properties for styling fonts. In this example, we’ll apply some CSS properties to the following HTML sample:

Color

The color property sets the color of the foreground content of the selected elements, which is usually the text, but can also include a couple of other things, such as an underline or overline placed on text using the text-decoration property.

color can accept any CSS color unit, for example:

This will cause the paragraphs to become red, rather than the standard browser default of black, like so:

Font families

To set a different font for your text, you use the font-family property — this allows you to specify a font (or list of fonts) for the browser to apply to the selected elements. The browser will only apply a font if it is available on the machine the website is being accessed on; if not, it will just use a browser default font. A simple example looks like so:

This would make all paragraphs on a page adopt the arial font, which is found on any computer.

Web safe fonts

Speaking of font availability, there are only a certain number of fonts that are generally available across all systems and can therefore be used without much worry. These are the so-called web safe fonts.

Most of the time, as web developers we want to have more specific control over the fonts used to display our text content. The problem is to find a way to know which font is available on the computer used to see our web pages. There is no way to know this in every case, but the web safe fonts are known to be available on nearly all instances of the most used operating systems (Windows, macOS, the most common Linux distributions, Android, and iOS).

The list of actual web safe fonts will change as operating systems evolve, but it’s reasonable to consider the following fonts web safe, at least for now (many of them have been popularized thanks to the Microsoft Core fonts for the Web initiative in the late 90s and early 2000s):

Note: Among various resources, the cssfontstack.com website maintains a list of web safe fonts available on Windows and macOS operating systems, which can help you make your decision about what you consider safe for your usage.

Note: There is a way to download a custom font along with a webpage, to allow you to customize your font usage in any way you want: web fonts. This is a little bit more complex, and we will discuss it in a separate article later on in the module.

Default fonts

The five names are defined as follows: