145 posts
  • Has been part of the Envato Community for over 2 years
  • Located in Austria
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
LovelessDesign says

I tried to use the google font “Exo” in my theme and it doesn’t look as smooth as in Photoshop. I read that the reason therefore should be that windows doesn’t support anti-aliasing in web browsers.

I read some advices and the one thing that worked best for me was using a text shadow for every heading where I use this font (e.g. text-shadow: 0 0 1px rgba(217,217,217,0.3); ).

It looks better but still not as good as in Photoshop.

How do you handle the use of Google Fonts (i think the problem exists with many google fonts)? I also read something about automatically replacing the texts with images. I don’t know how to do this and I’m not sure if it’s a good idea, cause I use the font often on my page.

Thanks for advices.

173 posts
  • Has been part of the Envato Community for over 2 years
  • Has referred 1+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
+2 more
wiseguys says

I don’t know if you can have the exact same look as in Photoshop, however below there are the 3 options available out there :)

Replacing text with images (CUFON) looks best (very close to the photoshop look), and it also looks the same in all browsers. If you’re planning to build a template I don’t really suggest using it because it could be a little time consuming for buyers in case they wanna change the font, but if it’s for your own website go for it :) So as far as looks CUFON is definitely my favorite.

The second best for looks (very close to CUFON ) is @fontface. I would definitely opt for @fontface if building a template, it’s easy to use, looks good, and it looks the same in all browsers.

The third option is google fonts. The difference of looks between FF and Chrome is pretty big, also many fonts look horrible in chrome (funny, google fonts look ugly in google chrome :D) The only advantage I can see is that it’s extremely easy to replace a font (you just replace the name of the font without downloading anything or changing css).

These are my personal opinions, hope they’re useful :)

- Chris

145 posts
  • Has been part of the Envato Community for over 2 years
  • Located in Austria
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
LovelessDesign says

thank you.

- So these themes that offer google fonts integration, do usually also use fontface for integrating the default font? Should I give the user the option to activate a text shadow for Google Fonts to make it look smoother?

- Is there a good website where I can find all fonts for integrating with @fontface. Is there also a way to get Google Fonts like “Exo” integrating with @fontface?

895 posts
  • Has sold $1,000+ on Envato Market
  • Has referred 1+ members
  • Has collected 10+ items on Envato Market
  • Has been part of the Envato Community for over 3 years
+5 more
infuse01 says

thank you.

. So these themes that offer google fonts integration, do usually also use fontface for integrating the default font? Should I give the user the option to activate a text shadow for Google Fonts to make it look smoother?

. Is there a good website where I can find all fonts for integrating with @fontface. Is there also a way to get Google Fonts like “Exo” integrating with @fontface?

Google Webfonts (all webfonts) are actually loaded with @font-face.

145 posts
  • Has been part of the Envato Community for over 2 years
  • Located in Austria
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
LovelessDesign says

yeah, i found exo in eot/woff/... etc. format. looks much better now. thanks a lot chris

But does it make sense to offer google fonts integration in my theme if it looks so bad? Shouldn’t I rather explain how they could add a new font with font-face?

173 posts
  • Has been part of the Envato Community for over 2 years
  • Has referred 1+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
+2 more
wiseguys says

yeah, i found exo in eot/woff/... etc. format. looks much better now. thanks a lot chris But does it make sense to offer google fonts integration in my theme if it looks so bad? Shouldn’t I rather explain how they could add a new font with font-face?

I use fontface personally, it’s not as simple to use as google fonts, but it’s still extremely easy. There are a lot more advantages opposed to disadvantages when using fontface.

However, a lot of themes use google fonts and users don’t seem to have a problem with that, so I doubt that it really makes a big difference to the buyer, but @fontface is definitely my personal choice :)

On fontsquirrel.com you can find the @fontface kits for most of the fonts, which contain all 3 formats that a font should have for @fontface compatibility. FontSquirrel is awesome :)

- Chris

145 posts
  • Has been part of the Envato Community for over 2 years
  • Located in Austria
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
LovelessDesign says

Thanks a lot chris. that helped very much

173 posts
  • Has been part of the Envato Community for over 2 years
  • Has referred 1+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
+2 more
wiseguys says

Glad to help :)

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by