Webfonts Not Working On Different Computers

[ChristineFerguson]

I just noticed that my site's web fonts are not working on my desktop at the office. I'm using two Google fonts, Oxygen and Source Sans Pro, and another web font called Museo-700.

I have tried clearing my cache and flushing my DNS. I've tried re-installing the fonts. What's confusing to me is that the fonts show up just fine on my laptop at home.

Is anybody familiar with this issue?

---

WordPress implementer and wannabe developer.

http://demo.bluegrassdigitalmedia.com

[Robin]

How are you loading the fonts on your website? I do not see the Google fonts being called in your source code at all. The Museo appears to be looking for a .js at http://demo.bluegrassdigitalmedia.com/museo-700.js and that's showing a 404, which is why Museo isn't loading.

---

I do the best I can with what I’ve got. (say hey on twitter)

[ChristineFerguson]

I have the Google fonts in my functions.php.

//* Enqueue Oxygen & Source Sans Pro Google font
add_action( 'wp_enqueue_scripts', 'genesis_sample_google_fonts' );
function genesis_sample_google_fonts() {
	wp_enqueue_style( '//fonts.googleapis.com/css?family=Source+Sans+Pro|Oxygen:400,700', array(), CHILD_THEME_VERSION );
}

It's strange that Museo is looking there for the .js because I have it pointing to a /fonts folder in my theme folder.

<script type="text/javascript">
//uncomment and change this to false if you're having trouble with WOFFs
var woffEnabled = true;
//to place your webfonts in a custom directory 
//uncomment this and set it to where your webfonts are.
var customPath = "/fonts";
</script>
<script type="text/javascript" src="museo-700.js"></script>

---

WordPress implementer and wannabe developer.

[Robin]

I think something isn't quite right with your Google fonts. On I site I did, mine looks like this:

wp_enqueue_style( 
		'google-fonts', 
		'//fonts.googleapis.com/css?family=Open+Sans:300,400italic,700italic,400,700', 
		array(), 
		PARENT_THEME_VERSION ); // Google Fonts

It looks like you're missing the first parameter, the handle, which is required.

The script itself may be looking in the /fonts folder but the Chome Dev Tools can't find the museo-700.js to begin with--how are you calling that?

---

I do the best I can with what I’ve got. (say hey on twitter)

[ChristineFerguson]

Oh, I must have erased the handle when I pasted the link to the Google fonts in my functions file. They're working now, thank you!

As for Museo: please forgive my ignorance, I'm trying to figure out what you mean.

I know that museo-700.js is saved in the /fonts folder. I know that I have the script above in my wp_head section, and I have Museo-700 in the desired locations in my CSS stylesheet.

Where else should I be calling the museo-700.js?

---

WordPress implementer and wannabe developer.

[Robin]

Great on Google!

OK, on Museo, I'm guessing here because I haven't done it this way, but in the last line <script type="text/javascript" src="museo-700.js"></script> the source should maybe be changed to /fonts/museo-700.js since that's where your js file is. Try that and see if it helps. I'm guessing that you would need to recomment the var customPath line, because the js may be using a relative path, and without commenting it, it may look in /fonts/fonts, which isn't what you want.

Not sure which browser you are using, but Firebug (Firefox) and Chrome Developer Tools will tell you if they can't find things and will tell you where they are looking. If you hit F12 in Chrome, it will show the panel and if there is a red circle, something is broken--click that and it will tell you where. HTH

---

I do the best I can with what I’ve got. (say hey on twitter)

[ChristineFerguson]

I bought this font from MyFonts.com and I'm using the instruction that can be found here.

Using Chrome developer tools I see that it's looking on each individual page for the museo-700.js. For exampe, on the Services page it's looking for http://demo.bluegrassdigitalmedia.com/services/museo-700.js.

I'm so confused as to how I can see the font working at home. How can it work at all if the browser can't find the museo-700.js file? I also can't figure out how to get it to look for the file in the /fonts folder. I've tried putting in every file path up to demo.bluegrassdigitalmedia.com/wp-content/themes/bluegrass-digital-media/fonts and it still can't find the file.

---

WordPress implementer and wannabe developer.

[Robin]

If you have the font on your computer, it will work. If the font isn't installed on your computer, it won't, unless the font is being served up from somewhere else. So I'll guess that the work computer doesn't have Museo 700 installed on it.

The instructions assume that you're putting the js file in the root folder of your site, and then the fonts folder goes from there. Actually, since the fonts are in your theme folder, you'll need your path to be something more like /wp-content/themes/your-theme/fonts/, or else the js will need to start out looking there.

I do a lot of this by trial and error myself, so that is all I can suggest. Maybe start out with the custom path commented, so it's not a factor, and work on making sure that the js is found. If the js is found but the fonts aren't, you'll still have an error but you'll be one step closer. So I'd comment out the var customPath line, and change the src for the js to /wp-content/themes/bluegrass-digital-media/fonts/museo.js ... you may want to try it with and without the opening / ... I feel like in some places, it works to have it there, some places, not so much.

Sorry this is being so convoluted. The nice thing about error messages is at least they help point out where things are going wrong. 😉

---

I do the best I can with what I’ve got. (say hey on twitter)

[Author]

Posts