ThemeForest

@font-face fallback font size?

636 posts
  • Has been a member for 3-4 years
  • Author had a File in an Envato Bundle
  • Interviewed on the Envato Notes blog
  • Envato Staff
  • Support Staff
  • Beta Tester
  • Exclusive Author
  • Sold between 250 000 and 1 000 000 dollars
  • Elite Author
  • Bought between 1 and 9 items
  • United States
  • Referred between 500 and 999 users
cudazi 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!

2 years ago
cudazi is an Envato staff member
1407 posts YOU TOUCH IT YOU BUY IT
  • Has been a member for 2-3 years
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Exclusive Author
  • Sold between 250 000 and 1 000 000 dollars
  • Elite Author
  • Bought between 10 and 49 items
  • Referred between 50 and 99 users
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 :(

2 years ago
636 posts
  • Has been a member for 3-4 years
  • Author had a File in an Envato Bundle
  • Interviewed on the Envato Notes blog
  • Envato Staff
  • Support Staff
  • Beta Tester
  • Exclusive Author
  • Sold between 250 000 and 1 000 000 dollars
  • Elite Author
  • Bought between 1 and 9 items
  • United States
  • Referred between 500 and 999 users
cudazi 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. :)

2 years ago
cudazi is an Envato staff member
1841 posts
  • Has been a member for 3-4 years
  • Exclusive Author
  • Sold between 100 and 1 000 dollars
  • Bought between 10 and 49 items
  • Europe
  • Referred between 100 and 199 users
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…)

2 years ago
636 posts
  • Has been a member for 3-4 years
  • Author had a File in an Envato Bundle
  • Interviewed on the Envato Notes blog
  • Envato Staff
  • Support Staff
  • Beta Tester
  • Exclusive Author
  • Sold between 250 000 and 1 000 000 dollars
  • Elite Author
  • Bought between 1 and 9 items
  • United States
  • Referred between 500 and 999 users
cudazi 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.

2 years ago
cudazi is an Envato staff member
887 posts
  • Has been a member for 2-3 years
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Contributed a Tutorial to a Tuts+ Site
  • Author had a File in an Envato Bundle
  • Author had a Free File of the Month
  • Exclusive Author
  • Sold between 100 000 and 250 000 dollars
  • Elite Author
  • Bought between 50 and 99 items
  • France
  • Referred between 50 and 99 users
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;}
2 years ago
by
by
by
by
by