@font-face woes.

[thebluecasket]

Hello all.

I’m currently in the process of converting a PSD website mockup to HTML/CSS, which I’ll then be converting to WordPress. I’ve hit a snag when it comes to @font-face, though.

I used FontSquirrel’s “@font-face generator” successfully for one font family on the site, but I’m having trouble getting Chrome to display the other font. It displays just great in Firefox, though.

For even more weirdness, I checked the font-face HTML demos that come with FontSquirrel’s kits. Chrome displays the font demo just fine, but doesn’t display the font when it’s on the actual site. Firefox does the reverse. And IE displays them both just fine.

The TL;DR is: set up one @font-face just fine, but the other doesn’t work in Chrome. Both show up fine Firefox, as well as in IE.

Any help is much appreciated! Thanks.

PS – A bit of a side-question, but on my computer web fonts always look better in Firefox than Chrome. Chrome has some serious anti-aliasing issues and irregular spacing and occasional height differences in characters. Any ideas as to why this is?

[chrisburton]

Firefox and Chrome use different rendering engines. Therefore, you won’t get exactly the same result. Throw up your code on http://codepen.io with links that work and perhaps we can help you.

[thebluecasket]

Here ya go. It’s still got a long way to go and I’m fairly new, so go easy. :) The font stuff is in an external stylesheet that is linked, but I dropped it in above my styling. Atrament is the one I’m having trouble getting to display in Chrome (keep in mind that everything displays perfectly in FF and IE).

http://codepen.io/anon/full/LHeEq

Thanks!

[chrisburton]

@thebluecasket I would suggest using Typekit or another web font distributor as you’re violating the EULA on Skolar.

[thebluecasket]

Yeah, Typekit will be implemented once the WordPress stage happens. I happen to have those 2 families (been waiting to use them together for a while!) so I tried to put together a working demo to share with my friend him without having the share the fonts or go all-in on Typekit just yet.

Any pointers or tips?

[chrisburton]

Using @font-face with them violates the EULA. Doesn’t matter if you have the font legitimately. By that I mean online. @font-face can obviously be used locally.

Solution: Use Typekit and that will solve your problem. You can use it locally by just adding “localhost” in the settings.

[Author]

Posts