Hey there @anightingale, welcome to the forums!
There’s a few ways that you can introduce a new typeface, or font, in to your CSS.
One way is to use a web-based resource, like Google Fonts or Adobe Fonts. They provide you with a pre-prepared block of code to add to your HTML to include the font, or fonts, you want to use.
If, say, you don’t want to rely on a third-party to provide the font - let’s say you’ve designed a great typeface of your own which you want to use - you can host the font files locally on your web server and serve them from there.
In that case, since we’re hosting the fonts locally on the server, we can include the font with the
@font-face declaration in the CSS and point the
src attribute to the appropriate font file. Like so:
src: url(fonts/Roboto.woff2) format('woff2'),
The reason we need to include
format('woff2'), for example, is because fonts come in a variety of formats. In the code segment above, we’re including the Roboto font, and providing three different formats for the browser to choose from -
woff are Web Open Font Format files, and
truetype is a TrueType font. (There’s also an OpenType format.)
You need to tell the browser what format the font is in, because not all browsers support all font formats. For example, to the best of my knowledge right now, neither Internet Explorer nor Safari support WOFF2 fonts so you need an alternative - like WOFF, or TrueType.
Hope that explains it a bit better, but if you’re still confused (or I’ve made it worse) let us know.