Search code examples
htmlcssfontsarabicwebfonts

CSS not support arabic

I have the following menu:

<ul class="menu">
  <li><a href="index.html">Home Page</a></li>
  <li><a href="news.html">Our News</a></li>
  <li><a class="active" href="services.html">Our Services</a></li>
  <li><a href="products.html">Our Products</a></li>
  <li class="last-item"><a href="contacts.html">Contact Us</a></li>
</ul>

The problem is, when I use Arabic text inside the a tags, the text disappears.

As an example,

<ul class="menu">
  <li><a href="index.html">الر ئيسي</a></li>
  <li><a href="news.html">الاخبار</a></li>
  <li><a class="active" href="services.html">الخدمات</a></li>
  <li><a href="products.html">المنتجات</a></li>
  <li class="last-item"><a href="contacts.html">اتصل بنا</a></li>
</ul>

even though I'm using meta charset="utf-8" in the HTML page. My css code:

.menu li a, .list-1 li a, .button-2, .logo {
    text-decoration:none
}
.menu {
    width:100%
}
.menu li {
    float:left;
    position:relative;
    margin-right:1px
}
.menu li.last-item {
    margin:0
}
.menu li a {
    display:inline-block;
    width:196px;
    font-size:17px;
    line-height:1.22em;
    padding:18px 0 36px;
    margin-top:10px;
    color:#fff;
    background:#000;
    text-align:center;
    border-radius:18px 18px 0 0;
    -moz-border-radius:18px 18px 0 0;
    -webkit-border-radius:18px 18px 0 0
}
.menu li a.active, .menu li a:hover {
    color:#0f0f0f;
    background:#fff;
    padding:28px 0 36px;
    margin:0
}

the template i use in this link http://www.mediafire.com/download/w5uf9wapenyitn3/myTemplate.rar

Solution

  • The Problem is here with this file:

    <script src="js/cufon-yui.js" type="text/javascript"></script>

    It`s a font file , try to /Hash/ it , and it will work (Y)