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?
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.
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?
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.
