679 posts Cudazi
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has been part of the Envato Community for over 6 years
  • Has sold $250,000+ on Envato Market
  • Has referred 500+ members
+11 more
cudazi
Envato team
says

Hello,

As a user of CuFon and basic web safe fonts, I wanted to branch out and start using @font-face…

What is the best way to size the fallback font size for browsers that don’t support @font-face?

I thought font-size-adjust would be the key but it’s not supported very widely.

Let say my H1 tags are size 30px in “League Gothic” with Arial/Helvetica as backups, 30px Arial is quite a bit different than 30px League Gothic, making a mess of the site in older browsers.

Maybe I’m just missing something very obvious… any suggestions?

Thanks!

1890 posts YOU TOUCH IT YOU BUY IT
  • Achieved the monthly Community Superstar Award
  • Has sold $750,000+ on Envato Market
  • Won a competition
  • Elite Author: Sold more than $75,000 on Envato Market
+7 more
FRESHFACE
says

I am afraid this is almost impossible to do (in a real world).

There are some solutions for sure, but..

For example you can find installed fonts via Flash, then somehow pass it over to JavaScript and then decide which font and size will be used – quite a hustle.

Other than that I don’t think there is a proper cross-browser solution without some hacking :(

679 posts Cudazi
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has been part of the Envato Community for over 6 years
  • Has sold $250,000+ on Envato Market
  • Has referred 500+ members
+11 more
cudazi
Envato team
says

Thanks Freshfase, I appreciate the reply.

Other than some hacky conditionals / extra stylesheets I haven’t really thought of anything clean I can do with basic HTML sites.

Looking at my web stats, I shouldn’t be worried about it that much but I still would like it to fail gracefully. :)

2468 posts
  • Has been part of the Envato Community for over 6 years
  • Has sold $100+ on Envato Market
  • Has referred 100+ members
  • Has been a beta tester for an Envato feature
+3 more
digitalimpact
says
What is the best way to size the fallback font size for browsers that don’t support @font-face?

What browser doesn’t support @font-face?

I wouldn’t really worry about that.

http://webfonts.info/wiki/index.php?title=@font-face_browser_support

(now this is poor behavior of the TF forum…can’t insert that link properly, had to use code tags…)

679 posts Cudazi
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has been part of the Envato Community for over 6 years
  • Has sold $250,000+ on Envato Market
  • Has referred 500+ members
+11 more
cudazi
Envato team
says

I guess my main concern was that it wasn’t supported until 3.5 in Firefox, but chances are, if you’re running Firefox, you’re smart enough to update often. :)

Just submitted a theme with it and loved using it, I may be hooked.

1044 posts
  • Has sold $125,000+ on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
  • Made it to the Authors' Hall of Fame
  • Had an item featured on Envato Market
+9 more
Pixelworkshop
says

A little bit off topic but it may interest some authors, it is possible with cufon :

h1 {font-size:32px;}
.cufon-active h1 {font-size: 24px;}

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