The fastest-loading fonts are going to be the fonts that don’t have to be downloaded in the first place — system fonts:
font-family: system-ui, sans-serif;
Added bonus: these come with a lot of font weight options.
So, use those if you can. If externally-loaded fonts are a must, then–
Since hosting one’s own font files is the preferred method, upload the fonts to wherever on your server and use the following in your stylesheet. Worth noting that according to people who actualy checked, browsers are smart enough to not download a font that is @font-faced unless it’s actually used somewhere, so feel free to be ‘generous’ if you’re not sure which font varieties you’ll need when you start. Lastly, remember that the path to the font file is relative to the stylesheet.
@font-face {
font-family: "Poppins";
src: url('poppins-font/Poppins-Regular.ttf') format('truetype');
font-weight: 400;
font-style: regular;
}
@font-face {
font-family: "Poppins";
src: url('poppins-font/Poppins-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: regular;
}
@font-face {
font-family: "Poppins";
src: url('poppins-font/Poppins-Italic.ttf') format('truetype');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "Poppins";
src: url('poppins-font/Poppins-SemiBoldItalic.ttf') format('truetype');
font-weight: 600;
font-style: italic;
}
Sample given includes references to individual files provided in the poppins-font directory. Font-weight was taken from Google Fonts and matched up, as was the font-style.
Note that bold is not specified as a font-style (though it could be) but is instead specified as a font-weight.
Fonts could then be referenced normally:
.p{
font-family: Poppins, Aria, serif;
font-style: italic;
font-weight: 600;
}
Note that the process is slightly different for loading vector fonts:
@font-face {
font-family: "Poppins";
src: url('poppins-font/Poppins-Regular.woff2') format('woff2');
font-weight: 0 1000; //these two values act as a range
font-display: swap;
}
.p{
font-family: 'Poppins';
font-weight: 500;
}
Before using vector fonts, watch this: