Why won't my font load?

Question

I have the following font-face set up in CSS:

@font-face {
    font-family: 'dtdt_menu';
    src: url('../fonts/Chalkduster.ttf');
}

and a menu setup as follows:

.menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: 'dtdt_menu';
}

This don't work at all. But when i change the font-face to the following:

@font-face {
    font-family: 'dtdt_menu';
    src: url('../fonts/Pacifico.ttf');
}

This works as it should, but the Pacifico.ttf font is located in the same folder and has chmod 755 just as Chalkduster.ttf. Why won't Chalkduster.ttf load? I don't understand it, since it has the exact same rights as the other custom font which works.

Answer 1

The font-family values must be the same. You also need to find out the what the actual font name is for CSS font-family most of the time it's the same as the font file name, but it can be something else too. Read more on MDN, and use the Web Font Generator to make the web font to work on all browsers.

Chalkduster

@font-face {
    font-family: 'Chalkduster';
    src: url('../fonts/Chalkduster.ttf');
}
.menu ul {
    font-family: 'Chalkduster';
}

Pacifico

@font-face {
    font-family: 'Pacifico';
    src: url('../fonts/Pacifico.ttf');
}
.menu ul {
    font-family: 'Pacifico';
}