Font-family not working in a html mobile responsive

November 30, 2022

As you can see in this 2 pictures my font-family attribute wont work on mobile devices , below I attached the code that formats .contact class , although i used the same method for the other html pages, this is the only one that wont work with the method i used for the others…

 <div class="container">
   
    <div class="row">
    <div class="col-md-6 info"> 
     
        <h1 class="contact">SAC | CONTACT</h1>

        <p class="general">Email:</p>
        <h2 class ="email">office@studioartconstruct.ro</h2>

        <p class="general">Adresă:</p>
        <h2 class="adresa">Anton Pavlovici Cehov No 2 </h2>
        <h2 class="adresa2">Bucharest, Romania</h2>
        </div>
        <div class="col-md-6 info1"> 
        <p class="general"> Mobil:</p>
        <a  class="anchortelefon" href="tel:0726855555"><h2 class="telefon"> +4 0726 85 55 55</h2></a>
        <a class="anchortelefon"  href="tel:0726855555"><h2 class="telefon"> +4 0733 61 38 93</h2></a>
        <a class="anchortelefon"  href="tel:0726855555"><h2 class="telefon"> +4 0733 61 38 93</h2></a>
      </div>
    
   <div class="col-md-12 harta1">
    <img  class ="harta" src="./img/MAP.png">
   </div>
</div>

 

    @font-face {
  font-family: antonio;
  src: url(../antonio/Antonio-Regular.ttf);
  font-weight: bold;
}
.contact
{
  font-family: 'antonio';
  font-weight: bold;
  margin-bottom: 10%;
  margin-left:5%;
  margin-right:5%;
  letter-spacing: 5px;
}

>Solution :

Can your mobile access the location from here: src: url(../antonio/Antonio-Regular.ttf);?

I’d suggest importing the fonts through Google Fonts.

Add this to you html header:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Antonio:wght@100;200;300;400;500;600;700&display=swap" rel="stylesheet">

And set your font in css like this: