How to Use CSS Custom Fonts Effectively

In the past, browsers offered only a limited selection of fonts for websites, so every website had to rely on basic default options. However, as web technologies evolved and browsers advanced, the need for custom fonts arose.Choosing the right fonts is crucial to match a website’s concept, as many businesses have unique ideas that cannot be fulfilled using standard system fonts. This is where CSS custom fonts come into play.

CSS custom fonts are essential in shaping overall web design. Adding custom fonts to a website enables the use of diverse fonts that meet business needs and add a unique touch. Selecting the right font is a vital step in modern web design.

Understanding CSS Custom Fonts

CSS custom fonts are not included in the system’s default list of fonts. Unlike system fonts, custom fonts are fetched from hosted servers or self-hosting services and dynamically loaded on the website or webpage. This allows developers to select a font that aligns with the brand’s identity and seamlessly integrate it with the website.

Focusing on the fonts developer must add or create fonts that are easy to read and provide a unique touch to the entire website. Therefore developer must add a typograph to their website design checklist.

Before you get started with the complete setup for using the CSS custom fonts, it’s important to understand how you will proceed and what libraries or tools are needed to get started.

For this demonstration, let’s use CSS custom fonts to style the landing page for the LambdaTest Enterprise page.

Now that you have an idea of the process, you’ll need a code editor. For demonstration purposes, we will use VS Code, but you can choose any editor you prefer.

Once you’re ready, create a project folder on your local system, open the same folder in your code editor, and create two files: index.html for the HTML code and style.css for the CSS code. These files will serve as the foundation for the project.

Then, add the following HTML and CSS code to these files.

File name: index.html

File name: style.css

The above code will set up the website’s initial skeleton with content and some basic styling. Save both files and open the index.html page in your browser.

The browser should show a website similar to the image below.

In the code, the font property in the CSS file is not yet defined. To find out which default font is being used, you can inspect the website using the browser’s built-in Inspect tool either by right-clicking anywhere on the website or webpage or by using the alternative shortcut keys:

• Windows devices: Press Ctrl + Shift + I.
• Mac devices: Press Cmd + Option + I.

This shortcut opens the browser’s Inspect panel. Then click on the Inspect Element tool (represented by an arrow icon at the top left of the panel) and select the text to know more details.

As shown in the image below, you can observe different properties of the web element, including the font, color, padding, and other accessibility values.

As you can see from the above image, the font family is set to Times New Roman. This happens when the font is not defined by the user in the style sheet; the browser loads a font already installed on the user’s computer as a default font. This default font is called a system font, and Times New Roman is one of them.

Let’s try adding some fonts and observe how the browser behaves. In the style.css file, add a font-family CSS property to the body selector and save the file.

The above font-family CSS property specifies a font stack. A font stack is a list of fonts that allows you to write various fonts available, separated by a comma so that the browser uses the available font to display text. What happens here, If the first font is unavailable on your system, the browser will attempt to load the second font, and if the the second font is also unavailable in your system, the browser will load the third font, and so on.

Now that you have defined the font style of your choice to verify it, you can inspect the font of the website again if you notice the text on the website now shows the ‘monospace’ font that you specified in the CSS font-family property.

There are a few more font-family related properties that will help you style the textual elements on the website or a webpage.

CSS Property	Description
font-weight	Add weight to the font. The lower the weight, the lighter the font
font-style	Add style to the font. Style can be italic, normal, or oblique.
font-size	Manage the size of the font.

Let’s add the other font-related CSS properties to the font you have used in the style.css file.

File name – style.css

After saving the files and refreshing the website, the text will be styled differently.

Let’s learn how to load CSS custom fonts from a font-hosting service and how you can use them on the website.

Loading Custom Fonts From a Font Hosting Service

There are some hosted font services like Google Fonts, Adobe Fonts, and My Fonts that provide a large library of custom high-quality fonts. Most of the fonts on these websites are open-source and can be used free of charge.

Using such font services, you can load fonts on a website even if the font is absent from the user’s system. For this section, we will use Google Fonts to import the CSS custom fonts on the website.

To understand this better, let’s use Google Fonts as an example to import the CSS custom fonts on the website.

Follow the below steps:

1. Open the website fonts.google.com.
2. Search for ‘Poppins’(You can search for any font of your choice, for demonstration purposes, we will be using the Poppins font).
3. From the list, click on the link that will take you to the Google Fonts Poppins page. Each variation of the font has a unique style, so it needs to be downloaded if you need it on your browser.
4. Click on the Get font button to utilize the same on the website.

Downloading all fonts will increase the file size and slow down the website. Therefore, you should only choose or download the font variations that you want.

For demonstration purposes, let’s select the Regular 400, Regular 400 Italic, and Bold 600 fonts. Once you select these fonts, the Google Fonts website will open a sidebar with the selected fonts. Copy the <link> tag provided in the code section.

Let’s return to the code file and paste the tags into the HTML file. Paste these <link> tags inside the <head> tag of the index.html website. The final code should look something like this.

