0

So I downloaded a new font called "Alef". It's in hebrew, but that's irrelevant as I'm unable to activate it. I'm pretty sure I'm doing something really stupid but I've been trying for hours to apply it but with no avail.

What I got:

8 files:

4 x normal eot, svg, ttf, woff

4 x bold eot, svg, ttf, woff

And a stylsheet file called stylesheet.css, which now contains the following code:

@font-face {
font-family: 'Alef';
src: url("/wp-content/themes/duet/Alef-bold.eot");
src: url("/wp-content/themes/duet/Alef-bold.eot?#iefix") format('embedded-opentype'),
     url("/wp-content/themes/duet/Alef-bold.woff") format('woff'),
     url("/wp-content/themes/duet/Alef-bold.ttf") format('truetype'),
     url("/wp-content/themes/duet/Alef-bold.svg#alefbold") format('svg');
font-weight: bold;
font-style: normal;

}
@font-face {
font-family: 'Alef';
src: url("/wp-content/themes/duet/Alef-regular.eot");
src: url("/wp-content/themes/duet/Alef-regular.eot?#iefix") format('embedded-opentype'),
     url("/wp-content/themes/duet/Alef-regular.woff") format('woff'),
     url("/wp-content/themes/duet/Alef-regular.ttf") format('truetype'),
     url("/wp-content/themes/duet/Alef-regular.svg#alefregular") format('svg');
    font-weight: normal;
    font-style: normal;

I have uploaded all files to my theme directory: /wp-content/themes/duet/

My main CSS file is called style.css, which is also in the same directory, I added this code to the file:

@font-face{
font-family: 'Alef';
src: url('Alef.eot');
src: url('Alef.eot?#iefix')
   format('embedded-opentype'),
   url('Alef.woff') format('woff'),
   url('Alef.ttf') format('truetype'),
   url('Alef.svg#webfont') format('svg');
}

Then what I did, was add this line to my header.php:

        <link rel="stylesheet" href="/wp-content/themes/duet/stylesheet.css" type="text/css" charset="utf-8" />

And of course I set my p {font-family: Alef;)

What am I doing wrong? I'm getting 404 errors for the files in Chrome's console. It shows the CORRECT URL in the right side of the error console though.

notypist
  • 25
  • 5
  • Did you tried with relative paths? – Miljan Puzović Mar 26 '13 at 18:17
  • its probably because you declare it twice and the main.css is the latest. In the main.css you don't have any paths to the files also – Dejan.S Mar 26 '13 at 18:21
  • Where do I declare it twice? can you suggest the best way to install? I honestly think I tried every trick. Chrome is telling me there is an 404 but showing the correct path. I'm totally lost. – notypist Mar 26 '13 at 18:54
  • I read it like you had both of your stylesheets at the same time. Is this local or production? you might need to add mime types for production – Dejan.S Mar 27 '13 at 05:55

2 Answers2

1

I use this tool almost obsessively. Saves me the time of working out bugs just like this one.

http://www.fontsquirrel.com/tools/webfont-generator

Best tool ever.

kristina childs
  • 2,190
  • 1
  • 20
  • 19
0

Two main issues:

  • You are referencing 12 different files but you only have 8 (Alef.eot, etc.; Alef-regular.eot, etc.; Alef-bold.eot, etc.)
  • I think your 2 'src' statements per declaration is messing things up. Should only be one with url's separated by commas.

Here is what I would do:

  • Remove the font-face declaration in style.css. Move the font-face declarations out of stylesheet.css and into style.css.
  • Only use one 'src' declaration with all url's separated by commas.

Here is the code I would use: (your file paths substituted):

`@font-face {
    font-family: 'Alef';
    src: url('/wp-content/themes/duet/Alef-regular.eot?#iefix') format('embedded-opentype'),
    url('/wp-content/themes/duet/Alef-regular.woff') format('woff'),
    url('/wp-content/themes/duet/Alef-regular.ttf') format('truetype'),
    url('/wp-content/themes/duet/Alef-regular.svg#Alef') format('svg');
    font-weight: normal;
    font-style: normal;
}

ADDITION: Of course, here is bold version...

`@font-face {
    font-family: 'Alef';
    src: url('/wp-content/themes/duet/Alef-bold.eot?#iefix') format('embedded-opentype'),
    url('/wp-content/themes/duet/Alef-bold.woff') format('woff'),
    url('/wp-content/themes/duet/Alef-bold.ttf') format('truetype'),
    url('/wp-content/themes/duet/Alef-bold.svg#Alef') format('svg');
    font-weight: bold;
    font-style: normal;
}
bredon
  • 92
  • 3