How do i link the css file AND a google font

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

#1

Hi,

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

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

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

<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


#2

can you send a screenshot of your code?


#3

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


#4


#5

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


#6

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


#7

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.


#8

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


#9

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


#10

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 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.


#11
<h1>Ok thanks</h1>