1

I have a oswald.woff font file downloaded from some free fonts site. Using ftp i have created folder called fonts in the themes folders. (i.e /wp-content/themes/esplanade/fonts). In the fonts folder i put the oswald.woff file.

@font-face {
    font-family: "Oswald";
    font-style: normal;
    font-weight: 400;
    src: local("Oswald Regular"), local("Oswald-Regular"), url("fonts/oswald.woff") format("woff");
}

I use this font for an heading h1. When open my site, it says "www.mysite.com/fonts/oswald.woff" (mysite.com used for representation, its not the origianl site) not found in the firebug errors console.

how to get the url of the file oswald.woff

3

It should be in www.mysite.com/wp-content/themes/esplanade/fonts/oswald.woff

  • The the url worked. Now there is no error and the font file loads. but the font does not change. anything else is needed. – Santhosh Yedidi May 19 '14 at 10:19
  • 1
    What about this answer doesn't satisfy the question? You said the url worked, the font not changing sounds like a completely new problem ( and one thats offtopic on this site as a pure css question ) – Tom J Nowell May 19 '14 at 10:24
  • I think, this should be the accepted answer. As it fixes the real problem@ incorrect font file src path. The accepted answer is simply an alternantive. – MortalViews May 19 '14 at 11:59
  • Sorry, the solution worked, (i.e: the url part). the css part i have to see. what is wrong. I have downloaded the woff url from the google url. Why the woff is not working – Santhosh Yedidi May 19 '14 at 12:26
  • I have added the @font-face { font-family: "Oswald"; font-style: normal; font-weight: 400; src: local("Oswald Regular"), local("Oswald-Regular"), url("wp-content/themes/esplanade/fonts/oswald/oswald.woff") format("woff"); } . My website it radhanath-swami.info – Santhosh Yedidi May 19 '14 at 13:05
1

You're only including WOFF, so there's no fallback for browsers that don't support it. See this article from CSS Tricks about @font-face.

Unless you absolutely need to have the font included locally, why not load Oswald from Google Fonts? You can add Google Fonts using a plugin such as WP Google Fonts, or as you're developing a theme, add the following in functions.php:

/** Load Google fonts */
add_action( 'wp_enqueue_scripts', 'custom_load_google_fonts' );

function custom_load_google_fonts() {
    wp_enqueue_style( 'google-fonts', '//fonts.googleapis.com/css?family=Oswald', array(), PARENT_THEME_VERSION );
}

The add the following CSS (with fallback fonts):

h1 {
 font-family: "Oswald", Helevetica, Arial, sans-serif;
}
  • i was using google fonts url. but later if one day google changes their url it can be a problem. so i want to load from my own site – Santhosh Yedidi May 19 '14 at 10:17
  • @SanthoshYedidi google doesn't change its url, specially for things like fonts. Don't actually see your point here – Pieter Goosen May 19 '14 at 10:23
  • fine. I will stick to google url – Santhosh Yedidi May 19 '14 at 10:24
  • There's nothing wrong with serving fonts from local, but I'd suggest you use more than just WOFF. Also, you are getting the 404 on the .woff file as you're not referencing it correctly. Have a look at this WPMU Dev article for more. – Matt Radford May 19 '14 at 10:59
  • As I can't comment on the other answer (lack of reputation points), I think the answer is that Santhosh hasn't changed his @font-face declaration. The URL works, as the WOFF file is located at www.mysite.com/wp-content/themes/esplanade/fonts/oswald.woff. But you need to change url("fonts/oswald.woff") to url("/wp-content/themes/esplanade/fonts/oswald.woff"). Then it will be correctly loaded. – Matt Radford May 19 '14 at 12:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.