移动端HTML响应式布局中font-family属性失效问题求助

从两张截图可见，我的font-family属性在移动设备上无法生效。以下是格式化.contact类的代码，我在其他HTML页面使用了相同方法，但仅该页面出现此问题...

HTML代码 #

<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>

CSS代码 #

@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;
}

排查解决建议 #

• 检查字体路径：移动设备的相对路径解析可能和桌面端有差异，确认../antonio/Antonio-Regular.ttf的路径是否正确，可换成根路径（如/antonio/Antonio-Regular.ttf）测试。
• 补充字体格式：部分移动端浏览器对TTF格式支持有限，建议添加WOFF2、WOFF格式提升兼容性：

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

• 排查样式冲突：用浏览器开发者工具查看.contact元素的计算样式，确认是否有其他CSS规则覆盖了font-family。可临时添加!important验证（不建议长期使用，需找到冲突源）：

.contact {
  font-family: 'antonio' !important;
  /* 其他样式保留 */
}

• 清除缓存：移动端可能缓存了旧CSS文件，给字体URL加版本号（如url('../antonio/Antonio-Regular.ttf?v=1.0')）强制刷新，或手动清除浏览器缓存。

内容的提问来源于stack exchange，提问作者amitria