In this brief guide, you will learn how to change the CSS font to suit your design. Topics include the font family types, changing fonts, browser fallbacks, and even a dive into the world of typography to support it all.
How to Change The CSS Font Family
Understanding how family works is essential in all walks of life. It helps you know how to interact and work with them. Knowing the CSS font family is no different. The generic font families are ones you should know at a high-level overview. These are the fonts that most modern browsers will support. This is an important point as it helps make sure your selected font type is used on the page.
The generic font families are noted below:
- Serif: This font style is indicated by a small flourish stroke on letter edges.
- Sans-serif: This font style does not include edge strokes. The font is flat and sharp.
- Cursive: A font style that tries to imitate the natural curves of human handwriting.
- Monospace: A font style where all text is at a fixed width creating a very clean no-flair appearance.
- Fantasy: These are more exotic and decorative font styles.
CSS Font Family: Font Names
Knowing the generic CSS font family terms and descriptions helps you get a basic understanding of what their intended uses are in the design sense. However, it’s also important to note that each of those families has various styles within them.
In the list below, you can see some of the common font names of the CSS font family.
Serif Fonts:
- Times New Roman
- Bodoni
- Garamond
- Georgia
Sans-serif Fonts:
- Trebuchet
- Arial
- Verdana
- Helvetica
Cursive Fonts:
- Poetica
- Sanvit
- Brush Script MT
- Ex Ponto
Monospace Fonts:
- Courier
- MS Courier New
- Lucida Console
- Monaco
Knowing the names is great but you also need to know how to set these as desired font options in CSS as well. The next section will cover how to do just that.
How to Change CSS Font
Now, it’s time to dive into the CSS code itself to understand how the CSS font family property works. To start, there is a sample set of HTML code below that will be the target of the practice.
With no CSS changes added, the page should render as shown below.
To use the font-family property, you have to set the property and the value you want to assign.
In the CSS example below, the font-family property has been set to Arial.
The above code provides the following output on the page.
Just like that, the font is ready for use and is visible on the page. Setting the CSS font is pretty easy in that regard. However, there is a bit more to it than just that. When setting the desired font, you should consider what would happen if that font was not supported in the browser the page is rendered in and plan for that instance.
Creating a Backup Font List
When you settle on a CSS font to use, it’s a good idea to have a backup plan if it won’t work in an environment. This is why the value for the font-family property should always hold more than just your desired CSS font choice.
Take a look at the CSS sample code below.
You can see that the first font name used was “Intro Rust”, a font that is not common or considered web-safe font. When you have a situation where the font may not be available for all users, the backup list should be set.
The font list can be set up simply by adding them to the value of the font-family property. There are four rules you need to follow on the backup list.
- Start the list with the fonts you want first.
- Separate the list by using commas.
- When a font name is more than one word, use quotation marks around the name.
- End the font list with a generic font family name.
In the example above, Times was the second choice to use if the Intro Rust font was unavailable. Finally, the monospace generic font family was added to have a default monospace font used if none of the others would work.
Using that code example will generate the following output on the page.
CSS Font: More Than Just Name Changes
Knowing how to change the CSS font family in your HTML is great. It opens up a great sense of creative opportunity to deliver the information from a page in the style you want. However, there is so much more that you can do with fonts.
Within the Udacity blogs, you can find a wealth of information to help you add both decoration and functionality to your web design work. Topics range from setting the HTML/CSS Font Weight to Letter Spacing with CSS.
You can even try to learn some fun aspects of using CSS to add special hover and highlighting effects for your text. The goal should be to keep trying and learning new concepts. The more you know, the more you can build with. Just remember, the key to mastering HTML and CSS is to learn the basics and build on them. Keep your mind open to changes as new ideas and design methods are always brewing within the community.
___________________________________________________
Why stop at just CSS? The creative ability in programming is allowing people to do even more with their ideas. If you want to advance your career, take the first steps by learning to code. Having these skills can help you open doors to those new professional possibilities. Enroll in Udacity’s Intro to Programming Nanodegree today to start the journey.
