Mobile Safari Menu links and footer not displaying the font-family

Question

Im struggling with a situation that is very strange, so the website is working fine for all browsers , but however in mobile they don't show correct fonts for menu and footer, which both have in common is being a tag , i don't know if it's related.

This is part of the footer :

 <footer>
    <div class="footer-wr">
      <div class="footer-item" style="display: block;">
        <div class="center-item">
        <a href="/privacidade" style="color:white; font-family: 'Barlow-Light';"><p class="txs"><?php menu("FOOTER_POLITICA"); ?></p></a>
        <p class="txs"><?php menu("FOOTER_COPYRIGHT"); ?></p>
        </div>
      </div>
      <div class="footer-item">
        <div class="center-item" id="footer_combo">
        <a href="<?php menu("FOOTER_COMBUSTIVEL_LINK"); ?>" style="color:white; font-family: 'Barlow-Light';"><p><?php menu("FOOTER_COMBUSTIVEL"); ?></p></p></a>
        <a href="<?php menu("LINK_RECLAMACOES");  ?>" style="color:white; font-family: 'Barlow-Light';"><p><?php menu("FOOTER_RECLAMACOES"); ?></p></a>
        </div>
      </div>

And this is the menu :

  <div class="menu_body_item">
                <li class="drd"><p class="dropb"><?php menu("MENU_GRUPO_URBANOS"); ?></p>
                <ul class="dropdownb">
                    <a href="/sobre" class="txs"><p style="font-size:20px;"><?php menu("MENU_SOBREA"); ?></p></a>
                    <a href="/compromisso" class="txs"><p style="font-size:20px;"><?php menu("MENU_COMPROMISSO"); ?></p></a>
                </ul></li>
            </div>
            <div class="menu_body_item" id="ax"><a href="/servicosempresariais"><p><?php menu("MENU_SERVICOS_EMPRESARIAIS"); ?></p></a></div>
            <div class="menu_body_item" id="ax"><a href="/servicosparticulares"><p><?php menu("MENU_SERVICOS_PARTICULARES"); ?></p></a></div>
            <div class="menu_body_item">
            <li class="drdb">    <p class="drop"><?php menu("MENU_RECURSOS_HUMANOS"); ?></p>
                <ul class="dropdown">
                    <a href="/trabalharnaurbanos" class="txs"><p style="font-size:20px;"><?php menu("MENU_CARREIRAS"); ?></p></a>
                    <a href="/ofertasdeemprego" class="txs"><p style="font-size:20px;"><?php menu("MENU_OFERTAS"); ?></p></a>
                </ul></li>
            </div>
            <div class="menu_body_item" id="ax"><a href="/noticias" class="txs"><p><?php menu("MENU_NOTICIAS"); ?></p></a></div>
            <div class="menu_body_item" id="ax"><a href="/contactos" class="txs"><p><?php menu("MENU_CONTACTOS"); ?></p></a></div>

Ive already tried to set directly the font-family into the html, ive also styled all their classes and nothing.

this is style css:

@font-face {
    font-family: 'Barlow-Light'; /*a name to be used later*/
    src: url('../font/Barlow-Light.ttf'),
    url('../font/barlow-light-webfont.woff') format('woff'); /*URL to font*/
    font-style: normal;

}