Font family not appearing correctly in Firefox due to CSS issue

Hi there, I've been struggling with this CSS code in a scss file:

@font-face {
    font-family: 'tr-icon';
    src:url('../fonts/tr-icon.eot?88d087');
    src:url('../fonts/tr-icon.eot?#iefix88d087') format('embedded-opentype') ,
        url('../fonts/tr-icon.ttf?88d087') format('truetype') ,
        url('../fonts/tr-icon.woff?88d087') format('woff') ,
        url('../fonts/tr-icon.svg?88d087#trends') format('svg') ;
    font-weight: normal;
    font-style: normal;
}
[class^="tr-icon-"], [class*=" tr-icon-"] {
    font-family: 'tr-icon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
}

I'm getting an error in Firefox that says:

downloadable font: rejected by sanitizer (font-family: "tr-icon" style:normal weight:normal stretch:normal src index:0)

I've tried different solutions like this or that, but nothing seems to be working. Any other suggestions?

htmlcssfirefoxfonts

Answer №1

Have you attempted this method?

Did you try removing the query string at the end of each line?

@font-face {
    font-family: 'tr-icon';
    src:url('../fonts/tr-icon.eot');
    src:url('../fonts/tr-icon.eot?#iefix') format('embedded-opentype') ,
        url('../fonts/tr-icon.ttf') format('truetype') ,
        url('../fonts/tr-icon.woff') format('woff') ,
        url('../fonts/tr-icon.svg#trends') format('svg') ;
    font-weight: normal;
    font-style: normal;
}

The presence of the query string at the end of each URL or path may be the reason why your font is being rejected by the sanitizer.

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

Attempting to create a dynamic grid layout utilizing CSS to ensure optimal responsiveness

I am working on creating a webpage layout similar to the one in the link below: The maximum width for the layout is set to 1600px. However, I am facing challenges in making it fully responsive. This is because all the boxes are given widths in percentages ...

htmlcss

CSS tip: Create a trendy design by adding a slanted border to the last

I need help creating a unique menu list with a white border design. The borders should all be straight by default, except for the last border which must be slanted. ul { background-color: #183650; } li { list-style: none; display: inline-block; b ...

javascripthtmlcsscss-transforms

What is the best way to eliminate the excess space below my personalized badge design?

How do I eliminate the space below the badge component without using padding or margins? I suspect it may be related to line-height, but I want the badge height to perfectly match its content. Any suggestions on how to achieve this? https://i.sstatic.net/ ...

csstailwind-css

Determine the exact width of text without rounding in Javascript

I'm facing an issue with a div element that I'm manipulating using Javascript to change its position. The problem is that it's rounding off incorrectly. #hi{ background-color: blue; width: 2px; height: 10px; position: absolu ...

javascripthtmlcss

I am in search of a clean and efficient method to modify the class of a link that triggers an HTMX request in Django. Perhaps something like "auto-refresh" or a similar solution would be ideal

I've encountered an issue with HTMX in Django. The page consists of two main components: a list of categories and the content that is displayed when a category is clicked. Initially, everything was working smoothly with standard htmx functionality. H ...

javascriptcssdjangodjango-templateshtmx

Implementing a horizontal scrollbar for an AJAX datatable

Is there a way to incorporate a horizontal scrollbar into an Ajax Datatable? I attempted to use "ScrollX" :true, however, this method did not prove successful. $(document).ready(function () { $('#myDataTable1').DataTable({ "aj ...

jquerycssajax

Identify and emphasize CSS codes within PHP files using Notepad++

I'm working with a PHP file in Notepad++ that correctly highlights PHP code. Within this file, I have JavaScript code which is properly recognized between the <script type="text/javascript"> and </script> tags. However, the CSS code withi ...

cssnotepad++

The rotation transformation on the Z-axis occurs once the animation has finished

Currently, the rotation on the Z-axis is occurring after the animation, even though I am still in the early stages of creating an animated hand opening. The intention is for the fingers to only rotate on the X-axis to simulate a realistic hand opening moti ...

htmlcss

What's the best way to use a single tag with a class to replace multiple nested blockquote tags

I have a collection of messy HTML files filled with repeated blockquote tags used to showcase lines of poetry. For example: <blockquote><blockquote>roses are red</blockquote></blockquote><br> <blockquote><b ...

pythonhtmlbeautifulsoupblockquote

What are the best methods for maintaining the appearance of my website when resizing my browser window?

I am replicating the Twitter profile page, but I am facing an issue where the text and images get jumbled together whenever I resize my browser. This results in a messy appearance of the page. How can I ensure that the text and images stay in the same rela ...

htmlcsstwitter-bootstrapresponsive-design

Issues with processing the $ajax URL in Ajax and jQuery calls are causing malfunctions

Allow me to provide a clearer explanation. My goal is to dynamically update the content of an HTML element based on data received from a REST API. The process involves making an AJAX call to the API URL and then updating the content accordingly. <butt ...

javascriptphpjqueryhtmlajax

Utilizing Selenium with Python to choose a specific option from a dropdown selection

I am currently experimenting with using Selenium in Python to choose the option "Custom date" from the dropdown menu displayed in the image below: https://i.sstatic.net/ASHU2.png The hierarchy of divs is structured as shown here: https://i.sstatic.net/xtA ...

javascriptpythonhtmlcssselenium

Access the original source code using jQuery

Is there a way to retrieve the raw HTML code (as seen in Chrome's source code window) using JQuery without having quotes converted to &quot or HTML symbols converted to text? I have tried using html() and text(), but neither method seemed to give ...

javascriptjqueryhtml

JavaScript issue: Submitting form does not trigger the associated function

I am currently in the process of learning JavaScript as part of my university course, and I have encountered an issue where my function is not being called. I am seeking to gain a better understanding of why this problem is occurring. Summary The situati ...

javascripthtmlforms

The alignment of labels and text inputs using CSS flexbox is not correct

I am attempting to create a responsive layout for the labels and text inputs in my HTML code. I want them to align in a single row, with one label and one text input per row when the screen width is below a certain threshold. Once the screen width exceeds ...

htmlcss

Struggling to access a JSON file using Angular framework

I'm currently working with the following JSON and controllers: JSON Format: {"tomcatLogDir":"C:\\apache-tomcat-7.0.70\\logs","tomcatLogs":["1.log","2.log","3.log"]} Factory: app.factory('filesFactory', [ '$http&a ...

htmlangularjsjsonangularjs-ng-repeatangularjs-controller

Utilize JavaScript and HTML to show error messages based on whether the user is deactivated or if the input is invalid

I need to show different error messages under the 'Email Address' input if the user is disabled and under the 'Password' input if the user is invalid. In my debugging process, I discovered that a user being disabled results in a "Status ...

javascripthtmlangularjs

Change the button text without the need for a click, automatically switch

How can I make a button switch between 'click here' and 'download' every 2 seconds without requiring user interaction? The code I've tried so far is below, but it's not working as expected: <div class="assetClass customBut ...

jqueryhtml

When using jQuery, the content loaded with the $ajax function only displays after refreshing the page

Located on an external server is a directory containing various .html files, including one named index.html. The server has the ability to load either the folder name or foldername/index.html in its URL. Each html file within the directory loads a corresp ...

javascriptjqueryhtmljsonajax

Generating a PDF from a CSS3 multi-column layout with the help of snappy (a wrapper for wkhtmltopdf)

I am attempting to create a PDF with three columns using barryvdh/laravel-snappy and wkhtmltopdf. Since the text that will populate these columns varies in length, I need a method that allows the text to flow freely within the columns. I have attempted to ...

phpcsswkhtmltopdf