Fonts

We now start building on top of our foundations. Before we talk about layouts (how we organize broadly a page) and components (various elements composing a page, such as buttons or menus), we want to start by styling text.

But even before we can do that, we have to choose a font, load it, then make sure some of our HTML elements use it. This is the purpose of this page.

We ended the previous page with the following frame:

View example page

Recall how both the title and the paragraph, once we "reset" the default browser styles, now look the same. In my browser, when I "inspect" the title or the paragraph, I can see that the font is "DejaVu Serif."

Below, we add some CSS rules to use "IBM Plex Sans" instead.

View example page