2018-09-30 22:01:58 +00:00
---
id: bad87fee1348bd9aedf08807
title: Import a Google Font
challengeType: 0
videoUrl: 'https://scrimba.com/c/cM9MRsJ'
2019-07-31 18:32:23 +00:00
forumTopicId: 18200
2021-01-13 02:31:00 +00:00
dashedName: import-a-google-font
2018-09-30 22:01:58 +00:00
---
2020-11-27 18:02:05 +00:00
# --description--
2019-02-14 21:38:58 +00:00
In addition to specifying common fonts that are found on most operating systems, we can also specify non-standard, custom web fonts for use on our website. There are many sources for web fonts on the Internet. For this example we will focus on the Google Fonts library.
2020-11-27 18:02:05 +00:00
[Google Fonts ](https://fonts.google.com/ ) is a free library of web fonts that you can use in your CSS by referencing the font's URL.
2018-09-30 22:01:58 +00:00
So, let's go ahead and import and apply a Google font (note that if Google is blocked in your country, you will need to skip this challenge).
2020-11-27 18:02:05 +00:00
To import a Google Font, you can copy the font's URL from the Google Fonts library and then paste it in your HTML. For this challenge, we'll import the `Lobster` font. To do this, copy the following code snippet and paste it into the top of your code editor (before the opening `style` element):
2021-03-18 23:24:09 +00:00
```html
< link href = "https://fonts.googleapis.com/css?family=Lobster" rel = "stylesheet" type = "text/css" >
```
2020-11-27 18:02:05 +00:00
2021-03-16 14:49:43 +00:00
Now you can use the `Lobster` font in your CSS by using `Lobster` as the FAMILY_NAME as in the following example:
```css
font-family: FAMILY_NAME, GENERIC_NAME;
```
2020-11-27 18:02:05 +00:00
2018-09-30 22:01:58 +00:00
The GENERIC_NAME is optional, and is a fallback font in case the other specified font is not available. This is covered in the next challenge.
2020-11-27 18:02:05 +00:00
Family names are case-sensitive and need to be wrapped in quotes if there is a space in the name. For example, you need quotes to use the `"Open Sans"` font, but not to use the `Lobster` font.
# --instructions--
2021-02-01 19:56:07 +00:00
Import the `Lobster` font to your web page. Then, use an element selector to set `Lobster` as the `font-family` for your `h2` element.
2020-11-27 18:02:05 +00:00
# --hints--
You should import the `Lobster` font.
```js
2021-06-02 20:38:21 +00:00
assert($('link[href*="googleapis" i]').length);
2018-09-30 22:01:58 +00:00
```
2020-11-27 18:02:05 +00:00
Your `h2` element should use the font `Lobster` .
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
```js
assert(
$('h2')
.css('font-family')
.match(/lobster/i)
);
```
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
You should only use an `h2` element selector to change the font.
```js
assert(
2021-04-24 10:43:55 +00:00
/\s*[^\.]h2\s*\{\s*font-family\s*:\s*('|"|)Lobster\1\s*(,\s*('|"|)[a-z -]+\3\s*)?(;\s*\}|\})/gi.test(
2020-11-27 18:02:05 +00:00
code
)
);
```
Your `p` element should still use the font `monospace` .
```js
assert(
$('p')
.css('font-family')
.match(/monospace/i)
);
```
# --seed--
## --seed-contents--
2018-09-30 22:01:58 +00:00
```html
< style >
.red-text {
color: red;
}
p {
font-size: 16px;
font-family: monospace;
}
< / style >
< h2 class = "red-text" > CatPhotoApp< / h2 >
< main >
< p class = "red-text" > Click here to view more < a href = "#" > cat photos< / a > .< / p >
2018-10-08 00:01:53 +00:00
2018-09-30 22:01:58 +00:00
< a href = "#" > < img src = "https://bit.ly/fcc-relaxing-cat" alt = "A cute orange cat lying on its back." > < / a >
2018-10-08 00:01:53 +00:00
2018-09-30 22:01:58 +00:00
< div >
< p > Things cats love:< / p >
< ul >
< li > cat nip< / li >
< li > laser pointers< / li >
< li > lasagna< / li >
< / ul >
< p > Top 3 things cats hate:< / p >
< ol >
< li > flea treatment< / li >
< li > thunder< / li >
< li > other cats< / li >
< / ol >
< / div >
2018-10-08 00:01:53 +00:00
2020-07-15 09:56:49 +00:00
< form action = "https://freecatphotoapp.com/submit-cat-photo" >
2018-09-30 22:01:58 +00:00
< label > < input type = "radio" name = "indoor-outdoor" checked > Indoor< / label >
< label > < input type = "radio" name = "indoor-outdoor" > Outdoor< / label > < br >
< label > < input type = "checkbox" name = "personality" checked > Loving< / label >
< label > < input type = "checkbox" name = "personality" > Lazy< / label >
< label > < input type = "checkbox" name = "personality" > Energetic< / label > < br >
< input type = "text" placeholder = "cat photo URL" required >
< button type = "submit" > Submit< / button >
< / form >
< / main >
```
2020-11-27 18:02:05 +00:00
# --solutions--
2018-09-30 22:01:58 +00:00
2019-04-22 05:57:43 +00:00
```html
< link href = "https://fonts.googleapis.com/css?family=Lobster" rel = "stylesheet" type = "text/css" >
< style >
.red-text {
color: red;
}
p {
font-size: 16px;
font-family: monospace;
}
h2 {
font-family: Lobster;
2019-11-10 12:33:10 +00:00
}
2019-04-22 05:57:43 +00:00
< / style >
< h2 class = "red-text" > CatPhotoApp< / h2 >
< main >
< p class = "red-text" > Click here to view more < a href = "#" > cat photos< / a > .< / p >
2019-11-10 12:33:10 +00:00
2019-04-22 05:57:43 +00:00
< a href = "#" > < img src = "https://bit.ly/fcc-relaxing-cat" alt = "A cute orange cat lying on its back." > < / a >
2019-11-10 12:33:10 +00:00
2019-04-22 05:57:43 +00:00
< div >
< p > Things cats love:< / p >
< ul >
< li > cat nip< / li >
< li > laser pointers< / li >
< li > lasagna< / li >
< / ul >
< p > Top 3 things cats hate:< / p >
< ol >
< li > flea treatment< / li >
< li > thunder< / li >
< li > other cats< / li >
< / ol >
< / div >
2019-11-10 12:33:10 +00:00
2020-07-15 09:56:49 +00:00
< form action = "https://freecatphotoapp.com/submit-cat-photo" >
2019-04-22 05:57:43 +00:00
< label > < input type = "radio" name = "indoor-outdoor" checked > Indoor< / label >
< label > < input type = "radio" name = "indoor-outdoor" > Outdoor< / label > < br >
< label > < input type = "checkbox" name = "personality" checked > Loving< / label >
< label > < input type = "checkbox" name = "personality" > Lazy< / label >
< label > < input type = "checkbox" name = "personality" > Energetic< / label > < br >
< input type = "text" placeholder = "cat photo URL" required >
< button type = "submit" > Submit< / button >
< / form >
< / main >
2018-09-30 22:01:58 +00:00
```