# Font won't show up? :(

**URL:** <https://forum.freecodecamp.org/t/font-wont-show-up/155194>\
**Category:** General\
**Created:** [October 26, 2017, 5:22am UTC](https://forum.freecodecamp.org/t/font-wont-show-up/155194 "2017-10-26T05:22:22Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![TCherubi](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/tcherubi/32/69464_2.png) [@TCherubi](https://forum.freecodecamp.org/u/TCherubi)\
**Post date:** [October 26, 2017, 5:22am UTC](https://forum.freecodecamp.org/t/font-wont-show-up/155194/1 "2017-10-26T05:22:23Z")

</div>

Help please?

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

---

<div class="post-metadata">

**Author:** ![kevcomedia](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kevcomedia/32/125737_2.png) [@kevcomedia](https://forum.freecodecamp.org/u/kevcomedia)\
**Post date:** [October 26, 2017, 5:29am UTC](https://forum.freecodecamp.org/t/font-wont-show-up/155194/2 "2017-10-26T05:29:18Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![TCherubi](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/tcherubi/32/69464_2.png) [@TCherubi](https://forum.freecodecamp.org/u/TCherubi)\
**Post date:** [October 26, 2017, 5:38am UTC](https://forum.freecodecamp.org/t/font-wont-show-up/155194/3 "2017-10-26T05:38:39Z")

</div>

@kevcomedia

Thank you for your answer!

When I put the bootstrap in the CSS, it won’t load the buttons as they should 😕 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 ☹

What is a “fallback font family”?

---

<div class="post-metadata">

**Author:** ![kevcomedia](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kevcomedia/32/125737_2.png) [@kevcomedia](https://forum.freecodecamp.org/u/kevcomedia)\
**Post date:** [October 26, 2017, 5:45am UTC](https://forum.freecodecamp.org/t/font-wont-show-up/155194/4 "2017-10-26T05:45:16Z")

</div>

Open your CSS settings and put the externals there like this:  
 ![image](https://global.discourse-cdn.com/freecodecamp/original/3X/b/4/b4fdfb03dd728b8da52ad268abd4ca1f06ddae9b.png)

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

> [@TCherubi](#):
>
> What is a “fallback font family”?

It’s like this:

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

---

<div class="post-metadata">

**Author:** ![TCherubi](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/tcherubi/32/69464_2.png) [@TCherubi](https://forum.freecodecamp.org/u/TCherubi)\
**Post date:** [October 26, 2017, 5:52am UTC](https://forum.freecodecamp.org/t/font-wont-show-up/155194/5 "2017-10-26T05:52:37Z")

</div>

> [@kevcomedia](#):
>
> Open your CSS settings and put the externals there like this:

Ooooh I didn’t know I had to do that each time 😕 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 😃 🎉 🎉 🎉

---

<div class="post-metadata">

**Author:** ![kevcomedia](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kevcomedia/32/125737_2.png) [@kevcomedia](https://forum.freecodecamp.org/u/kevcomedia)\
**Post date:** [October 26, 2017, 5:57am UTC](https://forum.freecodecamp.org/t/font-wont-show-up/155194/6 "2017-10-26T05:57:41Z")

</div>

> [@TCherubi](#):
>
> Also thought that if I had it as text on the HTML it would work like in the examples…

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

---

<div class="post-metadata">

**Author:** ![TCherubi](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/tcherubi/32/69464_2.png) [@TCherubi](https://forum.freecodecamp.org/u/TCherubi)\
**Post date:** [October 26, 2017, 6:02am UTC](https://forum.freecodecamp.org/t/font-wont-show-up/155194/7 "2017-10-26T06:02:41Z")

</div>

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

---

<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:** [January 17, 2021, 8:36pm UTC](https://forum.freecodecamp.org/t/font-wont-show-up/155194/8 "2021-01-17T20:36:30Z")

</div>

Closed on January 17, 2021, 8:36pm UTC


