Font-family not working in a html mobile responsive-CodePudding

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 >
   
    <div >
    <div > 
     
        <h1 >SAC | CONTACT</h1>

        <p >Email:</p>
        <h2 class ="email">[email protected]</h2>

        <p >Adresă:</p>
        <h2 >Anton Pavlovici Cehov No 2 </h2>
        <h2 >Bucharest, Romania</h2>
        </div>
        <div > 
        <p > Mobil:</p>
        <a   href="tel:0726855555"><h2 >  4 0726 85 55 55</h2></a>
        <a   href="tel:0726855555"><h2 >  4 0733 61 38 93</h2></a>
        <a   href="tel:0726855555"><h2 >  4 0733 61 38 93</h2></a>
      </div>
    
   <div >
    <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;
}

CodePudding user response：

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:

font-family: 'Antonio', sans-serif;

NOTE: For this, I included all weights of the Antonio fonts. Go to Google Fonts (here) to select what you actually need, if necessary.