Search code examples
htmlcssfontsfont-face

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

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

Solution

  • 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