Only load Arabic fonts on Arabic pages

This thread is resolved. Here is a description of the problem and solution.

Problem:
The client is developing a site and wants to use different webfonts for the English and Arabic versions without loading all fonts on every page. They found a CSS method but are concerned it still loads all fonts everywhere.
Solution:
We confirmed that the CSS code provided targets HTML elements in the Arabic language to use specific fonts, overriding other rules. This method does not significantly impact server load as the fonts are not large. However, if the client prefers not to load non-required fonts at all, a custom solution like the one mentioned in their link might be more suitable. In WordPress, themes or page builders often have settings to select fonts for different languages, which can work with WPML to apply the correct fonts per language.

If this solution does not fully address your issue or seems outdated, we recommend checking the related known issues, verifying the version of the permanent fix, and confirming that you have installed the latest versions of themes and plugins. If further assistance is needed, please open a new support ticket.

This is the technical support forum for WPML - the multilingual WordPress plugin.

Everyone can read, but only WPML clients can post here. WPML team is replying on the forum 6 days per week, 22 hours per day.

Tagged: Exception

This topic contains 4 replies, has 0 voices.

Last updated by Mihai Apetrei 6 months, 3 weeks ago.

Assisted by: Mihai Apetrei.

Author	Posts
June 14, 2025 at 3:21 pm #17135529
Johan	Background of the issue: I am developing a site and want to use two webfonts for the English version and two different webfonts for the Arabic version. I found a method in the support archive using CSS: html[lang="ar"] {font-family: "Cyrillic Barlow Condensed Reg" !important; font-size: 20px !important; font-weight: 600 !important;}. However, I believe this method requires loading all four fonts on every page, which I want to avoid. Symptoms: I need to load specific fonts only on Arabic pages without loading all fonts everywhere. Questions: Is it possible to load only Arabic fonts on Arabic pages? How can I implement font loading based on language without loading all fonts everywhere?
June 14, 2025 at 7:00 pm #17135671
Mihai Apetrei WPML Supporter since 03/2018 Languages: English (English ) Timezone: Europe/Bucharest (GMT+02:00)	Hi there. That CSS code is correct. What that will do is that it will target all the HTML elements existing in the Arabic language and will make them use the font that you specify. This will overwrite any existing rules that your theme or your page builder adds, because one of these might try to use a different font-family (the one that you selected in the settings area) for the entire website. I hope that you will find this information helpful. Kind regards, Mihai Apetrei
June 18, 2025 at 10:02 pm #17148342
Johan	Hi and thanks for your reply. But from a performance pespective I would prefer NOT to load the fonts that are not needed. With the suggested CSS, it seems that all fonts will be loaded on all pages. Or am I misunderstanding this?
June 18, 2025 at 10:05 pm #17148343
Johan	This actually seems more spot on: hidden link Would this be the most elegant solution for my "problem"?
June 19, 2025 at 9:44 am #17149691
Mihai Apetrei WPML Supporter since 03/2018 Languages: English (English ) Timezone: Europe/Bucharest (GMT+02:00)	Hi there. The solution mentioned in the link you shared is a bit more custom, and yes, it should work. However, custom code falls outside the scope of our support policy. The CSS that I mentioned wouldn't actually put that much pressure on the server as the fonts are not very large in size. But if you do not want to load the other one at all for different languages, sure, you can consider a custom solution. In WordPress, usually the theme that's being served comes with the active theme or with the page builder that is being used. For the most popular themes or page builders, there are custom sections in the settings of the theme/plugin where you can select which font you want to use generally on the site and some of them also have an extra field where you can select if you want to use a different font for different languages. Some of them can detect if you are using WPML or another multilingual plugin, and then the proper settings will apply for that language. WPML will use the font that is globally set for the site.