The font-face declaration is not functioning properly within the CSS code, causing the browser to fail in displaying the

@font-face {
    font-family: BYekan;
    font-style: normal;
    font-weight: normal;
    src: url(../resources/BYekan.eot);
    /* IE9 Compat Modes */
    src: url(../resources/BYekan.woff) format('woff'),
        url(../resources/BYekan.woff2) format('woff2'),
        /* Super Modern Browsers */
        url(../resources/BYekan.ttf) format('ttf'),
        /* Safari, Android, iOS */
}

* {
    box-sizing: border-box
}

img {
    vertical-align: middle;
}

.mySlides {
    display: block;
    width: 100%;
    height: 500px;
}

.tab {
    direction: rtl;
    unicode-bidi: bidi-override;
    right: 0;
    position: absolute;
    margin-top: 4%;
    margin-right: 5%;
    z-index: 10 !important;


}

.tab-buuton {
    background-color: transparent;
    border-color: transparent;
    color: white;
    font-family: BYekan !importan;
    font-size: 16px;
}

.logoHolder {
    width: 50px;
    margin-left: 40%;
    position: absolute;
    margin-top: 1%;
    z-index: 10 !important;

}


.login {
    width: 150px;
    position: absolute;
    margin-top: -33%;
    margin-left: 2%;
    z-index: 10 !important;
    direction: rtl;
    unicode-bidi: bidi-override;
}

.loginTypography {
    color: white;
    position: absolute;
    background-color: transparent;
    border-color: transparent;
    font-family: BYekan !important;
    direction: rtl;
    font-size: 16px;
    margin-right: 10%;

}

.slideshow-container {
    max-width: 100%;
    position: relative;
    margin: auto;
}



.caption {
    color: #f2f2f2;
    font-size: 40px;
    padding: 8px 12px;
    position: absolute;
    margin-left: 10%;
    font-family: BYekan !important;
    bottom: 50%;
    min-width: 160px;
    text-align: center;
}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://kit.fontawesome.com/1228ed801f.js" crossorigin="anonymous"></script>
<div class="tab">
   <button class="tab-buuton" onclick="">صفحه اصلی</button>
   <div class="dropdown">
      <button class="tab-buuton" onclick="">ورزش ها</button><i class="fa-solid fa-caret-down" style="color: #ffffff;margin-right: -7px"></i>
      <div class="dropdown-content"><a href="#">فیتنس</a><a href="#">رزمی</a><a href="#">توپی</a></div>
   </div>
   <button class="tab-buuton" onclick="">اجاره سالن</button><button class="tab-buuton" onclick="">درباره ما</button>
</div>
</body>

Hello
I attempted to include a custom font in my CSS using @font-face, however, it doesn't seem to be displaying in the browser and I'm unsure why. The file path of the font is accurate, the font file itself isn't corrupted, and no errors are showing up in the console. I've also tried using different font files but still no luck. Any suggestions on what steps I might be missing or overlooking? Your assistance is greatly appreciated.

Answer №1

The @font-face declaration contains some errors:

@font-face {
    font-family: BYekan;
    font-style: normal;
    font-weight: normal;
    src: url(../resources/BYekan.woff) format('woff'),
        url(../resources/BYekan.woff2) format('woff2'),
        url(../resources/BYekan.ttf) format('truetype')
}

Please remove the last comma as it causes issues with the src property.
Additionally, the correct format identifier for .ttf files is truetype

font-family: BYekan!importan;  

You need to correct your CSS rule by using BYekan!important; (missing the letter 't')

@font-face {
  font-family: BYekan;
  font-style: normal;
  font-weight: normal;
  src: url("https://db.onlinewebfonts.com/t/52ce4de2efeeb8b18dcbd379711224f3.eot");
  src: url("https://db.onlinewebfonts.com/t/52ce4de2efeeb8b18dcbd379711224f3.eot?#iefix")format("embedded-opentype"), url("https://db.onlinewebfonts.com/t/52ce4de2efeeb8b18dcbd379711224f3.woff2")format("woff2"), url("https://db.onlinewebfonts.com/t/52ce4de2efeeb8b18dcbd379711224f3.woff")format("woff"), url("https://db.onlinewebfonts.com/t/52ce4de2efeeb8b18dcbd379711224f3.ttf")format("truetype")
}

body {
  background: #000
}

.tab-buuton {
  background-color: transparent;
  border-color: transparent;
  color: white;
  font-family: BYekan!important;
  font-size: 16px;
}
<div class="tab">

  <button class="tab-buuton" onclick="">صفحه اصلی</button>

</div>

Answer №2

At times, I encounter this issue when utilizing the GoogleFonts CDN while my VPN is active.

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

Securing the connection between clients and servers through encryption

For my mobile client, I am using Xamarin, with node.js as my backend and MongoDB as the database. The main issue I am facing is how to securely store user data in the database. If I only do server-side encryption, there is a risk of hackers intercepting th ...

What is the best way to transfer Django variables to HTML?

