Is there a way to clear a @font-face downloaded font from the browser cache?

Recently, I realized that I made an error in my webapp release by using a limited version of "Droid Sans" with @font-face for Latin characters. The font files are hosted on my server. To rectify this issue, I have now updated the font to the full version since most of my customers are Spanish. However, new customers have no problem accessing the complete font, but those who initially accessed it with the limited version cannot see special characters.

I suspect that the old font is stored in the browser cache, but I am struggling 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;
}

Answer №1

To solve the issue, simply switch the font name as it is the key factor that determines whether the browser has cached the font or not.

Answer №2

One clever strategy to trigger a refresh could involve inserting gibberish into the font URL as a query string (or following @Silver light's advice by modifying the font name, naturally! Simple yet effective).

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

Naturally, this method requires that the source containing this data be reloaded simultaneously. If it pertains to an external style sheet, you might need to employ the same workaround to enforce a refresh:

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

Answer №3

Modify the font name and link in the CSS file to enhance website performance. By properly configuring your server for static files (etag, cache time), browsers will not need to request a newer version of the file frequently.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to adjust an inline CSS style upon clicking a link?

I currently have a form that is hidden using inline styling style="display: none;" Is there a way to dynamically update this style to style="display: inline;" once a specific link on the page is clicked? ...

What is the best way to position an image in the center for mobile screens?

Struggling to center an image for mobile devices, I have successfully done so for tablets and regular desktop devices. However, I am facing challenges in editing the code to ensure full responsiveness for mobile devices. Additionally, there is excess white ...

Styling the first visible item in ngRepeat using Angular

I am working with a list that is generated using ngRepeat, which looks like this <ul class="list-group"> <li class="list-group-item" ng-repeat="data in tree | filter:key"> {{data.name}} </li> </ul> My goal is to ma ...

Do you know of any online platform that can help me convert W3-theme colors into RGB values?

As an instance, I am looking to convert the color w3-theme-d1 (a shade of grey) into its RGB code. ...

Fixed position of the element within a parent stacking context

How can I ensure that the #icon appears below the #dropdown in the following example? https://i.stack.imgur.com/GoBcR.png The position: fixed of #container seems to be creating a new stacking context for its children. Changing the position value fixes th ...

What is the best way to implement grid-gap in the display:grid property?

I've added grid-gap to both classes, but the gap area is showing up in a different color than white. Additionally, the text is aligned at the top of each cell. How can I fix this? 1) Even though I applied grid-gap to both classes, the gap area is vi ...

Utilizing JavaScript and jQuery libraries in conjunction with periods

I am a bit puzzled about when to include the period before referencing class names. For instance, in this code snippet, why is a period included before the first use of the 'active-slide' class but not for the other two instances? var primary = ...

Minor Chrome compatibility problems with CSS alignment

As someone who is new to stackoverflow, I've always found it to be a valuable resource for answers. I've had success building HTML 5 banner ads using GSAP (Greensock Animation Platform) in the past, but now I'm facing a CSS alignment issue t ...

Struggling to design a responsive layout as the div on the right keeps overlapping the div on the left

I recently built a React component that consists of two columns. In the left column, there's a calendar while the right column contains some text along with an input and select field. However, I noticed that when I resize the window, the elements on ...

Disable the background color css when hovering over a button

I'm having trouble with my Angular and HTML code. https://i.stack.imgur.com/Ea5oV.png The image above shows that a background color appears when hovering over the first icon. I've attempted: .sidemenuitm { padding: 10px 5px; cursor: poin ...

Switching the default browser for npm live-server

When I use the npm live-server package to preview my website as it changes, it keeps opening in Edge even though Chrome is set as my default browser on my system. I attempted to use the command suggested on the npm website: live-server --browser=chrome H ...

What is the best way to add color to a Table Header?

I'm working on a HTML/CSS table and I want the header row to have a specific background color. Below is my code: <table class="contentTable"> <tr class="contentTableHeader"> <th>No.< ...

Exploring the integration of Tailwind CSS code within a basic HTML file for utilization in a React project

I have been incorporating Tailwind CSS code in my React projects, mostly within a CSS file using @apply. Now I am interested in transitioning to simple HTML with the Tailwind CDN. How can I make this switch seamlessly? Here is an example of what I current ...

Can the behavior of "flex-end" be emulated in :before and :after pseudo-elements?

I have come across a piece of code that creates a checkbox using the pseudo-elements :before and :after, along with a hidden input to handle the selection logic. The current setup works fine and behaves as expected. However, I am curious if it is possible ...

Adding color to the header's top section and leaving the navigation bar untouched

A few days ago, I posted a question on this platform regarding customizing CSS related to search forms within Bootstrap. The response I received from Charlie was incredibly helpful in refining the code for my header and navigation elements. You can view hi ...

The bootstrap 4 modal is not displaying the button as expected

I am currently working on an Angular 4 project and I am trying to implement a pop-up using Bootstrap 4. <div> <span class="text-center" id="span1">{{title}}</span> <button type="button" class="btn primary-btn" data-toggle="modal" data ...

What is the best way to show HTML code on a REACT website without disrupting the existing styles?

I am trying to showcase the following code in a REACT webpage, but it is not displaying as code. Instead, it is showing as actual elements. How can I display the button codes below as actual code? <code> <pre> <Button className='btn-grv ...

Customizing the appearance of Indicators and Paginator in PrimeNG Carousel

I have integrated a carousel using PrimeNG which has the following design here Take note of the style of the carousel indicators and navigators. I want to achieve the default style of indicators/navigators for the carousel as shown here I have included t ...

If the background image on a div is not visible, then the alt text of the

Here is my unique HTML code consisting of a single div and an image positioned outside the div. <div runat="server" id="ProductThumbnail" style="width:140px;height:140px;position:relative;background-position:center;background-repeat:no-repeat;"> ...

"Enhance your listening experience with an audio player featuring album covers as captivating

Is there a way to create an audio player with the album cover image serving as the background, while ensuring all control buttons are displayed on top of that same image? I attempted using the following code snippet: <audio controls = 'controls&ap ...