{"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":"2025-05-20T19:12:50","modified_gmt":"2025-05-20T19:12:50","slug":"fonts","status":"publish","type":"page","link":"https:\/\/nmi.cool\/webdev\/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;}<\/code><\/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 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! Save it to your playground folder. Generate your HTML boilerplate. Next, you’ll want to create a blank CSS document named fonts.css<\/code> and save it in a the css<\/code> folder in playground. 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 of minutes browsing the font options and click on one you like. Click on a font that you like. It will open to a page that looks like this:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Now it’s time to go shopping (with Google bucks). Click “Get Font” in the top right corner. That will add the font to your bag and give you some options. <\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Click “Get embed code,” and brace yourself. <\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Make sure the “<link>” option is toggled rather than the “@import” option (this should occur automatically). <\/p>\n\n\n\n
Copy everything from the “Embed code in the <head> of your html” box and paste it … into the <head> of your html. Mine looks like this:<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Document<\/title>\n\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap\" rel=\"stylesheet\"><\/strong>\n\n<link href=\"css\/fonts.css\" rel=\"stylesheet\">\n\n<\/head>\n<body>\n\n    <h1>Let's test out some fonts<\/h1>>\n    \n<\/body>\n<\/html><\/code><\/pre>\n\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 to\u2014maybe 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 (the part highlighted in blue) into your stylesheet.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Your stylesheet should look something like this: <\/p>\n\n\n\n
h1 {\n     font-family: \"Montserrat\", sans-serif;\n   }<\/code><\/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