# font Objectives * Discuss font. ## File Location You should be located in the following files: ``` javascript-library └── 0-PreWork ... └── 2-CSS-Basics └── 04-fonts.css └── 04-fonts.html ``` ## Description Font changes impact the experience a user has on your site. Choosing the right font, size, color, and styling can drastically effect the enjoyability of your app.
Let's have you build out the files necessary to incorporate these styles: ```markup Font

Font

In CSS, there are two types of font family names:

generic family: a group of font families with a similar look (ex: Serif)
font family: a specific font family (ex: "Times New Roman" or Arial)

The font-family property should hold several font names as a fallback in case the browser doesn't support the first font you picked.
Always start with the font you want, and end with a generic family. Also, if the font family is more than one word, it must be in
quotation marks (ex: "Times New Roman").

Here is a list of the CSS font properties:

font:: sets all the font properties in one declaration
font-family:: specifies the font family for text
font-size:: specifies the font size of text
font-style:: specifies the font style for text
font-weight: specifies the weight of a font

``` ```css .wrapper{ margin: 5px; } /* 4 */ p{ font-family: "Times New Roman", Times, serif; } h2{ font-family:Arial, Helvetica, sans-serif; } dt{ font-weight: bold; font-size: 20px; } ``` ## Discussion As you can see there's a lot to unpack regarding `font`. Another method includes loading fonts from other sources (such as [Google Fonts](https://fonts.google.com/)). Probably the single most important thing to take away from this lesson is the redundancy that is necessary when designing for a variety of browsers.
Having fallback fonts for when a browser doesn't support the most desirable one is your first introduction to redundancy and planning for worst-case scenario in development. You will discover that this theme is revisited from a variety of directions during your growth as a developer. ## Challenge If you'd like more examples of different font properties, [here](http://www.w3schools.com/css/css_font.asp) is a link.
If you'd like to learn more about font families, [here](http://www.w3schools.com/cssref/css_websafe_fonts.asp) is a link to commonly used font combinations.