DEV Community

Cover image for Using Custom Fonts In CSS
enigma6174
enigma6174

Posted on

Using Custom Fonts In CSS

Fonts are a crucial aspect in any application and a good font can do wonders, pull in more users and get you great reviews. On the other hand, a bad font can break your application and put off users and leave a sour taste in the mouth.

It all comes down to user experience and knowing how to customise fonts is an important aspect of application development. A good developer not only knows the best font to pick but also the best practices when selecting fonts.

Fonts can be default (browser rendered) or custom (rendered through an API like Google Fonts) and it is important to know how to work with both.

The font can be set as a CSS Rule using the property font-family and then specifying the value(s) that we want to use as font. It is often a good practice to specify more than one value so that there is always something to fall back upon in case the first specified font value cannot be rendered.

The syntax to set the font-family property (for example on h2 element) is as follows:

h2 {
  font-family: serif;
}
Enter fullscreen mode Exit fullscreen mode

However, as I mentioned earlier, it is always a good practice to include more fonts in the family as defaults

h2 {
  font-family: serif, monospace;
}
Enter fullscreen mode Exit fullscreen mode

We can use fonts from default font family that is supported by the browser for example serif, monospace etc.

To access the list of browser default fonts available, go to

Chrome -> Settings -> Appearance -> Customise Fonts

Fonts like sans-serif, serif and monospace are safe options because they use the browser default fonts so we can rely on them to always render the text properly.

To use specific fonts we can use Google Fonts (basically they provide access to fancy fonts without us having to download them).

To select a custom font, visit the Google Fonts homepage

google-fonts-homepage

Select any font of your choice (we will be going with Roboto) by clicking on the card. You can now select any font of your choice by clicking on the + Select this style button on the right hand side and you will see the corresponding <Link> tags and CSS rules appear on the panel on the right as shown below. Copy the link tags and paste them in the HTML file. Copy the CSS rules and paste them in the CSS stylesheet linked to the HTML file.

select-google-font

Since the fonts from Google Fonts are not installed on the user machine or available in browser by default so the html needs to be instructed how to render the fonts. This can be done by using the <Link> tag and specifying the font-family in CSS Rules

The syntax to include a custom Google Font in our HTML file is

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap"
    />
    <link rel="stylesheet" href="assets/styles/index.css" />
Enter fullscreen mode Exit fullscreen mode

The CSS rules for the above fonts would be

h1 {
  color: white;
  font-family: "Poppins", sans-serif;
}
Enter fullscreen mode Exit fullscreen mode

Remember to link it above the main css file so that the required font family can be accessed in the main css file and applied to html elements.

This covers an introduction to using fonts in our web development projects! While the concept of custom fonts is huge and complex, consider this as a starting point. Be sure to check out the following StackOverflow answers for some insights into fonts.

Should we link or import Google Fonts?

Obmerk Kronen's answer on using Fonts via CDN

For the complete CSS and HTML code examples, you can access my Github repo (remember to check the folder introduction for this code)

GitHub logo enigma6174 / css-course

A collection of resources to help learn CSS

Understanding CSS

If you liked this article and want to stay updated with more such articles, support me by following me on DEV and Twitter

I write about web development, AI, cloud, entrepreneurship, technology and anything else that excites me!

Discussion (0)