Hello

To apply your font as the default font you can also add the following to Custom CSS field....

body {

    font-family: 'Droid Arabic Kufi', sans-serif;

} 

To override all other font settings (titles etc.) you can use the following instead...

body {

    font-family: 'Droid Arabic Kufi', sans-serif !important;

} 

Ciarán

This is my css code now

.sidecol_block .module, .sidecol_block .module_menu {
margin-bottom: 10px;
}

@import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);

body {
font-family: 'Droid Arabic Kufi', sans-serif !important;
}

but still if you see our website http://www.hadimosque.com/ choose arabic from top flat/language, you can see the font is not "Droid Arabic Kufi" but still the old same one

Hello

It appears the font is not importing for you. Have you considered using the method here to add your font to the template options... http://www.joomla51.com/forum/8-commercial-templates/3263-adding-new-google-fonts

Alternatively may I suggest sending temporary administration access to your Joomla installation to info@joomla51.com and we will examine this issue further. For our reference please paste a link to this post in your email.

Ciaran

I tried to add font using the methond you said but still not work, already sended you email for admin access at your provided email

Previously you solve that issue on email by saying to choose the arabic font from template parameter.

Now i updated the template and font is lost i mean "Droid Arabic Kufi" font now not appearing in template parameters? So how can i import google font in template parameter?

Hello

May I suggest the following forum post on adding additional fonts to your template parameters... http://www.joomla51.com/forum/8-commercial-templates/3263-adding-new-google-fonts

Ciarán

I am using arabic fonts from https://arabicfont.org
how can I use them in my website ? what css code to use ? and will all readers be able to read them in all devices ?

Hello

Adding custom non Google fonts to your template is a little tricky. However it is possible

Firstly upload your font files to the ../templates/[YourTemplate]/fonts folder.

Then to actually import these files you can add the following to the Custom CSS field of your templates parameters..

@font-face {

  font-family: 'YourFont';

  src: url('../fonts/yourfont-webfont.eot');

  src: url('../fonts/yourfont-webfont.eot') format('embedded-opentype'), url('../fonts/yourfont-webfont.woff2') format('woff2'), url('../fonts/yourfont-webfont.woff') format('woff'), url('../fonts/yourfont-webfont.ttf') format('truetype'), url('../fonts/yourfont-webfont.svg') format('svg');

  font-weight: normal;

  font-style: normal;

} 

Once your fonts are loaded you must then assign the font to the HTML elements of your choice with something like the following (Custom CSS field)...

body {

    font-family: YourFont;

} 

Ciarán