Fonts and CSS

Fonts are a crucial element in creating an appealing website. In order to understand how to use fonts in CSS, we need to understand the different generic and font families.

Generic families group fonts by their appearance. CSS accepts the existence of 3 families, two of which are serif and sans-serif.  Fonts that belong to the serif familiy willIn order to understand the difference between the two, keep in mind that “sans” essentially means “without”. Here’s a simple guide to show the difference between the two.

The third general family is monospace. With monospace fonts, each character has the same width. You usually won’t see these on websites. In general, sans-serif fonts are considered the easiest to read on a computer screen.

Inside all the general families, there are endless amount of font families. For example, Times New Roman is its own font family. A font is considered to be its own family because it may have many different variations- bold, light, italics, etc. So, if I wanted my entire website to be in Times New Roman, I’d put it in my code like so:

     body {
          font-family: “Times New Roman”, serif;

The list of fonts families that are compatible with HTML without the use of external files is very short: there’s only two font families for each general family. Luckily, there’s ways to add custom fonts to your code.

The easier method is through Google Fonts. Here, you have access to the entirety of Google’s font database. Once you find a font that you like, select it and google will provide you with a string of code that goes in your head tag. Don’t be afraid to add more than one font! However, choosing too many may cause your webpage to load more slowly.

The more complicated method requires you to be able to connect to your site’s server using an FTP client.  If you find a font online, you’ll be able to save it as a .otf or .ttf file. Once you upload that the file for the font to your server, you have to define the font family in the <head> section. So, if I downloaded the Roboto font,

Leave a Reply