Complete 2020 Web Development Bootcamp

Section 5 – Lessons 47 and 49

Lesson 47 – Font Styling

The two major font families are Serif and Sans-serif.

Serif fonts have little “feet” at the edges of the letters. Sans-serif fonts do not.

Defining the font-family using the “body” selector in CSS defines the font-family for the entire website.

body {
 font-family: serif;
}

The three most used font families for web design are:

  • serif
  • sans-serif
  • monospace

The monospace font family is used for coding. In monospace each letter occupies the same amount of space.

Instead of just specifying a broad font-family such as “sans-serif”, you can also specify a particular font such as “verdana”. You simply type the particular font in front of the broad font-family separating them with a comma. For example –

body {
 font-family: verdana, sans-serif;
}

The browser will first attempt to use the specific “verdana” font. If the browser doesn’t have access to the “verdana” font it will then default to the broad “sans-serif” font-family.

A list of web safe fonts can be found at https://www.cssfontstack.com/.

To ensure that your viewer sees the exact font that you want them to see, you can embed the exact font that you want the browser to use.

At https://fonts.google.com/ you can select the font that you want to be used by the browser and click the “+”.

You then paste the provided link in the head section of your HTML. For example –

<head>
  <link href="https://fonts.googleapis.com/css? 
  family=Merriweather|Montserrat|Sacramento&display=swap" 
  rel="stylesheet">
</head>

This link in the head section allows the user’s browser to get the specific fonts you want to be displayed on your website.

Next you go into your styles.css and specify the font-family you want to use.

body {
 font-family: 'Merriweather', serif;
}

Lesson 49 – Adding Content

Lorem ipsum is used to put in text areas of websites before the actual text has been created. It acts a a placeholder so that you can see how the site will look once the actual text has been inserted.

You can generate lorem ipsum using https://loremipsum.io/.

This is an example of lorem ipsum used in a paragraph tag.

<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna 
aliqua. Et ultrices neque ornare aenean euismod elementum 
nisi quis eleifend. Consequat mauris nunc congue nisi.</p>
</body>

Flat icons that you can use in your design can be found at https://www.flaticon.com/.

Animated giffs can be found at https://giphy.com/.