Как исправить арабский шрифт в Safari и FireFox?

У меня есть шрифт @import из шрифтов google в моем файле css.Как исправить арабский шрифт в Safari и FireFox?

Он отлично работает в хромированном состоянии, но не в сафари и firefox.

Вот HTML для этого:

/* Fonts */ 
 
@import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css); 
 
@import url(https://fonts.googleapis.com/css?family=Droid+Sans);

<header class="container-fuild navbar-fixed-top"> 
 
    <div class="row gutter-20"> 
 
    <nav class="navbar-nav nav col-lg-3 pull-right"> 
 
     <div class="navbar"><img style="padding-top: 20px;" src="imgs/logo.png" alt="Logo" width="45"/> 
 
      <br><br> 
 
      <div id="droid"> 
 
      <h5 dir="rtl">مكتب محمد حسين شكري</h5> 
 
      <h6 dir="rtl">للإستشارات المعمارية</h6> 
 
      </div> 
 
      <h5>Mohammed H Shukri</h5> 
 
      <h6>Architectural Consultants</h6> 
 
     </div> 
 
     <ul class="nav nav-stacked col-lg-4" id="menu"> 
 
      <li data-menuanchor="page1" class="nav-item slide1"><a href="#page1" title="HomePage">Home</a></li> 
 
      <li data-menuanchor="page2" class="nav-item slide2"><a href="#page2" title="About Shukri">About Us</a></li> 
 
      <li data-menuanchor="page3" class="nav-item slide3"><a href="#page3" title="Projects">Our Projects</a></li> 
 
      <li data-menuanchor="page4" class="nav-item slide4"><a href="#page4" title="Employees">Our Employees</a></li> 
 
      <li style="margin-bottom: 15px;" data-menuanchor="page5" class="nav-item slide5"><a href="#page5" title="Contact Information">Contact Us</a></li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
</header>

в хроме это показывает, как это: