WEB FONTS

When choosing a non-standard font for a website, you must ensure that the font is accessible and readable by different types of computer. That is where web fonts come in to play, as they are specifically for use with CSS.

Serif vs. Sans Serif

Serif fonts have decorative strokes/tapers at the end of the stems of each letter. Sans serif do not have these strokes. Some examples of sans serif fonts are Helvetica and Avenir. Some examples of serif fonts are Goudy Old Style and Times New Roman.

Serif - Merriweather

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sans Serif - Montserrat

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

How to Add Web Fonts to Your Site

  1. Go to https://fonts.google.com
  2. Select your desired font.
  3. Copy the HTML and CSS codes.
  4. Paste the HTML and CSS codes into the head of the HTML and CSS, respectively.
  5. Done!