Font won't show up? :(

Font won't show up? :(
0

#1

Help please?

Why the font on the heading isn’t applying? https://codepen.io/Cherubi/pen/veoRqO


#2

I recommend putting your external stylesheets (such as Bootstrap) in the CSS settings, because stylesheets added in the HTML editor via <link> tags are loaded last (and override your custom CSS).

Then you should wrap the font name in single quotes ('Croissant One') since it has a space in it (but iirc it’s conventional to use single quotes for web fonts, even those with only one word). You may also want to provide a suitable fallback font family.


#3

@kevcomedia

Thank you for your answer!

When I put the bootstrap in the CSS, it won’t load the buttons as they should :confused: you mean this text right? <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>

I also tried wrapping the font name the way you told me and nothing happened :frowning:

What is a “fallback font family”?


#4

Open your CSS settings and put the externals there like this:
image

Then you can remove the <link> tags in the HTML.

It’s like this:

h1 {
  font-family: 'Croissant One', sans-serif;
}

If ever the Croissant One font is not available, the page will use the next one (sans-serif), and so on.


#5

Ooooh I didn’t know I had to do that each time :confused: Also thought that if I had it as text on the HTML it would work like in the examples…
It worked!!! Thank you so much :smiley: :tada: :tada: :tada:


#6

You have to be careful about things like this in Codepen. At the end everything looks neat, but it can easily trip new people.


#7

@kevcomedia you’re right… I found the lessons so easy, but the projects are more complex haha… And not being able to peek makes it more difficult - but it makes us learn better.

I think I’ll redo all the lessons and take notes, i find myself having to revisit them every time.