File name – index.html

The first two <link> tags with rel=”preconnect” attribute perform the pre-connect task, which tells the browser to prioritize an external web connection.

The next <link> tag tells the browser the location from where the CSS for the fonts should be loaded. These three tags together will load our selected Poppins font variants and insert them into the website for use.

Now that the fonts are fetched and inserted in the code, you just need to tell the browser where to apply those fonts to the website. To do so, open the style.css file and change the font-family CSS property to reference the fetched Poppins font. Add the Poppins font as the first font in the font-family CSS property and save the file.

This will tell the browser to load the Poppins font if it is available or to fall back to the next font if not. Save the style.css file and open the browser tab. The text on the website should be rendered using the Poppins font. You can cross-check it again by inspecting the web element, such as the text on the website.

This is a simple and effective way of loading the CSS custom fonts on a website using a Google Fonts-hosted service. This approach is great for small projects and when the font is of your choice.

Further, we will learn how to self-host the fonts by loading them on the website using the @font-face CSS rule.

Loading Custom Self-Hosted Fonts

Self-hosted fonts are custom fonts hosted and maintained on your server and usually stored along with all other assets used on a website. CSS custom fonts remove the dependency on an external font service. This approach provides more control over fonts while maintaining privacy, and security and also improving the website performance.

Let’s see how exactly we can use it.

CSS @font-face rule

The @font-face rule is a CSS at-rule used to load the CSS custom fonts from a remote server. This rule allows fonts that are not pre-installed on the user’s device to be loaded and used on a website. By using the CSS @font-face rule, you can define the location of the font files and assign a font family name to the custom font.

In contrast to other CSS rules, the @font-face rule accepts a collection of values, such as src, font-family, etc., within the rule block and does not require additional arguments. The url() and local() attributes may be used to load both local and distant fonts using the font-face rule.

Below is the syntax of the CSS @font-face rule:

Before using the CSS @font-face rule, you must download the CSS custom fonts to host on your server and load on your website. To do this, visit the Google Fonts Poppins page, where you select styles of the Poppins font and click on the Download button.

Then, browse to the downloaded folder and extract it. The extracted folder will contain fonts with the .ttf extension. While the .ttf extension works well in most cases, to ensure cross-browser compatibility and accessibility on older browsers, the font should be added with 5 different extensions. The extensions are:

Extensions	Name
.ttf	TrueType Font
.woff	Web Open Font Format
.woff2	Web Open Font Format -2 (Compressed)
.eot	Embedded OpenType
.svg	Scalable Vector Graphics

To transform the fonts into these extensions, use an online tool called Transfonter. Open the transfonter.org website on your browser and add the font files you need for your website, such as Poppins-Regular.ttf, Poppins-Italic.ttf, and Poppins-Bold.ttf.

Now, add these fonts to the website using the Add fonts button. Once the fonts are added, checkmark all the extensions you want. After selecting the extensions, click on Convert. Once the conversion process is completed, you will get a download link. Click on the link and download the converted fonts. The browser will download another zip file; unzip it, and you will find all the converted fonts.

With the fonts in place, go back to your code and add the CSS custom fonts to the website. Create a separate fonts folder inside the code folder. Paste all the font files into this folder. It is a good practice to keep your assets (fonts, images, logos, etc.) in a separate folder and your code files in a separate folder.

Let’s import these fonts into the code using the @font-face rule. Go to the style.css file and add the code block below at the file’s beginning.

The above code gives the name Custom Poppins to the imported font using the font-family property and provides the source of the font files using the src property. The first src provides the path to the font file located on the server and the second src provides the different referenced files along with their file format. You can also add an optional local() value that will try to fetch the font from the user’s device if present.

Now that the @font-face rule is created and references the local custom font let’s update the body selector with our custom font. Since you have named the font as Custom Poppins within the @font-face rule, replace the Poppins with Custom Poppins.

Now, the website will load our self-hosted Custom Poppins font on the website. Also, remove the <link> tag from the HTML file since now we no longer need to fetch the custom font. Save the files and refresh the website.

Now when you visit the website, you can see the same as before, with the exception that you no longer retrieve the font from a font server and instead use a locally hosted font.

If you look very closely, the regular font looks perfect but the bold and italic font looks a bit off. This is because the @font-face rule only loaded the regular font. When the browser is unable to find bold and italic fonts, it takes the regular font and converts it into bold and italic fonts on its own. These browser-generated variations are called Faux fonts.

A Faux bold font is created by adding an extra stroke to the regular font, while a Faux Italic font is created by slightly slanting the regular font. To provide the browser with appropriate variations of the font, you need to add @font-face rules for all the variations that you use on the website.

Let’s open the style.css file and add the @font-face rule for Bold and Italic versions. Paste the following code below the existing @font-face rule and save the file.

After reloading the website, the browser will now load the true variations of the font.

With that, you have successfully self-hosted the CSS custom fonts and loaded them into your website using the @font-face rule.

