The opposite of a system font, a web font is any typeface used in a website's design that isn't automatically loaded on the user's device.
The expanded support for
@font-facedeclarations in CSS and the WOFF file format by popular browsers contributed to the widespread use of web fonts between 2009 and 2011.
The compressed file formats WOFF (and WOFF2, its descendant) were developed especially for online fonts. While normal OpenType fonts (TTF and OTF files) can be used as web fonts, doing so is generally discouraged due to license agreement violations and the fact that the files are much larger. Desktop PCs often do not support the installation of WOFF and WOFF2 fonts.
It should be noted that web fonts are resources that must be downloaded, which has an impact on page load speeds overall. In other words, the more web fonts we employ, the slower our websites will load. Using various typefaces may be able to counteract this.
Using a @font-face declaration, we must first establish a family reference for the font files we are loading in our CSS file. (We advise loading our fonts using a specific CSS file.)
We can call our family name whatever we like, but the path to the font file needs to be exact. It's not even required that it be connected in any way to the typeface's real name, however it is advised to keep them constant. (Take note that there shouldn't be a space—this is a typical mistake—between the url and the opening parenthesis.)
@font-face {
font-family: 'FAMILY_NAME';
src: url(FONT_FILE_NAME.woff2) format('woff2');
}