Specifying the primary font for almost every selector is not a good approach, yet I often run into this issue.
What is the problem and how to fix it
- Duplicating the
font-familyimport only leads to hard maintainability. If, for some reason you want to change your website's font, you have to do it in every line, or, in all files.
- If you add the font name by hand, there is a high chance you mistype it once and the browser will load a totally different font (once I saw Ariel instead of Arial...).
- Quotation is not necessary, but it's a good approach to use it, mostly when the font name contains whitespaces.
- Always add a fallback option. If
Robotoisn't available, then the user-agent-defined sans serif font will be used. Note, these are not font names, so don't use quotation marks!
- If you want to use a different kind of font for your headings, links, whatever, the best approach it to store the name as a CSS variable.
font-family: "Roboto", sans-serif;
Another good example
--heading-font-family: "Georgia", "Times New Roman", "Times", serif;