Author
Fonts play a huge role in web design and user experience. A well-chosen font makes a website look professional, modern, and easy to read. But not all devices have the same fonts installed. That’s where Web Fonts come in.
Web fonts allow developers to use custom fonts on websites that work across all browsers, even if the user doesn’t have that font installed on their system.
Using @font-face
The @font-face rule lets you load a custom font directly from your server. You provide the font file (e.g., .woff2, .ttf) and define how it should be used.
@font-face {
font-family: "MyCustomFont";
src: url("fonts/MyCustomFont.woff2") format("woff2"),
url("fonts/MyCustomFont.ttf") format("truetype");
}
body {
font-family: "MyCustomFont", sans-serif;
}
Google Fonts is the most popular way to add fonts to a website. It’s free, easy to use, and optimized for performance.
Example: Adding Google Fonts
<link> tag into your HTML <head><link href="<https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap>" rel="stylesheet">
The @font-face rule is used to define custom fonts. You provide a name for the font (via font-family) and point to the font file using src. Once defined, you can use that font anywhere in your stylesheet.
Example:
@font-face {
font-family: "MyFirstFont";
src: url("fonts/myFirstFont.woff2") format("woff2"),
url("fonts/myFirstFont.ttf") format("truetype");
}
body {
font-family: "MyFirstFont", sans-serif;
}
Different browsers support different font formats. To ensure cross-browser compatibility, developers usually provide multiple font file types.
Example file: OpenSans.ttf
@font-face {
font-family: 'OpenSans';
src: url('OpenSans.ttf') format('truetype');
}
Example file: Roboto-Regular.otf
@font-face {
font-family: 'Roboto';
src: url('Roboto-Regular.otf') format('opentype');
}
Example file: Lato-Regular.woff
@font-face {
font-family: 'Lato';
src: url('Lato-Regular.woff') format('woff');
}
Example file: Montserrat.woff2
@font-face {
font-family: 'Montserrat';
src: url('Montserrat.woff2') format('woff2');
}
Example file: IconFont.svg
@font-face {
font-family: 'MyIconFont';
src: url('IconFont.svg#MyIconFont') format('svg');
}
Example file: Verdana.eot
@font-face {
font-family: 'Verdana';
src: url('Verdana.eot'); /* Old IE support */
}
If your font has multiple weights (regular, bold, italic), you need to define separate @font-face rules for each style.
Example:
@font-face {
font-family: "MyFirstFont";
src: url("fonts/myFirstFont-Regular.woff2");
font-weight: normal;
}
@font-face {
font-family: "MyFirstFont";
src: url("fonts/myFirstFont-Bold.woff2");
font-weight: bold;
}
Inside @font-face, you can use several descriptors:
| Descriptor | Values | Description |
|---|---|---|
font-family |
Custom name (e.g., "MyFont") |
Defines the font name (required). |
src |
URL to font file(s) | Defines where the font is loaded from (required). |
font-stretch |
normal, condensed, expanded, etc. | Defines how the font should be stretched. |
font-style |
normal, italic, oblique | Defines the font style. |
font-weight |
normal, bold, 100–900 | Defines the font thickness. |
unicode-range |
e.g., U+0-5FF |
Defines which characters are supported. |
If you don’t want to host fonts yourself, Google Fonts is the easiest solution. It offers 1,400+ free fonts optimized for the web.
Example: Adding Google Fonts
In HTML:
<link href="<https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap>" rel="stylesheet">
In CSS:
body {
font-family: "Roboto", sans-serif;
}