Why is @font-face not working?

StackOverflow https://stackoverflow.com/questions/15862726

Question

I am trying to use @font-face to use a custom font on a site I'm designing. I can't figure out why it's not working this time. I've used it before with no problem.

Here is my code(not from the actual site, but a simplified version I used to test the issue):

html

<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" type="text/css" href="./css/stylesheet.css">
</head>
<body>
<p>Loremm ipsum</p>
</body>
</html>

css(I left the reset in)

/*--------------------------*/
/*----------RESET-----------*/
/*--------------------------*/

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    font-family:myfont;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*-------------------------*/
/*-----------MAIN----------*/
/*-------------------------*/

@font-face {
    font-family:myfont;
    src:url('./fonts/myfont.ttf'),
        url('./fonts/myfont.eot');
}

my index.html is in html/

my font files are in html/fonts/

my css is in html/css/

Can anyone see the problem?

I have tested this in chrome and firefox and it is on my computer for editing.

Was it helpful?

Solution

I'm going to make a guess that your src is relative to your CSS file location and your './' is not getting you to the right directory. Give the src an absolute address to your font and make sure it works that way.

I also don't see where you apply the font-family to any of your elements.

OTHER TIPS

I have always had issues with @font. Hopefully this will assist you.

style.css (get the ota, woff, ttf and svg font type). Make sure that you can find the font by instructions given to the HTML. E.g. if its located in html/fonts/ then the urls should be fonts/blah.eot.

 @font-face {
     font-family:'Carrosserie-Medium';
     src: url('../webfonts/FAFC3_0.eot');
     src: url('../webfonts/FAFC3_0.eot?#iefix') format('embedded-opentype'), url('../webfonts/FAFC3_0.woff') format('woff'), url('../webfonts/FAFC3_0.ttf') format('truetype'), url('../webfonts/FAFC3_0.svg#wf') format('svg');
 }
 @font-face {
     font-family:'Carrosserie-Thin';
     src: url('../webfonts/FAFC3_1.eot');
     src: url('../webfonts/FAFC3_1.eot?#iefix') format('embedded-opentype'), url('../webfonts/FAFC3_1.woff') format('woff'), url('../webfonts/FAFC3_1.ttf') format('truetype'), url('../webfonts/FAFC3_1.svg#wf') format('svg');
 }
.Carrosserie-Medium {
    font-family: Carrosserie-Medium;
    font-weight: normal;
    font-style: normal;
}
.Carrosserie-Thin {
    font-family: Carrosserie-Thin;
    font-weight: normal;
    font-style: normal;
}

Implementing it

h2#tagline {font-size:30px;font-family:'Carrosserie-Thin', sans-serif; }

HTML

<h2 id="tagline">Try this.</h2>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top