CODEWITHSUNDEEP
javascriptcss
Safsafs Site
Safsafs Site

Reputation: 23

Displaying Amharic text correctly in browsers

I failed to display Amharic language in my website ,i used @font-face in css properties file linked in the main header (dynamic) ,added also font-family to each class where i added amharic language ,but i see only that only text style is rendered but the characters are not changing and displays strange chracters like(በ አማርኛ ለመጻፍ የሚያስችል ኪ ቦርድ) The problem is when i install the same font under windows ,it shows properly in all browsers. So how can i substitute and make the website rely on the font i want to display.

Please provide me with good solution. this website is displaying amharic using javascript and something else :

<script src="http://www.abugidainfo.com/amharic/wp-includes/js/handleamharic.js" type="text/javascript"></script>

http://www.abugidainfo.com/amharic/ =this is the url that display amharic (/amharic/)

what i must use to display amharic in my website too? Thanks in advance.i hope somebody can come up with a good fix.Thanks again.

CSS/ (just few first lines)

@font-face {
    font-family: 'abyssinica_silregular';
    src: url('abyssinicasil-r.eot');
    src: url('abyssinicasil-r.eot?#iefix') format('embedded-opentype'),
         url('abyssinicasil-r.woff') format('woff'),
         url('abyssinicasil-r.ttf') format('truetype'),
         url('abyssinicasil-r.svg#abyssinica_silregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*-----------------------------------------------------------------------------------*/
/*  1.  Document Setup (body, common classes, structure etc)
/*-----------------------------------------------------------------------------------*/
html, body {
    height: 100%;
    -webkit-font-smoothing: antialiased;
}
body {
    margin: 0 auto;
    background-color: #fbfbfb;
    font-size: 13px;
    line-height: 18px;
    /*font: 100%/1.618 sans-serif;*/
}
a {
    color:#6e757b;
    -webkit-transition: color 100ms ease-in 0ms;
    -moz-transition: color 100ms ease-in 0ms;
    -o-transition: color 100ms ease-in 0ms;
    transition: color 100ms ease-in 0ms;
}
a:hover {
    color:#6b7278; /*008fd5;*/ 
}
h1, h2, h3, h4, h5 {
    color: #444;
}
h1 {
    font-size: 28px;
}
h2 {
    font-size: 26px;
}
h1, h2 {
    font-weight: normal;
}
#primary h1, #primary h2 {
    font-size: 20px;
    font-family: "Open Sans", Arial, Verdana;
    font-weight: normal;
}
#primary h2 {
    /*
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: -0.05em;
    color: #777;
*/
    color: #999999;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.045em;
    text-transform: uppercase;
    line-height: 2.3em;
}
#primary h1.entry-title {
    line-height: 1.3em;
    letter-spacing: -1px;
    font-size: 28px;
    font-weight: bold;
    padding: 0;
    margin: 0;
}
h1.site-title {
    font-size: 1.71429rem;
    font-family: "Open Sans", Verdana, Geneva, sans-serif;
    font-weight: 600;
    letter-spacing: -0.045em;
    display: inline-block;
    color: #F96;
}
h1.site-title a {
    color: #080809;
    text-decoration: none;
    font-size: 36px;
    font-style: normal;
    line-height: normal;
    font-weight: 300;
    text-transform: none;
    font-family: "Arial Black", Gadget, sans-serif;
}
h1.site-title a:hover {
    color: #CCCCCC;
}
h1.page-title {
    padding:0;
    margin: 0;
    line-height: 1.1;
    font-size: 28px;
    font-weight: normal;
}
h1.compact {
    letter-spacing: -1px;
    font-weight: normal;
    max-width: 70%; 
}
h2.entry-title {
    color: #5d7898;
    font-weight: 100;
    font-size: 24px;
}
p {
    font-size: 14px;
    line-height: 1.714285714;
}
#preroll_placeholder,
#Playerholder,
object,
embed,
iframe {
    width: 100%;
    margin: 0;
    padding:0; /*0 0 20px 0*/
}

Upvotes: 0

Views: 3968

Answers (1)

Abel Chaka
Abel Chaka

Reputation: 21

Make sure you have the language and UTF are coded accordingly.

<html lang="am">
<head>
<title>Title goes here.</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>body goes here <body>
</html>

Upvotes: 1

Related Questions