Importing google fonts to css

HTML-CSS
1

No matter what link i put into the css from google fonts it is still the same font in the dispay
Your code so far

<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">

html {
  font-size: 10px;
}
#background {
 padding: 10px 5px;
  margin: 30px;
  background: #B39DDB
}
#title {
  font-family: 'Bebas Neue', cursive;
}


<main id=background>
  <h1 id=title>SHOULD PITBULLS BE ALLOWED IN THE UNITED KINGDOM</h1>
  







</main>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.81 Safari/537.36

Challenge: Build a Survey Form

Link to the challenge:

2

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 it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

3

I think the link should be pasted in your the head tag in your html document

4

I’m not sure i fully understand what you’re asking. What you have now, when i put it in codepen (in the correct places) the font that you have linked in the html & css shows up.
If you are wanting to change your font, you will need to change your url & you will need to change your css.

with <link> as first HTML element

Screen Shot 2022-02-08 at 11.41.50 AM
Screen Shot 2022-02-08 at 11.41.50 AM2064×1096 203 KB

With the <link> in the codepen head area

Screen Shot 2022-02-08 at 11.43.05 AM
Screen Shot 2022-02-08 at 11.43.05 AM1912×822 118 KB

What the font should look like according to google

Screen Shot 2022-02-08 at 11.47.14 AM
Screen Shot 2022-02-08 at 11.47.14 AM2010×1154 143 KB

5

Send the link to your pen/code to see what we are working with

6

image
image1912×779 67.5 KB

My font wont come up like that I can’t figure out why

7

Yes. thank you for your help!

8

do you have any extensions that change the font?
I would inspect element, and then check to see what the browser says.

Screen Shot 2022-02-08 at 12.39.06 PM

Your browser might tell you what is overriding the font and where it’s coming from

9

ACTUALLY- i think i know what the issue is. your <link> tag needs to either be in the HTML section on codepen, or it needs to be in the head section that’s located in HTML settings for codepen. it should NOT be in the CSS.
That font might be what your browser considers as “cursive” which is what it’s looking for when it cant find the font you tell it to use.

See my other comment here on how it should look:

10

@espinozamike91, You’re putting the <link> into the CSS editor. <link> is an HTML tag.
links to fonts go in the box labeled ‘Stuff for <head>’ in the HTML editor section.

If you want to call the font in CSS you need to use @import

11

Hey. To complete what others mentioned, for reference I have added the import in my html and the styling in my CSS file as follows:

  • In htlml within <meta> at the beginning of the file:
<link href="you can paste the google font url here to import" rel="stylesheet">
  • In CSS, with the following font example:
html {
  font-size: 14px;
  font-family: "Pathway Gothic One", sans-serif;
}

Hope it helps :wink:

12

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.