Add Arabic Custome Font

jawabri

Hi,

I am unable to add Arabic custom font, it is always overwritten by the page setting, I want this font just to be used for the Arabic website without affecting the English one ! please help

Air

Hello:-)

Please tell me what you have exactly done until now to make it happen, so I could guess were exactly is the issue.

With kind regards.

jawabri

hi,
I changed the font family in the RTL css file then I discoverd that the RTL css file is not loaded ,so I add the css code in the custome css for the each page for visual composer,, it didt work, .
when I inspect the elements , I can clerly see that it is taknig the font from the component setting, so if I remove that line on the runtime it is working ,
now how I can force it to take the font in the css file , or at least to add the custom font to the composer component

Air

Well as I remember you have to add definitions for custom fonts at start of CSS file, so In this case I would rather add definitions in style.css(best in child theme if you use it) on the beginning, and then use them with custom CSS.

So:
style.css

/* Definition of Arabic Custom Font */
@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

/* rest of CSS */

Hope this gives you some hints.

With kind regards.

jawabri

Thanks for your quick response and thats what I did, but the things is it is overwriting font family by the default font from the visual composer, and in the visual composer there is no place to add my font.

Air

Show me link to your page and tell me what in name of your font. Also tell me in what files you made changes.

With kind regards.

jawabri

Hi,
this is my staging link : http://bloozar.com/
please click on the Arabic Language link, I did the changes on the main Style.css file and also to the RTL.css file ,
but still it is overwriting the css by the one generated by visual composer.

I would like to add the custom font just for the Arabic version, the English version is fine.
please try to add any custom Arabic font , my defined font called : ge_thameenbook

Thanks

Air

OK I see what is your problem :-)

You thought that all definitions of font-family are in style.css and you updated all that were there, but most important are in user.css http://bloozar.com/wp-content/themes/thirteen/user/user.css?ver=1.0.8
This file is generated so don't edit it, but overwrite its rules in custom CSS field.

Hope you can make it now.

With kind regards.

jawabri

Could you please help me more ? where I can add the custom font code ?
I don't want to affect the English Language font also.

how I can do that

jawabri

I would like to change the whole fonts in the Arabic site to one font,, and just to for the arabic , nothing should be changed in the english site

Air

I am off for weekend, however try using body.rtl or html[lang="ar"] selector for this styles that should have this style - it should be enough for your site.
Just prepend styles you add to custom CSS with one of these.

With kind regards.