As developers, there will be a time when we won’t want to use the default font that’s populated when our HTML is processed and shown on our websites. This article aims to show you how to change the font in your HTML document using best practices.
Change Font with Built-in Font-Family
The first way we can change our font is by using the font-family property in our inline styling. This can be done like so:
<p style="font-family:wingdings;" id="wingdings">New York</p>
We simply use the
font-family property to indicate which font we would like to use in our block of text. Many of the standard fonts are readily available to use.
It’s a good idea to have a backup font, just in case the first font-choice can’t be loaded or is not available for whatever reason on the device that the user has. It’s as easy as adding a comma and the new font-family name. I always end with a generic grouping as well in that one edge case that the first two are not available.
<p style="font-family: Roboto, Lato, sans-serif" id="roboto-plus-backups">New York</p>
The generic grouping at the end is just the default sans-serif font for whatever device the client is using. The generic family names that are available to us: monospace, serif, sans-serif, cursive, and fantasy.
Importing a Third Party Font
If you need to use a font that’s not one of the many available to us by default, you can import one and use it just as you would with a regular font. In this instance, we’ll try to use the ‘Bangers’ and the ‘Yellowtail’ font from Google Fonts:
<p id="sans-serif" style="font-family: Bangers, sans-serif" >New York</p> <p id="cursive" style="font-family: Yellowtail, cursive" >New York</p>
If you were to run the code above in your IDE of choice and load it, it’ll most likely default to the generic fonts given in value of the font-family property. If you would like to use these fonts, you can though with a few simple clicks:
- Visit Google Fonts.
- Take the time to play around with the site if you’d like. There’s so many options for fonts here, and you can customize the sample text with whatever you’d like – there’s an input at top of screen for you to enter in what you’d like.
- Search for ‘Yellowtail’ and click on it. You should come to a screen with detailed information about the font. Look for a ‘ + Select This Style ’ button and click on it.
- A sidebar drawer should have popped out with information about your selection. It’ll stay open while you browse more fonts. Click the Browse Fonts link up at the top of the screen and search for ‘Bangers’. Walk through the same process as you did for ‘Yellowtail’.
- On the sidebar, you’ll see a tab for ‘Embed’. Click on it.
<link>option should already be highlighted. Copy and paste the
<link>into the head of your HTML.
- Follow the guidelines given for how to use each font in CSS. They give recommended backup fonts as well.
- That’s it! You’re ready to use these fonts in your document.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> <link href="https://fonts.googleapis.com/css2?family=Bangers&family=Yellowtail&display=swap" rel="stylesheet"> </head> <body> <p id="courier">New York</p> <p id="roboto">New York</p> <p id="raleway" style="font-family: Raleway, sans-serif">New York</p> <p id="serif" style="font-family: Courier New">New York</p> <p id="monospace" style="font-family: Roboto Monospace, monospace">New York</p> <p id="sans-serif" style="font-family: Bangers, Anton, sans-serif" >New York</p> <p id="cursive" style="font-family: Yellowtail, cursive" >New York</p> <p id="roboto-condensed" style="font-family: Roboto Condensed, sans-serif">New York</p> </body> </html>
Working demo above shows both built-in and third party fonts being used. Try your hand at importing other fonts!