{"id":761,"date":"2020-01-04T18:40:06","date_gmt":"2020-01-04T23:40:06","guid":{"rendered":"http:\/\/newmediaproduction.mynmi.net\/?page_id=761"},"modified":"2022-06-08T19:58:40","modified_gmt":"2022-06-08T19:58:40","slug":"fonts","status":"publish","type":"page","link":"https:\/\/nmi.cool\/web\/fonts\/","title":{"rendered":"Fonts"},"content":{"rendered":"\n
\"\"
Photo by Tim Mossholder<\/a>.<\/figcaption><\/figure>\n\n\n\n

1. Font-family property<\/strong><\/h2>\n\n\n\n
 body {font-family: Arial, Verdana, sans-serif;}<\/pre>\n\n\n\n
When you type in font-family in your CSS, you\u2019ll see a variety of different fonts at your disposal. To display these fonts on your website, users looking at your site will need to have these fonts installed on their computers. If the user doesn\u2019t have the first font listed (in the example above, Arial) installed, the browser will try to display the next font, then the next, and so on. If you\u2019re wondering, sans-serif and serif refer to two very broad categories of fonts\u2014read this article<\/a> to learn more.<\/p>\n\n\n\n
Note: If a font is more than one word, it must be placed in double-quotes, ie, \u201cTimes New Roman.\u201d <\/p>\n\n\n\n
2. Google Fonts <\/h2>\n\n\n\n
Google Fonts can easily be imported to your website. To use Google Fonts you’ll you add a special stylesheet link in the <head><\/code> of your HTML document. <\/p>\n\n\n\n
An important aspect of this class is learning how to help yourself\u2014there are tons of free, online resources to help with web development. In this case, Google\u2019s instructions<\/a> are better than any I can devise, or you can do the Free Code Camp homework dedicated to Google Fonts, too (Responsive Web Design > Basic CSS > Import a Google Font). <\/strong><\/p>\n\n\n\n
Test it out! <\/h3>\n\n\n\n
Go ahead and test this out in Visual Studio Code. First, you’ll need to create a test HTML file– you can call it fonts.html<\/code> if you like! Since this is just a practice document, you won’t need to upload it to your server, so save it wherever you save your practice files for this class. Generate your HTML boilerplate. Next, you’ll want to create a blank CSS document named style.css<\/code> and save it in a folder that you will name css<\/code>. It’s a good idea if that folder is in the same directory level as your font.html document. Make sure to link your external stylesheet<\/a> in the <head> of your HTML document. Okay, now we are ready to go!  <\/p>\n\n\n\n
Open Google Fonts<\/a> in a web browser. Spend a couple minutes browsing the font options and click on one you like. Your font might have multiple styles; select the one (or more!) that you like by clicking the blue “+select this style” button. <\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
The selected family will appear on the right side of your screen. Click embed. <\/p>\n\n\n
\n
\"click<\/figure>\n<\/div>\n\n\n
Make sure <link> (rather than @import) is selected and copy the <link><\/code> code and paste it into the head of your HTML document right above the your external stylesheet. <\/p>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
You’ll want to add a little content to this webpage so we can apply the font. Go ahead and add a heading or two, a paragraph– whatever you like. <\/p>\n\n\n\n
Now that you’ve got a little content, pick an element that you’d like to apply the font too– maybe a paragraph or heading. In your style sheet, add a selector. <\/p>\n\n\n\n
Next, copy and paste the CSS rule from Google Fonts (it’s right under that link you copied) into your stylesheet. <\/p>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
Your stylesheet should look something like this: <\/p>\n\n\n\n
p {\n     font-family: 'Raleway', sans-serif;\n   }<\/pre>\n\n\n\n
That’s it! Save both your HTML and CSS files and give the HTML file a preview in Chrome. You should see the font on your screen. <\/p>\n\n\n\n
Feel free to practice some of your CSS skills and have a little fun here: maybe add a color<\/a>, change the font-size, or test out some of the Google Font Effects<\/a>.1<\/a><\/p>\n\n\n\n
Selecting fonts<\/h2>\n\n\n\n