Question

I need a solution.. I am using google fonts on my website, but it is not working in safari, how can I tell the browser to use a different style when the font is not working? Here is my css code:

@import url(http://fonts.googleapis.com/css?family=Pontano+Sans); 
    h2{ 
    font-family: 'Pontano Sans', sans-serif; 
    font-size: 15px; 
    text-transform: uppercase; 
    } 

I just want to have another css rule like this, but without it overriding the above rule:

h2{        
font-family: Arial, Helvetica, sans-serif; 
    color: #666; 
    font-size: 12px; 
}

Answer 1

you should use the web-fonts loader capabilities to handle scenarios where fonts are not loaded.
that way, you can specify different styles based on the load state (active / inactive / loading).

see the web-fonts loader reference on loading states (and on github).