oblaat
a guide to conceiving, creating & publishing your own website
a guide to conceiving, creating & publishing your own website
There are plenty of fonts on your computer that you could use, and this can certainly cause decision paralysis. With time you will find yourself choosing from a collection of favourite fonts easily, but it can be overwhelming.
Lucky for you, there is no need to decide. You could leave it to the browser to choose a font for you, and use that font everywhere. You could also simply declare that you want to use a certain type of font. CSS includes several generic font families.
html {
font-family: serif;
}
This results in a serif font, defined by the presence of serifs (the bits that stick out on the end of a letter). Often the default for people will be something like Times New Roman, or on Linux systems, something like Noto Serif.
I like to think that serif fonts leave a "printed text" impression. This website uses serif fonts, with Georgia as its top preference.
html {
font-family: sans-serif;
}
This results in a font sans serifs: it has no serifs. A round and neutral font. Common choices for something like this are Helvetica and Arial.
This website uses the sans serif font Verdana as its top preference for the first-level heading and all links.
html {
font-family: monospace;
}
This results in a monospace font, like those used on typewriters. A common monospace font is Courier. Monospace fonts should be used carefully and effectively as monospaced body text can become hard to read if it is not split into enpugh paragraphs.
This website has no preferred monospace font for displayed code, falling back on the generic monospace setting.
html {
font-family: cursive;
}
This results in a cursive font, or at least something handwritten. On many systems, this is Comic Sans. On systems without Comic Sans installed, including many mobile phones, a website with its body set text to cursive might display a complicated and hard to read font instead.
There are ways around this, however.
CSS rules sometimes allow for multiple preferences, and setting a font is one such occasion. It is recommended to provide a list of fonts you think are suitable for the part of your website you are styling.
If a user does not have the first font in the list installed on their computer, the browser looks to the next entry in the list: if the user does not have this font on their computer either, it repeats the process. At the end of the list should be a generic font style to choose a default from, if nothing else.
If you would like your headings to display in Comic Sans for a handwritten effect, there is no issue with setting your next preference to be a cursive font. If you would like to use the same font for your body text to give off a playful vibe, maybe a sans-serif fallback would work better.
This website uses a few fallbacks for its main fonts:
html {
font-family: 'Georgia', 'Times New Roman', Times, serif;
}
Individual font names with spaces in them must have single or double quotes around them, or else the browser will not know that they all refer to one thing.
Using the @font-face at-rule, CSS allows a website's designer to host any preferred font files on their own server, declare what the font should be called and where the font files are located, then ask for it to be applied with a CSS rule just like any other font. The browser downloads the font to use, and the web page displays the exact same for everyone.
@font-face {
font-family: 'Font Name';
src: url('/fonts/myfont.woff2') format('woff2'),
url('/fonts/myfont.woff') format('woff');
}
The files referenced in this example are WOFF files, using the Web Open Font Format. This is a file format designed for use with websites, compressed for faster loading.
After importing a font, you can use it like any oother font:
h1 {
font-family: 'Font Name', sans-serif;
}
Google provides free fonts for embedding within a website. They provide a line of code using the @import at-rule, which is similar to link in HTML: it references another document and includes it inside of the current, but inside of CSS instead. This is often used to reuse common CSS functions.
Upon choosing the font Roboto Condensed with the full axis of styles, you can include the font for use with just one line, then apply it to any element you wish:
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');
p {
font-family: "Roboto Condensed", sans-serif;
}