How to reset css fonts cache

Question

I've changed my fonts in the server, but the browser get the old version of the css file where fonts are writed, how to reset the cache?, i've tried to delete browser cache and delete the old file css, but they still are getting the old cs, i've tried to reload the server, how to fix that?

Answer 1

I've noticed this happen only in Firefox, which is very annoying, however, if this is the same situation as you here, refresh with SHIFT + CMD + R (if you're on a mac, I presume the windows alternative is CTRL + SHIFT + R)

That'll clear your cache for that page too + SHOULD show your fonts :)

Answer 2

Make sure your browser isn't displaying local fonts — I spent almost one hour trying to figure out how to clear the font cache in Firefox, while the issue had nothing to do with that.

Check your webserver logs : are font files downloaded ? If not, then it's likely you're using local fonts.

Consider this real case scenario :

@font-face{
    font-family: SuperFont;
    src: url('../fonts/Superfont.ttf'),
}

I copypasted this code from somewhere, removing part of the src definition, not noticing the ending comma which made this line invalid CSS. Therefore the font was not downloaded.

However, since I had Superfont already installed locally, it seemed to work because the browser recognized the font-family. Well, until I decided to change the font file, but keeping the font-family definition to spare further modifications of the CSS file…

Morality : when testing fonts, use an unambiguous custom font-family name.