Question 235048 in Html Question posted in
Some basic documentation can be found here.

Html – font-face is not working in CSS and browser is not showing my font

@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 tried to add my font to CSS with font-face but it is not showing in browser and I don’t know why.
The path of the font is correct, the font file is not damaged and there are no errors in the console.
I used other font files but still not working.
what should I do, do I missing something?
I appreciate if you help me.

Tags:

2

Answers


  1. 0

    I will sometimes have this problem if I use the GoogleFonts CDN and my VPN is "ON".

    Login or Signup to reply.
  2. 0

    The @font-facerule has 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')
}

    Remove the last comma – it invalidates the src property value.
    Besides, the correct format identifier for .ttf is truetype

    font-family: BYekan!importan;

    Also breaks your css rule it must be BYekan!important; (missing 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search