Fonts can be seen throughout the entire application, as they define the appearance of each character on the page!
Developers should only receive fonts used in designs. Otherwise, they will include unused fonts onto a page and they will never be used. This will affect the page performance. The developer will blame you for that.
The page should not have many font faces loaded. All elements may use different font sizes, but there should be no more than 5 font faces on a page. Here are few tips to avoid a large number of fonts loaded on a page:
Eliminate all custom italic font faces. The browser can automatically generate them from non-italic fonts.
<aside> ➡️ Automatically generated italic font (faux italics) will differ from the original italic font. Please consider the frequency of occurrence of italic font. Is it worth loading an additional ±100kb on every page?
</aside>
Decrease the number of font weights on a page. Inspect the page for different font weights. If some font is used on a page just once, feel free to drop it.
You can use the Figma text styles feature (How to use text styles?) in order to quickly glance over all used fonts (if you of course have configured and used this feature), or you can use the Font Fascia plugin to list all used fonts throughout the project.
<aside> ℹ️ Usually, styling this element takes from-to: 2-4h
</aside>
Fonts can be visible in the typography section.
Import a new font into the application to match your theme, and create SCSS variables for using that font.
<aside> ➡️ Important: never ever should the same font-face but different weights are different font families!
</aside>
You need to add your fonts in the /src/style/fonts directory (just simply copy the font files in here, rename them if appropriate), then you will need to define your font faces in /src/style/base/_font.scss:
@font-face { // Medium
font-family: 'Recoleta';
src: URL(../fonts/Recoleta-Medium.woff2) format('woff2'),
URL(../fonts/Recoleta-Medium.woff) format('woff');
font-weight: 500;
font-style: normal;
font-display: swap;
}
Note that we have given 2 sources because .woff2 fonts might not always work, and so it’s better to have a fallback.
Make sure not to give a different font-family name to a different weight of the same font!
The correct way to add a differently weighted font in the same family:
@font-face { // Bold
font-family: 'Recoleta';
src: URL(../fonts/Recoleta-Bold.woff2) format('woff2'),
URL(../fonts/Recoleta-Bold.woff) format('woff');
font-weight: 700;
}
This way, you’ll be able to just simply change the font-weight property to 700, and the font from the Recoleta-Bold.woff2 file would be used!
You should also define some variables to be able to refer to the same font across the project.
Here, the value of the variable must be the name of the font face. In this case, it will be 'Recoleta', as we have named our font: font-family: 'Recoleta' above.
It’s also a good idea to provide a fallback font family here.