Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Sebastian Eguez
Sebastian Eguez
8,248 Points
Posted by Sebastian Eguez
Sebastian Eguez
8,248 Points

My "imported" font is not working

https://w.trhou.se/tnfna6kf2s

I imported a font: truelies.ttf

This is my CSS.

@font-face {
  font-family: "truelies";
  src: url('truelies.ttf');
}

And later...

h1 {
    font-family: "truelies";
    margin: 5px 0;
    font-size: 5em;
    padding: 10px 0;
    font-weight:normal;
    line-height:0.8em;
}

The beginning of my HTML has:

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8"> 
        <title>Sebastian Eguez | Mago</title> 
        <link rel="stylesheet" href="css/normalize.css"> 
        <link href='https://fonts.googleapis.com/css?family=Indie+Flower|Anton' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/responsive.css"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

What's wrong?

And what's the purpose of the following, above?

<meta charset="utf-8"> 
<link rel="stylesheet" href="css/normalize.css"> 
<link href='https://fonts.googleapis.com/css?family=Indie+Flower|Anton' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Thanks!

4 Answers

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

sorry I didn't know where it was located...change your src as it needs to point to the file

src: url(../truelies.ttf);
Sebastian Eguez
Sebastian Eguez
8,248 Points
Sebastian Eguez
Sebastian Eguez
8,248 Points

It worked! You rock.

Why do you need the "/"?

When would you NOT need it?

What if I was trying to insert my font code into my HTML doc?

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

For the rest

sets the character encoding

<meta charset="utf-8">

links the normalize file which creates a standard across your webpages. 

<link rel="stylesheet" href="css/normalize.css">

this is a different way to link an external font family. Generally given directly from where you got the font, in this case google fonts.

<link href='https://fonts.googleapis.com/css?family=Indie+Flower|Anton' rel='stylesheet' type='text/css'>

These link your css files with responsive coming second it will override anything in main.css

<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">

you should include this line in all of your html pages. The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device). The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Sebastian Eguez
Sebastian Eguez
8,248 Points
Sebastian Eguez
Sebastian Eguez
8,248 Points

Wow. Thanks.

The font is still not working though. :pensive:

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

I don't think you need the quote marks around truelies

@font-face {
  font-family: truelies;
  src: url(truelies.ttf);
}

h1 {
    font-family: truelies;
    margin: 5px 0;
    font-size: 5em;
    padding: 10px 0;
    font-weight:normal;
    line-height:0.8em;
}
Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

I have not loaded the fonts I use the way you have. It works but, I have used google fonts which you asked about as well.

If you notice, whenever you link to another file you will use some form of

../

this just helps to verify where the files are located. like if they were in a folder

css/normalize.css

the 

../

usually refers to a location one level up and, when I tried your code, when I just put in two periods it autocompleted to what I gave you.

if a given file is on the same level as in the same folder as where ever you are calling it from you don't have to include the ../