font-family CSS property allows for a prioritized list of font family names and/or generic family names to be specified for the selected element. Unlike most other CSS properties, values are separated by a comma to indicate that they are alternatives. The browser will select the first font on the list that is installed on the computer, or that can be downloaded.
You should always add at least one generic family in a font-family list, since there’s no guarantee that a specific font is installed on the computer or can be downloaded.
Font family names must either be given quoted as strings, or unquoted as a sequence of one or more identifiers. This means that punctuation characters and digits at the start of each token must be escaped in unquoted font family names.
Here a few examples how it’s done right:
On our example, let’s add a font-family to the
div we’ve created before.
If you hit refresh (CMD + R) again, your font-family should have changed from the default serif to sans-serif.
font-size property allows you to set a font size for the text in your Element. There are different ways to set font-sizes that can get a little tricky, so let us only use the most basic technique for now. We will assign fixed pixel values to our elements:
First you can see we set the
font-size for everything inside of the html element to a small
10px (by default modern browsers set 16px). All the elements on the inside will inherit this value, if they don’t have a different rule for their font size. As you can see, the h1 has a value of
32px assigned, so the browser shows us a big heading while the div has the small text size without having a specific
font-size property declared for itself.