Looking to send data from the rs232 port and showcase it in a graph using javascript? Check out this resource: Seeking guidance on importing the views.py variable into my html file. views.py import io from django.http import HttpResponse from django.shor ...

jQuery Mobile is experiencing page height inaccuracies

My web application, built with jQuery Mobile 1.2.0, is encountering an issue with page height calculations on Windows Phone. While iOS and Android display correctly, there is a gap at the bottom of the page on Windows Phone. Is there a CSS-only solution t ...

Implementing image caching in tvOS with React-Native: A step-by-step guide

Looking to Implement Image Caching in tvOS using React Native I'm trying to figure out how to cache images that I download from the internet on my Apple TV. I've experimented with various libraries, but none seem to be compatible with tvOS. Any ...

The efficiency of upsert operations diminishes as the size of the collection (number of documents) increases

Request Scenario: I am using a REST API to access battle results from a video game. The game is an online team vs team match where each team consists of 3 players who can select from a pool of 100 different characters. My goal is to track the wins, losses ...

Using jQuery to enable scrolling and dynamically changing classes

I'm currently working on enhancing my website with a feature that changes the opacity of the first section to 0.4 when a user scrolls more than 400 pixels down the page. I attempted the following code without success: if($("html, body").offset().top ...

Modifying the default label for each bubble on a bubble chart with chartjs-plugin-datalabels

Is there a way to add labels to each bubble in the bubble chart using chartjs-plugin-datalabels? For every bubble, I'd like to display the label property of each object within the data.dataset array, such as "Grapefruit" or "Lime". Currently, I'm ...

What is the best way to incorporate dynamic fields in React js that are determined by my chosen attributes?

My task involves creating dynamic fields based on selected attributes using two array objects - addAttributes and fakeAttributes. The fakeAttributes hold details of the selected attributes, which are displayed when passed through a dropdown select componen ...

What is the process for displaying a three.js project?

I've been trying to follow a beginner's tutorial on three.js from this link, but I'm encountering an issue in part 2 where nothing seems to render on my webpage. Despite checking out other guides, I can't seem to solve the problem. I u ...

Struggling with CSS Styling - Unable to align text in the middle of a table

.transfers table{ width: 650px; margin: 450px auto; border-collapse: collapse; } .transfers tr{ border-bottom: 1px solid #cbcbcb; } .transfers th{ font-family: "Montserrat", sans-serif; } .transfers th, td{ border: none; height: 30px; pa ...

What is a reliable library for creating JavaScript charts and graphs?

As I set out to find a reliable javascript library for generating interactive graphs and charts from JSON data with the help of AngularJS, I encountered numerous options. Seeking expert advice on the most suitable library for creating dynamic graphs that a ...

Addressing Equity Concerns within JavaScript Programming

I can't figure out why the final line in this code snippet is returning false. Is it not identical to the line above? const Statuses = Object.freeze({ UNKNOWN : 0, OK : 1, ERROR : 2, STOPPED : 3 }); class myStatus extends Object{ co ...

Twilio SMS Notification: The Class extension value provided is not a valid constructor or null

When attempting to utilize Twilio for sending SMS messages in a Vue.js project, I encountered an error while accessing Tools -> Developer Tools. <template> <div> <input type="text" v-model="to" placeholder="Ph ...

Excessive Font Awesome Icons causing navigation bar to appear oversized

My Font Awesome icons are causing my navbar to expand in height. Despite resetting all margin and padding to 0, adjusting the margins and paddings of the icons has not helped. I even tried setting negative top and bottom margins/paddings. https://i.sstati ...

Identifying Elements Generated on-the-fly in JavaScript

Currently, I am tackling the challenge of creating a box that can expand and collapse using regular JavaScript (without relying on jQuery). My main roadblock lies in figuring out how to effectively detect dynamically added elements or classes to elements a ...

Refreshing data from firebase on each route change

I created an Angular service that retrieves items from Firebase using snapshotChanges and returns them. In my component, I subscribe to the data and store it in an array. I then display the data in cards using ngFor. However, whenever I navigate between p ...

JavaScript error: Function is not defined when using Paper.js

UPDATE the problem has been solved by making the colorChange function global I am attempting to modify the color of the path when the 'Red' button is clicked using the colorChange function. Despite my efforts, I keep getting an error stating tha ...

Adjust column width in Bootstrap table based on content width, minimizing space usage in the column

I'm attempting to adjust the width of a specific table column in Bootstrap to fit its content width. I want the first column to take up as little space as possible. Check out the code snippet and jsfiddle link below to see what I've tried so far. ...

What is the best way to transfer information between two components in React.js by simply clicking a button?

One of the challenges I am currently facing involves rendering data from the Pokemon API in a table. Within this table, there is a button that allows users to select specific data when pressed. My goal is to send this selected data from the table component ...

Capture results from MongoDB collection using node.js

I currently have this code snippet, and it's functioning perfectly: socialPosts.find({}).toArray(function(err, result) { if (err) throw err; console.log(result); db.close(); }); When executed, it outputs a ...