Advantages of Using CSS Custom Fonts

Below are a few advantages of using CSS custom fonts.

Improves Branding

CSS custom fonts allow developers to overcome the limitations of using system fonts and incorporate a font that aligns with the brand identity. Consistent CSS custom fonts follow the brand’s identity, making it recognizable and trustworthy and stand out among other websites.

Here are some popular websites that use CSS custom fonts.

• Brand: Apple

Font used: SF Pro



• Brand: Netflix

Font used: Netflix Sans



• Brand: Microsoft

Font used: Segoe UI.



To improve the branding of your website, you can apply some CSS tricks and technologies that will help enhance your website’s look and feel and help you build a unique-looking website that is easy to use.

Improves Readability and Aesthetics

CSS custom fonts can be fine-tuned to enhance readability, making the content more user-friendly. For example, Wikipedia, which is well known for its heavy content, uses a sans-serif font. The sans-serif font is simple yet elegant, making it easier for users to read long textual content.

The typography skills you apply directly impact the legibility and aesthetic appeal of your website across different screen sizes. To achieve an aesthetic feel, having the right typography skills directly impacts the visual appeal of your website

Freedom to Choose

The ability to move beyond system fonts and embrace a wider variety of CSS custom fonts opens up new possibilities for developers. They can either choose from the long list of custom fonts provided by several font services or can even create a completely new font of their own. This leads to the creation of more original and distinct-looking websites that attract and retain users regularly.

Cross-Browser Compatibility

The CSS @font-face and Font Loading properties are widely supported by all browsers as these properties ensure that the font you import or create works correctly across different browsers and devices. Different browsers support varying levels of custom fonts, so ensuring that the fonts you imported or created display consistently can enhance the overall user experience.

Source

Source

Developers and testers need to ensure that their websites are responsive across various browsers. This means that every button, layout, image, font and other visual element must adjust to any given screen size. To ensure this, you can use a cloud-based platform that will help you validate the responsiveness of your website across a wide range of browsers by eliminating the need to install multiple browsers on your local system.

One such platform is LambdaTest, an AI-powered test execution platform that offers various responsive checker tools, such as LT Browser. It helps you validate your website’s visual appearance and functionality by performing typography and cross browser compatibility testing across 53+ different devices and viewports.

DOWNLOAD LT BROWSER 2.0

With LT Browser, you can compare them side by side while synchronizing interactions like scrolling, clicking, and navigating. It includes pre-installed viewports for mobile devices, tablets, desktops, and laptops.

Improving Performance and Experience Using Font-Display

Using the CSS custom fonts on a website can cause a loading delay because the browser needs time to fetch and apply them. Initially, the browser displays text in a default font, then switches to the custom font once it’s loaded. This delay may be longer if the font is loaded from an external server.

The change in fonts happens within milliseconds and causes a sudden flash of font changes. This is called FOUT(Flash Of Unstyled Text). FOUT can affect the overall user experience of the website and also its performance, as the sudden switch to a different font causes the browser to perform the layout operation again.

To avoid this, you can use the CSS font-display property inside the @font-face rule. The font-display property controls how the browser loads the fonts on the website. To handle the CSS font loading problem more gracefully, the font-display property takes one of the 5 values.

Property	Description
font-display: auto;	Uses the browser's default behavior
font-display: block;	Text is hidden until the custom font is fetched.
font-display: swap;	The text is displayed in system font first and then swapped to a custom font once it is fetched.
font-display: fallback;	The text is hidden for a short period. If the custom font is not loaded during this period, the custom font is discarded, and the default font is added.
font-display: optional;	A brief period is provided for the font to load. If it still hasn't, a default font is loaded and added to the text. The custom font is loaded in the background and applied on subsequent page loads.

The optional value of the font-display property is the perfect solution for managing font loading situations. Let’s add this property to all the @font-face rules in the style.css file.

Now that the CSS custom fonts are applied to the website, it provides a smooth user experience if the fonts are loaded quickly. If they fail to load quickly, the fonts will be loaded in the background and applied upon refreshing or page reloads, thus improving the user experience.

Conclusion

Fonts are the core asset to make your website stand out. By using the correct fonts you can make a basic-looking website into an extraordinary one. As you have understood the CSS custom font and how fonts work on a website, you can add the CSS custom fonts to a website either by loading them from a font service or self-hosting them along with other assets. Now it’s your turn to experiment with the CSS custom fonts and elevate the design of your website.

I hope this was helpful and gave you a deep understanding of CSS custom fonts. Happy Coding!

Citations

• Font style: https://developer.mozilla.org/en-US/docs/Web/CSS/font-style
• Google Font Knowledge: https://fonts.google.com/knowledge
• Applying Typography in CSS:
  https://www.washington.edu/accesscomputing/webd2/student/unit3/module3/lesson2.html
• Optimal Size And Font For Mobile Learning: https://journal.umy.ac.id/index.php/eist/article/download/16895/8242