My customized font is not displaying in Firefox version 43.0.4

After searching and trying various solutions for a specific problem on Firefox, I have come across many similar questions but none of the solutions seem to work. The issue seems to be isolated to just one page rather than affecting all pages in Firefox. I have a simple HTML page structured like this:

<html>
<head>
<meta charset="utf-8">
<style>
@font-face{
font-family: 'BYekan';
  src: url('http://bloglikecms.com/tempblogfa/BYekan.eot?#') format('eot'),  /* IE68 */
       url('http://bloglikecms.com/tempblogfa/BYekan.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
       url('http://bloglikecms.com/tempblogfa/BYekan.ttf') format('truetype');  /* Saf35, Chrome4+, FF3.5, Opera 10+ */
}
body{
    font-family: 'BYekan',tahoma !important;
text-align: right;
}
</style>
</head>
<body>
<p>سلام</p>
</body>
</html>

While Safari displays the custom font correctly, Firefox fails to do so for this particular page only. Other websites with custom fonts seem to render fine on Firefox, leaving me puzzled as to why my page is an exception to this rule. Any insights into what went wrong would be greatly appreciated.
Thanks in advance.

Answer №1

To ensure that your website displays the correct fonts on all browsers, simply download the font files and save them in the same directory as your HTML file:

   @font-face{
        font-family: 'BYekan';
        src: url('BYekan.eot') format('eot'),  /* Compatible with IE68 */
        url('BYekan.woff') format('woff'),  /* Compatible with FF3.6+, IE9, Chrome6+, Saf5.1+*/
        url('BYekan.ttf') format('truetype');  /* Compatible with Saf35, Chrome4+, FF3.5, Opera 10+ */
    }

Answer №2

Include the <!DOCTYPE html> line in your code and give it a shot.

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

CSS problem: The vertical line does not extend far enough following the heading

I am encountering a small problem with my CSS code. I am trying to add a Vertical line after my heading using bootstrap utilities, but I am running into an issue. Here is a real-time example of the code I am working on: <!DOCTYPE html> <html l ...

Experiencing a problem with the Wait for element visibility feature in Selenium WebDriver version 2.44.0

I am encountering an issue with erratic behavior when waiting for elements to be present or clickable. The logic I have implemented works sometimes but not consistently. Can someone provide guidance on how to resolve this issue using a more generic and sta ...

The Bootstrap grid system seems to be malfunctioning as the columns are unexpectedly stacking up

Currently, I am working on familiarizing myself with Bootstrap, and I am interested in creating a simple layout with three columns in one row. Below is the code that I have been using, which I copied from an example in the Bootstrap Documentation. <!D ...

Issue with Table Tags Not Being Properly Nested Within P Tags in the Document Object Model

While experimenting with dynamic changes to innerHTML content, I have observed some peculiar behavior when it comes to tables nested inside other elements. For instance, when creating a form with a table nested within paragraph tags like this: p /p p tabl ...

Utilize the Bootstrap grid layout to create space for empty columns on the left-hand

Is it possible to use CSS to ensure that empty columns in a predefined bootstrap grid are on the left rather than the right, without manually adding empty entries into the left hand columns? For example, if the column count is 4 (col-xs-3) and there are 5 ...

Define CSS styles based on the content of a specific cell within a table

Is there a way to target a <td> in CSS based on its content value? <table> <tr> <td>Name</td> <td>John</td> <tr> </table> For instance, how can I apply the color:bl ...

The anticipated input was a string type, but a BoundField was encountered in Django

Django version: 2.0 python: 3.7 jquery : 3.3.1 bootstrap: 3.3.7 I have integrated ajax into my Django forms by following a tutorial found here. However, I encountered an unusual error when attempting to create a new book or update an existing one. "Expec ...

Issues with Vue-Router Flexbox causing scrolling problems or no scrolling functionality

Having trouble with a component containing a router-view that displays a flexbox? The issue arises when the flexboxes do not scroll properly, cutting off the last element in the v-for loop. Various solutions have been attempted, but none seem to fully reso ...

Utilizing CSS3 Columns to control the flow of elements and enforce breaks

Struggling to articulate my question, but I'll give it a shot :D Let's talk about the images: I'm having trouble explaining, I want to align the elements like in the first image, but all I'm getting is the second and third pictures. C ...

Changing multiple tags in JavaScript within an HTML document

Here is the JSON data I have: [ { "menu": { "MenuID":"1", "OmfID":"1", "menu_name":"Coyote Blues Louisiana Menu", "menu_description":"Full menu served all day.", "menu_note":null, "currency_symbol":"$ ...

Function for accessing multidimensional arrays in PHP

I am currently working on a function to multiply two numeric multidimensional arrays. I have implemented three loops to iterate over the corresponding rows and columns. However, something seems to be going wrong. For some reason, when I comment out the fu ...

Sharing information through a hyperlink to a Bootstrap popup window

I've been attempting to send data to a Bootstrap modal window with no success so far. First, I tried: <a href="#TestModal?data=testdata" role="button" class="btn" data-toggle="modal">Test</a> However, the modal did not open as expected. ...

Is there a way to identify whether the image file is present in my specific situation?

I have a collection of images laid out as shown below image1.png image2.png image3.png image4.png … … image20.png secondImg1.png secondImg2.png secondImg3.png secondImg4.png secondImg5.png ……. …….. secondImg18.png My goal is to dynamically ...

What is the method for inserting the document URL into a text input?

Can someone provide guidance on grabbing the top URL and inserting it into a text input field? I've tried the following method, but it's not working. Any suggestions or ideas? Additionally, is there a way to make this text input field uneditable? ...

Siblings selectors within Internet Explorer slow down significantly when using the :hover pseudo-class

Sample page: http://jsfiddle.net/y2pwqch6/6/ This particular example showcases a CSS selector known as the adjacent sibling selector: .l:hover + .r { color: blue } The issue arises when hovering over any element on the page, causing Internet Explore ...

What is preventing me from utilizing TouchEvent in Safari browser?

Recently, while working on a project utilizing Angular 8, I encountered an issue regarding touch event handling. In my code, I had a handler setup like this: @HostListener('touchend', ['$event']) onTouchend(event: TouchEvent) { eve ...

Uploading videos with Node.js

What is the best package for uploading videos in Node.js and saving them to a database? ...

Is it possible to use getJSON to retrieve a value from an HTML tag ID that has already been displayed on a webpage? How about using json_decode

Is there a way to retrieve the value using the HTML tag ID after an HTML page has been rendered? For example, how can I access the date value using the td_date in my JavaScript function? Below is the code snippet that populates the data on the page: listS ...

Adjust focus dynamically on pressing enter in an HTML form

I am currently working on adjusting the functionality of my HTML input form to change focus upon pressing the enter key. I need to trigger the saveValue() function from the input field when the enter key is pressed and then move the focus to the next input ...

The error message states that the property '$refs' cannot be found on the void type

Attempting to automatically focus on the next input field after typing 1 character. Encountering error: The property '$refs' does not exist on type 'void'. Here is the code snippet: setup() { const autoFocusNextInput = (event, max: ...