To set the font face to use for text in some element, you use the font-family
CSS property, like so:
p {
font-family: "Roboto";
}
You can specify multiple fonts, e.g. font-family: "Roboto", sans-serif;
. Certain
special font names, such as sans-serif
and monospace
, may
vary between browsers but are always available.
The font-family
property can only use fonts that your browser is aware of.
This means that only fonts already installed on the user's computer, or loaded on the page,
will actually appear when specified through this property. If a specified font isn't found,
the browser will fall back to the next font you have specified, or to the default font.
If you want to use an uncommon font on your site, you will need to load it in using CSS.
There are special CSS rules that are used to tell the browser how to load a new font
from the internet, so that it can be used in the font-family
font-family property.
This is done through a @font-face
block, in which you specify the name of
the font and any URLs through which it can be obtained:
@font-face {
font-family: "My Font Name";
src: url(https://website.com/myfont.woff);
}
After specifying such a @font-face
rule, you can safely use this font:
p {
font-family: "My Font Name";
}
Hosting your own web fonts and writing @font-face
rules can be a chore.
Because of this, services like Google Fonts exist,
allowing you to freely choose fonts to include in your site.
When choosing from the font galleries on such a site, you will be given a neat little
<link>
tag to include in your page's header - this will include
a stylesheet that sets up the fonts you desire for you to freely use throughout your page.
For example, if I wanted to use Roboto
from Google Fonts, I might navigate
to google fonts and click on Roboto.
I would then choose which font styles I want to use. I only want normal, bold, and italic,
so I will click + Select this style
next to those styles.
I would choose the Embed
tab in the sidebar that then appears on the screen, and
copy the <link>
tag provided:
I would add the copied tag to my <head>
section:
<head>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital@0;1&display=swap" rel="stylesheet">
</head>
And finally, I can use the font in my code!
p {
font-family: "Roboto", sans-serif;
}