1

I'm going mad as I had my website working with custom web fonts and now suddenly it just stopped working.

I got the web font kit from Font Squirrel and I'm using my local WP site to test it.

I pasted the font kit at wp-content/themes/twentyfifteen/fonts/

Here is the content from my style.css from the theme folder

@font-face {
font-family: 'quicksandregular';
src: url('/fonts/quicksand-regular-webfont.woff2') format('woff2'),
     url('/fonts/quicksand-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;

}

h { 
font-family: 'quicksandregular' !important;
}

And nothing happens in the web page. I can't see my custom font, which is Bebas Neue.

Any help will be much appreciated.

Regards.

augustus182l
  • 375
  • 1
  • 2
  • 12
  • Are you getting any errors in your development console? Also, is your selector `h` correct? – Steven B. Nov 21 '16 at 20:13
  • I'm getting no errors. Also I can't select h as all headers? – augustus182l Nov 22 '16 at 00:22
  • no you have to use a comma separated list to target them such as ether suggests. – Steven B. Nov 22 '16 at 00:25
  • thanks @lamelemon although I still can't get it to work, please see my comment on ether post. – augustus182l Nov 22 '16 at 00:57
  • 404 suggests the URL is incorrect. Post your console error message. – Steven B. Nov 22 '16 at 01:14
  • @lamelemon http://127.0.0.1:8080/wordpress/wp-content/themes/twentysixteen/htdocs/wp-content/themes/twentysixteen/fonts/quicksand-regular-webfont.woff2 Failed to load resource: the server responded with a status of 404 (Not Found) http://127.0.0.1:8080/wordpress/wp-content/themes/twentysixteen/htdocs/wp-content/themes/twentysixteen/fonts/quicksand-regular-webfont.woff Failed to load resource: the server responded with a status of 404 (Not Found) – augustus182l Nov 22 '16 at 10:31
  • Your CSS source URL is wrong. If you look at the development console error, you can see it's looking in the wrong place. After you have that fixed, if you're still having an issue you may be missing MIME types. For that check Chris Clower's answer [here](http://stackoverflow.com/questions/7415640/correct-apache-addtype-directives-for-font-mime-types) and if you can't find the .htaccess file check [here](http://stackoverflow.com/questions/21372339/where-to-find-htaccess-file-in-my-xampp-localhost) – Steven B. Nov 22 '16 at 14:50
  • Thankfully I finally understood how does it work. So as I was using the style.css from the theme root I had to input src path with {fonts/... }On the other hand, as I was using the custom css from Jetpack plugin, I had to input the whole src path {wp-content/themes/illdy/fonts...} Thank you so much to make things clear to me so I could figure out what was going on! How can I rate your answer? – augustus182l Nov 23 '16 at 16:59

1 Answers1

1

Did you mean to paste the font family of "quicksand"? Regardless, this should be a good template to import new fontfaces.

@font-face {
    font-family: 'quicksandregular';
    src: url('/htdocs/www/wp-content/themes/twentyfifteen/fonts/quicksand-regular-webfont.woff2') format('woff2'),
         url('/htdocs/www/wp-content/themes/twentyfifteen/fonts/quicksand-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

Then when you call your font, it will need to be done in a valid selector with a valid name, ie:

/* Style all Headlines */
h1, h2, h3, h4, h5, h6{
    font-family: "quicksandregular";
}

You should also be using a fall back font stack like so:

/* Style all Headlines */
h1, h2, h3, h4, h5, h6{
    font-family: "quicksandregular", Arial, Helvetica, sans-serif;
}
knocked loose
  • 3,142
  • 2
  • 25
  • 46
  • Thanks! I put !important and now I'm gettint 404 on console. However look my folder with the fonts (https://s16.postimg.org/vaw31oz1x/2016_11_21_223632.png) and my url on css is url('/htdocs/wp-content/themes/twentysixteen/fonts/quicksand-regular-webfont.woff2') format('woff2'), url('/htdocs/wp-content/themes/twentysixteen/fonts/quicksand-regular-webfont.woff') format('woff'); – augustus182l Nov 22 '16 at 00:39