Before you make your web site, make a rough sketch on a piece of paper to show where all the various parts of the assignment will be located. Make sure I see the sketch before you begin.
One of the limitations of HTML is that the only fonts that you can use are the ones someone already has loaded on their computer. That means that since web pages should look basically the same across platforms (on PC, Mac or Linux machines) you're restricted to a very small number of fonts that all computers have.
Google to the rescue. They have created over 800 fonts that you can use to create web pages in over 135 languages.
- Their font project makes the fonts open source which means anyone can use them and modify them as they see fit.
- While they've got oodles as fonts, as a practical thing I've only been able to get the fonts with one word in their name to work.
This means you can use one of these fonts on your website even if the people visiting your website do not have that font on their devices.
How do you do that? 
- In the head of your HTML type in <link href="https://fonts.googleapis.com/css?family=Cinzel|Rye|Satisfy&display=swap" rel="stylesheet">
- In the example above, Cinzel, Rye, and Satisfy are various Google Fonts.
- In your stylesheet set up your paragraph (or other) styles to take advantage of the fonts your page is loading.
- Capitalization counts. It seems like all Google Fonts start with capital letters so you need to capitalize the font names.
- Instead of Cinzel you can use any of the other font styles available at fonts.google.com.
- In practice I've only gotten the fonts to work if their names are a single word.
- I have tried out several fonts and gotten them to work, such as
- Tangerine,
- Oswald,
- Slabo,
- Doris,
- Lobster,
- Rubik,
- Poppins,
- Anton,
- Lemonada,
- Hanalei,
- Pacifico,
- and Play.
- Others should work, too, but these are the ones I've tested.
- So....
- Create a web page using 3 different Google Fonts.
- Lay it out as a letter sent to someone important, such as a president or king.
- Emphasize your major points with one of the Google Fonts.
- Use appropriately serious colors to match the serious tone of letter.
- Fill in the content with one of the Lorem Ipsum generators in the left sidebar.
Evaluation
CSS Fonts
|
A 4 paragraph letter to someone important
|
|
Appropriate colors, styles, etc.
|
|
Use of 3 different Google Fonts in a classy, elegant way to emphasize content
|
|
| |
|
|
|
