Arabic Fonts not work good in othere browsers Edge Firefox Safari

This topic has 7 replies, 2 voices, and was last updated 4 years, 9 months ago by Elise Noromit.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts

January 27, 2020 at 1:32 pm #170030

Participant

1- i have problem with arabic google fonts “Changa” & “Tajawal” ..they are works good with google chrome …but in other browsers like ( Edge / Firefox / Safari ) is not working good.. and i have upload all font file in custom fonts in setting (woff/ttf/svg ..etc).

2- i need code css that let me control all fonts in arabic pages only ..like in RTL page make all h1 ,h2 ,h3 , h4 , h5 , h6 as Changa font…and any other text like <body> <span> <P> as Tajawal font.

i did make css code buts it apply on all English and Arabic pages .. i need it to apply only in RTL pages:

 .rtl ,.categories-menu-dropdown .item-level-0 > a,a, p , .wd-tools-text ,span , body {
font-family:Tajawal;
}

.rtl h1 , h2 , h3 , h4 , h5
{
font-family:cairo!important ;
}
.rtl #tab-additional_information th
{
font-family:Tajawal;
}

Attachments:

You must be logged in to view attached files.

January 27, 2020 at 8:34 pm #170107

Elise Noromit

Member

Hello,

As soon as you have uploaded the custom fonts, you need to set these fonts in the Theme Settings > Typography. Now you have not set the fonts https://gyazo.com/409bf61c1e244c90bf47866f7b2131dd

Best Regards

January 27, 2020 at 10:15 pm #170121

magbaz

Participant

if i set these fonts in the Theme Settings > Typography …. where its will apply … is it in English pages or In Arabic Pages or in both of them ?

January 28, 2020 at 10:09 am #170187

Elise Noromit

Member

Hello,

The font will be applied for the whole site for both languages.

Best Regards

January 28, 2020 at 3:14 pm #170249

magbaz

Participant

This is the problem I am facing … I want to apply some fonts to Arabic pages only … because the Arabic fonts are different from the English language.

In the fonts for the English language I have no problem, as I can change them from the settings for the theme … but For the Arabic fonts i want CSS code that makes those fonts work in Arabic pages only….i hope you understand me.

January 28, 2020 at 3:58 pm #170258

Elise Noromit

Member

Hello,

Rest the font settings in the Theme Settings as shown: https://gyazo.com/ee00bf47ce16b0856294c099a0d8f1d3

Remove all the custom CSS for the fonts.

Please advise which custom font is for Arabic, we shall provide custom CSS.

Best Regards

January 28, 2020 at 4:50 pm #170265

magbaz

Participant

“font-family:Tajawal;” for any normal arabic text(P,Span,a,td,menu..etc) and “font-family:Changa” for any heading text (h1,h2,h3…etc)

January 29, 2020 at 7:49 am #170334

Elise Noromit

Member

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body.rtl .font-primary, 
body.rtl table th, 
body.rtl .page-title .entry-title, 
body.rtl .masonry-filter li, 
body.rtl .widget_rss ul li > a, 
body.rtl .woodmart-price-table .woodmart-plan-title, 
body.rtl .wpb-js-composer .vc_tta.vc_general.vc_tta-style-classic.vc_tta-tabs .vc_tta-tab > a, 
body.rtl .woodmart-sizeguide-table tr:first-child td, .tabs-layout-tabs .tabs li, 
body.rtl .woodmart-accordion-title, 
body.rtl .woodmart-checkout-steps ul, 
body.rtl .woocommerce-billing-fields > h3, 
body.rtl .woocommerce-shipping-fields > h3, 
body.rtl .woocommerce-additional-fields > h3,
body.rtl #ship-to-different-address label, 
body.rtl #order_review_heading, 
body.rtl .cart-totals-inner h2, 
body.rtl .wood-login-divider, 
body.rtl .woocommerce-MyAccount-title,
body.rtl header.title > h3, 
body.rtl .woocommerce-column__title, 
body.rtl .compare-field, 
body.rtl .compare-value:before, 
body.rtl .compare-basic .compare-value:before, 
body.rtl .woodmart-wishlist-title, 
body.rtl .woodmart-empty-page, 
body.rtl .woodmart-products-tabs .tabs-name, 
body.rtl .woodmart-products-tabs .products-tabs-title, 
body.rtl .wishlist-title h2, 
body.rtl #order_payment_heading, 
body.rtl h1,
body.rtl h2,
body.rtl h3,
body.rtl h4,
body.rtl h5,
body.rtl h6,
body.rtl .title,
body.rtl legend,
body.rtl .woocommerce-Reviews .comment-reply-title, 
body.rtl .menu-mega-dropdown .sub-menu > li > a, 
body.rtl .mega-menu-list > li > a {
    font-family: Tajawal !important;
}
/* Entities names */
body.rtl .blog-post-loop .entry-title, 
body.rtl .post-single-page .entry-title, 
body.rtl .single-post-navigation .post-title, 
body.rtl .portfolio-entry .entry-title, 
body.rtl td.product-name a, 
body.rtl .category-grid-item .category-title, 
body.rtl .product-image-summary .entry-title, 
body.rtl .autocomplete-suggestion .suggestion-title,
body.rtl .widget_recent_entries ul li a,
body.rtl .widget_recent_comments ul li > a,
body.rtl .woodmart-recent-posts .entry-title a,
body.rtl .woodmart-menu-price .menu-price-title,
body.rtl .product-title,
body.rtl .product-grid-item .product-title, 
body.rtl .group_table td.label a {
    font-family: Tajawal !important;
}
/* Widget titles font */
body.rtl .widgettitle,
body.rtl .widgettitle a,
body.rtl .widget-title, 
body.rtl .widget-title a {
    font-family: Tajawal !important;
}
/* Text font */
body.rtl, 
body.rtl .font-text,
body.rtl .menu-item-register .create-account-link,
body.rtl .menu-label,
body.rtl .widgetarea-mobile .widget_currency_sel_widget .widget-title,
body.rtl .widgetarea-mobile .widget_icl_lang_sel_widget .widget-title,
body.rtl .wpb-js-composer .vc_tta.vc_general.vc_tta-style-classic.vc_tta-accordion .vc_tta-panel-title,
body.rtl .woodmart-more-desc table th,
body.rtl .product-image-summary .shop_attributes th,
body.rtl .woocommerce-product-details__short-description table th {
    font-family: Changa !important;
}
/* Navigation font */
body.rtl .main-nav-style, 
body.rtl .menu-opener, 
body.rtl .categories-menu-dropdown .item-level-0 > a, 
body.rtl .wd-tools-element .wd-tools-text, 
body.rtl .main-nav .item-level-0 > a, 
body.rtl .whb-secondary-menu .item-level-0 > a, 
body.rtl .full-screen-nav .item-level-0 > a, 
body.rtl .wd-tools-element .wd-tools-count,
body.rtl .woodmart-cart-design-2 .woodmart-cart-number, 
body.rtl .woodmart-cart-design-5 .woodmart-cart-number {
    font-family: Changa !important;
}

Best Regards