CODEWITHSUNDEEP
cssfontsfont-facecustom-font
clifdensprit
clifdensprit

Reputation: 4901

Why is @font-face not working?

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.

Upvotes: 0

Views: 1230

Answers (2)

Rob
Rob

Reputation: 15168

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.

Upvotes: 1

jagmitg
jagmitg

Reputation: 4566

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>

Upvotes: 0

Related Questions