# How do i link the css file AND a google font

**URL:** <https://forum.freecodecamp.org/t/how-do-i-link-the-css-file-and-a-google-font/230255>\
**Category:** Curriculum Help\
**Tags:** css, html\
**Created:** [September 27, 2018, 1:30pm UTC](https://forum.freecodecamp.org/t/how-do-i-link-the-css-file-and-a-google-font/230255 "2018-09-27T13:30:23Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![AllMight](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/allmight/32/101593_2.png) [@AllMight](https://forum.freecodecamp.org/u/AllMight)\
**Post date:** [September 27, 2018, 1:30pm UTC](https://forum.freecodecamp.org/t/how-do-i-link-the-css-file-and-a-google-font/230255/1 "2018-09-27T13:30:23Z")

</div>

Hi,

This is really bugging me haha.. Everything was great when i had css file linked to my html doc.. As seen below

```auto
<link rel="stylesheet" type="text/css" href=" style.css">

```

Then when i followed the instructions for google fonts, it also worked great…

```auto
<link rel="stylesheet" type="text/css" href=" https://fonts.googleapis.com/css?family=Concert+One">

```

Then i thought you know i want both linked so my html file is linked to my css file but also able to use the google font. So i googled how to do it but came across nothing. I do feel im being quite stupid and missing something simple hmm

---

<div class="post-metadata">

**Author:** ![mblmarlon](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/mblmarlon/32/101512_2.png) [@mblmarlon](https://forum.freecodecamp.org/u/mblmarlon)\
**Post date:** [September 27, 2018, 1:33pm UTC](https://forum.freecodecamp.org/t/how-do-i-link-the-css-file-and-a-google-font/230255/2 "2018-09-27T13:33:24Z")

</div>

can you send a screenshot of your code?

---

<div class="post-metadata">

**Author:** ![AllMight](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/allmight/32/101593_2.png) [@AllMight](https://forum.freecodecamp.org/u/AllMight)\
**Post date:** [September 27, 2018, 1:37pm UTC](https://forum.freecodecamp.org/t/how-do-i-link-the-css-file-and-a-google-font/230255/3 "2018-09-27T13:37:48Z")

</div>

Ermm the code links were posted in the questions but its invisible. Baffled again lol

---

<div class="post-metadata">

**Author:** ![AllMight](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/allmight/32/101593_2.png) [@AllMight](https://forum.freecodecamp.org/u/AllMight)\
**Post date:** [September 27, 2018, 1:40pm UTC](https://forum.freecodecamp.org/t/how-do-i-link-the-css-file-and-a-google-font/230255/4 "2018-09-27T13:40:53Z")

</div>

![fdfsfs](https://global.discourse-cdn.com/freecodecamp/original/3X/9/d/9dac3731c85ebbd93c37ea164aef65c7fbc6b571.png)

---

<div class="post-metadata">

**Author:** ![camelcamper](https://avatars.discourse-cdn.com/v4/letter/c/f0a364/32.png) [@camelcamper](https://forum.freecodecamp.org/u/camelcamper)\
**Post date:** [September 27, 2018, 1:44pm UTC](https://forum.freecodecamp.org/t/how-do-i-link-the-css-file-and-a-google-font/230255/5 "2018-09-27T13:44:16Z")

</div>

Your html should only have one `<head>` tag  
put the `<link>` to the google font inside the first `<head>`, just underneath the `<link>` to your css file

---

<div class="post-metadata">

**Author:** ![AllMight](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/allmight/32/101593_2.png) [@AllMight](https://forum.freecodecamp.org/u/AllMight)\
**Post date:** [September 27, 2018, 1:48pm UTC](https://forum.freecodecamp.org/t/how-do-i-link-the-css-file-and-a-google-font/230255/6 "2018-09-27T13:48:35Z")

</div>

sorry but those are two seperate screen shots stuck together in one picture.  
The screenshot is from the exact same code all but the google font url and the style.css

I just want to be able to use both but it seems i cant use two href in one link tag. So im obviously missing something but i cant google it as all i find is people trying to use one href to open two pages 😕

---

<div class="post-metadata">

**Author:** ![mblmarlon](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/mblmarlon/32/101512_2.png) [@mblmarlon](https://forum.freecodecamp.org/u/mblmarlon)\
**Post date:** [September 27, 2018, 1:48pm UTC](https://forum.freecodecamp.org/t/how-do-i-link-the-css-file-and-a-google-font/230255/7 "2018-09-27T13:48:55Z")

</div>

Exactly! Only one Head tag! And since HTML is reading from top to bottom, we want to load the fonts, before our CSS is loaded. Otherwise you can’t access it.

---

<div class="post-metadata">

**Author:** ![AllMight](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/allmight/32/101593_2.png) [@AllMight](https://forum.freecodecamp.org/u/AllMight)\
**Post date:** [September 27, 2018, 1:58pm UTC](https://forum.freecodecamp.org/t/how-do-i-link-the-css-file-and-a-google-font/230255/8 "2018-09-27T13:58:00Z")

</div>

![uhuhuh](https://global.discourse-cdn.com/freecodecamp/original/3X/d/1/d1c26fd57c7266aff9a0e3b9403af09632907565.png)

Sorry for the confusion i knew putting two pictures together would make it look like i was using two head tags and the rest.

i have redone it like this in the picture above and it works. I was trying to use two href attributes in one “link” tag  
Thing is i could have sworn i already tried it, as shown above but i guess not. Maybe i need sleep. thanks

---

<div class="post-metadata">

**Author:** ![camelcamper](https://avatars.discourse-cdn.com/v4/letter/c/f0a364/32.png) [@camelcamper](https://forum.freecodecamp.org/u/camelcamper)\
**Post date:** [September 27, 2018, 2:24pm UTC](https://forum.freecodecamp.org/t/how-do-i-link-the-css-file-and-a-google-font/230255/9 "2018-09-27T14:24:32Z")

</div>

well done, it is great when it works!

For next time, please dont take screenshots of your code.  
Instead copy the code and paste it here inbetween triple backticks like so:

```  
`code goes here`  
```

Give it a go now if you like

---

<div class="post-metadata">

**Author:** ![lionel-rowe](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lionel-rowe/32/41877_2.png) [@lionel-rowe](https://forum.freecodecamp.org/u/lionel-rowe)\
**Post date:** [September 27, 2018, 3:10pm UTC](https://forum.freecodecamp.org/t/how-do-i-link-the-css-file-and-a-google-font/230255/10 "2018-09-27T15:10:49Z")

</div>

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.

See [this post](http://forum.freecodecamp.com/t/forum-code-formatting/25574) to find the backtick on your keyboard. The “preformatted text” tool in the editor (`</>`) will also add backticks around text.

**Note:** Backticks are not single quotes.

![markdown_Forums](https://sea3.discourse-cdn.com/freecodecamp/uploads/default/original/3X/4/b/4b9a26f0c243380dd84935f4e29b92e3ecee8d05.gif)

---

<div class="post-metadata">

**Author:** ![AllMight](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/allmight/32/101593_2.png) [@AllMight](https://forum.freecodecamp.org/u/AllMight)\
**Post date:** [September 27, 2018, 9:56pm UTC](https://forum.freecodecamp.org/t/how-do-i-link-the-css-file-and-a-google-font/230255/11 "2018-09-27T21:56:32Z")

</div>

```auto
<h1>Ok thanks</h1>

```

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [March 9, 2021, 10:58am UTC](https://forum.freecodecamp.org/t/how-do-i-link-the-css-file-and-a-google-font/230255/12 "2021-03-09T10:58:14Z")

</div>


