# 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:

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. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://eleven-fifty-academy.gitbook.io/javascript-100-prework-gitbook/javascript-library/0-prework/3-css-basics/font.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.