You can use CSS to achieve a range of different styles on a web page; if you want to change the color of your text, there’s a CSS property for that. And if you want to change the position of a text on your web page—or the type of text displayed on your site—you can.
Developers use the font-family property to select different font types for websites. In this tutorial article, you’ll learn all you need to know about changing the text on your website using this.
What Is the Purpose of Text On a Website?
Text plays a critical role in a website’s development process and provides essential information to users. It is one of those things that no one notices until it’s used incorrectly. With all the new and exciting font types available, it’s easy for a developer to forget the true purpose of website text.
If users can’t read the information on a website, they might not know what the site is about—or how to use it. Therefore, choosing the correct font type is crucial.
What Is the font-family Property?
Font-family is a CSS property used to set the font type on a website. This property is generally assigned a value that contains several font names in what is designed to be a “fallback system”. The “fallback system” ensures compatibility between your website and the different types of browsers a visitor to your site might use.
A comma should separate each font type in the value assigned to the font-family property, and in instances where a font name contains more than one word, you should use a quotation mark.
Font-Family Syntax Example
selector{
font-family: firstFontType, 'second font type', genericFontType;
}
The selector in the example above can be an ID, a class, or an HTML element. Generally, the selector is the body element, which ensures that every world on a given web page belongs to the same font family.
The font-family property is generally assigned a stack value that contains several options. The example above has three options, but you can have more. Utilizing the fallback system, the browser will check if the first font type is available in its local files. If it’s not, the browser will then check if the second font type is available.
The generic font type in the example above, is the font family that the previous font types in the stack belong to. Therefore, if a browser cannot display any of the preferred font types, it will choose a font type in the same font family from its local files.
Below are the different font types you can use:
- Serif
- Sans-serif
- Cursive
- Fantasy
- Monospace
Examples of the font-family Property in Action
Popular browsers, such as Google Chrome and Firefox, use Times New Roman as their default font type. However, you can specify the font type for your website using the font-family property.
A web page that doesn’t use the font-family property will produce the following in your browser.
To change the text in the image above, you’ll need to use the body element, which targets all the text on a web page.
Using the font-family Property On Body Text
body{
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
The code above sets the font family on a web page to Franklin Gothic Medium; if that font isn't available in the browser’s local file, it will move on to the Arial Narrow font. The final font type in the stack is Arial, and if it’s also unavailable, the browser will choose an available font type from the generic font family: sans-serif.
There’s a list of web-safe fonts that developers should become familiar with. These font types are classified as web-safe because of their popularity. So, the browser on which a user views your website will most likely have this font type in its local files.
However, you can still use less popular fonts on your websites, though you might need to include the font file in the website files that you deploy.
The code mentioned at the beginning of this section will produce the following output in the browser.
The difference between the Franklin Gothic Medium and the default Times New Romans font type is striking. This is because the Franklin Gothic Medium belongs to the sans-serif font family and the Times New Romans belongs to the serif family.
Though it’s not a very common practice, some websites have different font types on a single web page. For instance, if your goal is to use two font types on your web page, you can use a class or an id selector to accomplish this.
Block Font Types Example: Using ids
#content-1{
font-family:'Courier New', Courier, monospace;
}
If your goal is to change the text of a single paragraph in a group (as is usually the case with block quotes), you can also target specific paragraphs with IDs. The code above uses an ID to change the font type of the second paragraph (within a group) from the default Times New Romans font type to the Cursive font type. You can see the effect of this code in the image below.
Selecting Font Types For Headings Example: h1 Selector
h1{
font-family: Arial, Helvetica, sans-serif;
}
The code above will produce the following output in your browser.
The paragraphs in the output above use the default Times New Romans font, but the Headings use the Arial font type. The reverse can be accomplished by simply replacing the h1 selector in the code above with the p selector. This change will cause all the paragraphs on the web page to take the Arial font type, and the headings will revert to the default Times New Romans font type.
Now You Can Change Your Website’s Text With the CSS font-family Property
Now you have the skills to change the text on your website, and you should also know that selecting the correct font type for your website is important. Another crucial takeaway is that there’s a list of web-safe fonts that you can get acquainted with.
Another good CSS property to learn at this stage is the text-align property. This property allows you to position your text at different locations on your website, which is another essential skill for every front-end developer.