Using custom fonts in CSS
The font is the most fundamental property of a page after color.
Introduction
Contents on a webpage are made accessible to the readers using typefaces and colors. User-agents (browsers) use pre-installed system fonts to display web content.
These pre-installed fonts are different on all types of systems, especially by Operating system. A font in an Apple device might not be found in a Windows system. To handle this, custom fonts are used to ensure similarity across all devices.
CSS Font
Generally, to apply a font on an HTML element, the CSS font-family property is used.
Font-family is used as a CSS property to an HTML element. The value of the font-family property is a prioritized list of one or more font family names and/or generic family names for the selected element.
Since not all fonts are available on all computers, CSS provides a system of fallbacks. You list the font that you want first, then any font that might fill in for the first if it is unavailable, and you should end the list with a generic font. This is called a font stack.
p {
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}The font stack ends with a generic font family (sans-serif). Generic font families are a fallback mechanism and they should be the last item in a font stack.
Generic family names include:
- serif
- sans-serif
- monospace
- cursive
- fantasy
- system-ui
- ui-serif
- ui-sans-serif
- ui-monospace
- ui-rounded
- emoji
- math
- fangsong;
Custom fonts
Browsers by default use custom fonts. They only fall back to system fonts when the custom fonts are not found.
Get Golden Azubuike’s stories in your inbox
Join Medium for free to get updates from this writer.
We will look at 2 ways to use a custom font on a web page.
- Self-hosted fonts
- Externally hosted fonts
Self-hosted font
Self-hosted fonts are fonts that have been downloaded and kept in a directory on the server.
The @font-face at-rule is used to create a font-face for a self-hosted font.
@font-face specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user’s own computer.
@font-face {
font-family: MyAeonik;
src: local("Helvetica Neue Bold"),
local("HelveticaNeue-Bold"),
url(https://medium.com/"../assets/fonts/Aeonik-Bold.otfc");
font-weight: bold;
}
@font-face {
font-family: MyAeonik;
src: url(https://medium.com/"../assets/fonts/Aeonik-Medium.otf");
font-weight: medium;
}
.heading {
font-family: "MyAeonik";
font-weight: bold;
}The url() function is used to provide a self-hosted font (downloadable font). It contains the path to the font. If a match is not found, the font in the local() function is used.
The local() function is used to provide a font name the user-agent will look for in the user’s device. If a match is found, it is used. More than one local font can be used. The topmost is checked first.
Externally hosted fonts
Externally hosted fonts are fonts on hosted fonts services such as Google Fonts. They provide a library of high-quality fonts that will be temporarily downloaded by the client when viewing a webpage.
The hosting services have ways of using their fonts. Google fonts allow the use of the @import at-rule or the <link> element in the header section of a webpage.
The @import at-rule is used to import a CSS module. So, in this case, the font is accessed from a CSS file provided by the hosting services.
@import url(https://medium.com/"https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap");
.synopsis {
font-family: "Noto sans", sans-serif;
}The <link> element is used to link to the necessary font files from the hosting service.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/styles.css" />
<title>Custom Font</title>
<!-- Links from Google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap"
rel="stylesheet"
/>
<style>
.article {
font-family: "Roboto Mono", sans-serif;
}
</style>
</head>
<body>
<a href="./pages/about.html">About</a>
<h1 class="heading_home">
Home
</h1>
<p class="article">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eum, asperiores
delectus consequuntur iusto enim corrupti maxime cumque dolore maiores
consequatur?
</p>
</body>
</html>Conclusion
Custom fonts are native to the user-agent rendering. When there is no custom font, then a local (system) font is used.
When using custom fonts, web-safe fonts should be used so they can be rendered exactly the same on all devices.
In addition to the properties listed in an @font-face at-rule, a font type (format) can be used to list different types of the same fonts so a user-agent can use the one most compatible.
@font-face {
font-family: "Fira Sans";
src: url(https://medium.com/'fonts/fira/eot/FiraSans-Regular.eot');
src: url(https://medium.com/'fonts/fira/eot/FiraSans-Regular.eot') format('embedded-opentype'),
url(https://medium.com/'fonts/fira/woff2/FiraSans-Regular.woff2') format('woff2'),
url(https://medium.com/'fonts/fira/woff/FiraSans-Regular.woff') format('woff'),
url(https://medium.com/'fonts/fira/woff2/FiraSans-Regular.ttf') format('truetype');
}Thank you for reading until the end. Please consider following the writer and this publication. Visit Stackademic to find out more about how we are democratizing free programming education around the world.
Resources
- https://www.w3.org/Style/Examples/007/fonts.en.html
- https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face
- https://www.digitalocean.com/community/tutorials/how-to-load-and-use-custom-fonts-with-css
Thanks for reading.
Kindly clap, comment and share this post with friends.
