How to change the font-size and style of the fallback font

Question

I am using 'freestyle script' font to style my site heading and Georgia as the fallback font. I have downloaded the 'freestyle' webfontkit from squirrel and I am using @font-face to render the heading style. Everything is fine for browsers which support @font-face but for those which do not support @font-face like the default browser of older Android versions, I am facing a problem.

The problem is that with freestyle Script I want to keep the

  h1
   {
    font-size:25px; 
    font-style:normal;
   }

but with my fallback font ( Georgia ) I want to keep

   h1
    {
      font-size:18px;
      font-style:italic;
    }

One solution I found on net was to use modernizr...http://webdesignerwall.com/tutorials/css3-font-face-design-guide but I am in search of a simpler and no-js solution as my site is already using a lot of js before page load and is getting a bit slow to load due to that

I found a similar question on SO..Selectively Style Fallback Fonts Without JavaScript? but there was'nt any clear answer except for the modernizr solution...

It would be great help if someone could give some solution to this problem.

... Thanks in advance

Is this a real problem? Android supports `@font-face` since version 2.2. — Jukka K. Korpela, Dec 18 '13 at 17:45

score 0 · Accepted Answer · answered Dec 18 '13 at 16:47

No approach that I know of that doesn't use modernizer. Stick it in the head of your html. Don't know how people can live without it. To keep it small, use a minimum copy of Modernizer with just the selection for @font-face. Also, if you are on an Apache server, GZIP your html, css, and js by adding a short bit of code to the .htaccess. This will speed you up a lot.

Then do the following:

.fontface h1
 {
  font-size:25px; 
  font-style:normal;
 }

OR leave the modern browser alone and just do:

.no-fontface h1
 {
  font-size:18px; 
  font-style:italic;  
 }

Modernizer

Thanks cab for the tip about GZIP.I knew about minimal modernizer but was doubtful about using it...It seems GZIP will do the trick..Now I'll go with Modernizer...Kudos :) — kruxatur, Dec 18 '13 at 19:47

score 0 · Answer 2 · edited May 23 '17 at 12:28

0

There is no way to detect font-face support without JS. Easiest way is by far using modernizr as suggested or check this article by Paul Irish.

Since @font-face has fairly good support over desktop browsers I'll go on a limb and assume you need fallback for mobile browsers. If that's the case maybe you should look into server-side detection for mobile browsers (see this question).

Lastly, you could try messing around with font-size-adjust property (MDN docs and article). I never used it before and I can't find out how good is supported across browsers so you'll need to do some testing.

edited May 23 '17 at 12:28

Community

1
1

answered Dec 18 '13 at 17:10

Teo Dragovic

3,438
20
34

Thanks Teo for some really nice links... I thought font-size-adjust will be the exact thing I was looking for but alas it is supported only by FF. I can live without italizing my site heading for the small set of browsers not supporting @font-face but font-size-adjust was a must...I wish it was supported by all browsers...ne ways thanks again..SO rocks – kruxatur Dec 18 '13 at 19:52

score 0 · Answer 3 · answered Dec 18 '13 at 19:03

If you don't want to use Modernizr, I wrote a stand-alone check that's 2.2KB minimized and adds a class to the HTML tag so indicate if @font-face is supported. You can then adjust your styles the same way as with Modernizr:

.fontfacerender h1
{
  /* special font */
}

.no-fontfacerender h1
{
  /* default font */
}

How to change the font-size and style of the fallback font

3 Answers3