html allows you to import any font that you want from the internet! use it whenever you get bored of the default css font select.
modern browsers usually support four font formats: TTF/OTF, and WOFF/WOFF2. TTF and OTF were designed for use on desktop OSs Mac OS and Windows (cause .ttf was developed by apple and microslop), while WOFF and WOFF2 were originally to reduce file size, which makes them the best choice for web design.
adding a custom font requires name for your font. it can be set using font-family descriptor:
@font-face {
font-family: example_font;
}
to import your custom font, you must link a source to it using src descriptor, with url() follow it. inside the brackets you can put any path that reaches the font file: it can be either a file in the root directory or a file from an external server. remember that there are CSP and CORS and all the cross-origin stuff so um be aware
@font-face {
font-family: example_font;
src: url(awesomeFont.woff2);
}
font-family and src are the only properties that require defining for the rule to work. the rest of the options are optional!
allows you to set the weight of the custom font. note that if the font has multiple boldness variants, you will have to make a rule for each font weight. font-weight values are: normal, bold, bolder, 100, 200 up to 900, the same values that you use in css.
@font-face {
font-family: example_font;
src: url(awesomeFont.woff2);
font-weight: 400; /*fonts default value is 400, its optional*/
}
@font-face {
font-family: example_font_bold;
src: url(awesomeFont.woff2);
font-weight: 700;
}
@font-face {
font-family: example_font_black;
src: url(awesomeFont.woff2);
font-weight: 900;
}
@font-face {
font-family: example_font_extra-light;
src: url(awesomeFont.woff2);
font-weight: 200;
}
unlike css, font-style allows you to set the cursive version of the font, so it only supports normal, italic, and oblique values. if youre wondering whats the difference between the two styles: italic is a custom-designed, cursive-styled version of the font, which usually resemble of handwriting. oblique, however, is a mechanically skewed version of the standart roman (upright) font, which doesnt change the structure of the letters.
@font-face {
font-family: example_font_italic;
src: url(awesomeFont.woff2);
font-style: italic;
}
font-display defines how the load fonts and displays on the page. supports five values: auto, block, swap, fallback, optional.
block gives the custom font a short period when the text appears invisible, called block period, and an infinite window for the font swap. using this option, the text will not appear on the page until the font is done donwloading.
swap gives the text a very short period of invisible text (practically none), but leaves it with an infinite swap period. this means that the moment the text with the missing font appears on the page, the browser renders it with the fallback font, but then swaps it with the custom font as soon as it loads.
fallback gives a very short block period like swap, but also gives the font a short swap period. the browser will swap the typeface if the custom font loads even late, but if it takes too long to load, the browser will keep the fallback font for the rest of the session even if the custom font loads after the period ends.
optional gives the typeface little block and swap period, but it lets the browser decide to load the font or not: if it downloads quickly enough before the block period ends (about 100milliseconds) or if the font is already cached on the user's device, it swaps the fallback typeface with the custom one, however if it isnt either cached or user's network speed is too slow to download the font, the browser keeps the fallback typeface for the rest of the session.