CODEWITHSUNDEEP
cssfont-face
pachi
pachi

Reputation: 233

How can I remove a font dowloaded with @font-face from the browser cache?

Some days ago I made a mistake: I published a new release of my webapp using @font-face with a limited version of "Droid Sans" (no Latin characters). The font file are hosted on my server. Now I've changed the font with a full version (most of my customers are Spanish). The new customers get the full font with no problem, but the customers who accessed first time with the limited font don't get the special characters.

I guess the old font is somewhere in the browser cache, but I haven't been able to remove it.

@font-face {
font-family: 'Droid';
src: url(/files/DroidSans.eot);
src: url(/files/DroidSans.eot?iefix) format('eot'),
     url(/files/DroidSans.woff) format('woff'),
     url(/files/DroidSans.ttf) format('truetype'),
     url(/files/DroidSans.svg#webfontw7zqO19G) format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'DroidBold';
src: url(/files/DroidSansBold.eot);
src: url(/files/DroidSansBold.eot?iefix) format('eot'),
     url(/files/DroidSansBold.woff) format('woff'),
     url(/files/DroidSansBold.ttf) format('truetype'),
     url(/files/DroidSansBold.svg#webfontSOhoM6aS) format('svg');
font-weight: normal;
font-style: normal;
}

body, a, p, div, span, li, td, th, caption {
  font-family: Droid, Optima, Calibri, Helvetica, sans-serif;
  font-size: 10pt;
  line-height: 14pt;
}

Upvotes: 2

Views: 2265

Answers (3)

nerkn
nerkn

Reputation: 1980

change the font name and link in css file. Because if you configure your server well for static files (etag, cache time), most browsers wont query for newer version of file for long time.

Upvotes: 1

Silver Light
Silver Light

Reputation: 45922

Changing font name should do the trick, since name is the only criteria for browser to see if font is cached or not cached.

Upvotes: 2

Pekka
Pekka

Reputation: 449415

The easiest way to force a reload might be adding a nonsense query string to the font URL (or changing the font name as @Silver light suggests, of course! Duh. Didn't think of that).

@font-face { font-family:Garamond; src:url(garamond.eot?r=1234567); }

This requires of course that the resource in which you have this information gets reloaded as well. If it's an external style sheet, you may have to apply the same trick to force it to refresh:

<link rel="stylesheet" href="styles.css?r=1234567890">

Upvotes: 1

Related Questions