Thursday, 15 May 2014

css - Can't wrap my head around accessing fonts on server (getting 404 errors in console) -


So I've downloaded a new font named "Aleph", it's in Hebrew, but it's irrelevant because I have to activate it I'm unable to I am pretty sure that I am doing something really stupid, but I am trying to implement it for hours, but there is no benefit.

What I found:

8 files: / P>

4 x normal eot, svg, ttf, woff

4 x bold eot, svg , Ttf, woff

and the stylesheet .css is a stylesheet file, which now has 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? #imix") 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-faces {font-family: 'Alef'; Src: url ("/ wp-content / themes / duet / Alef-regular.eot"); Src: url ("/ wp-content / themes / duet / Alef-regular.eot? #fix") 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 subject directory: / wp-content / themes / duet /

My main CSS file is called Style.css, In the same directory, I added this code to the file:

  @ font-face {font-family: 'Alef'; Src: url ('Alef.eot'); Src: url format ('Alef.eot? # Formix') format ('embedded-opentape'), url ('Alef.woff') format ('woff'), url ('Alef.ttf') format ('truetype' ), URL ('Alef.svg # webfont') format ('SVG'); }   

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

     

And of course I set up my page [font-family: Alef;)

What am I doing wrong? I'm getting 404 errors for files in Chrome's console. This error shows the correct URL to the right of the console.

Two main problems:

  • You are referring 12 different files But you only have 8 (Alef.eot, etc. Alef-regular.eot, etc. Alef-bold.eot, etc.)
  • I think your copy '2' src 'statement reports

    What do I do here:

    • Remove the font-face declaration in style.css. Stylesheet Take the font-face announcements out of CSS and style.css
    • Use only one 'src' declaration with all the URLs separated by commas.

      The code I will use here: (your file path is replaced): prefix

      Extra: Of course, here's the bold version ...

        `@ font-face {font-family: 'Alef'; Source: '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; }    

No comments:

Post a Comment