How to combine RTL support with an Arabic language font

Step 1

You can find lots of Arabic ready web fonts on Google Fonts.

We will use the Cairo font for this example


Step 2 

You can switch Right to Left (RTL) support on via Website Configuration > Global Settings > Right to Left. 

RTL Support Umbraco 8 CMS.


Step 3

This will then change the HTML element on the frontend of your site to <html dir="rtl">. We use that attribute to specify styles for RTL support. Included with every uSkinned theme is the following LESS file:



Step 4

Open your site in a code editor, we recommend Visual Studio Code for this task. You can download it for free here

Now that you've opened the site in your code editor, locate the following file:



Step 5

You will need to call your new font. At the top of that file add the following code:

@import url(';600&display=swap');


Step 6

You will now need to reference the font in the LESS file. 

html[dir="rtl"] body {
font-family: 'Cairo', sans-serif; }


Step 7

Now save that file and go to your site with RTL support activated. You will see the new font in place.



Get started today

Join thousands of agencies, freelancers, enterprises & start ups worldwide who use uSkinned Site Builder for Umbraco to deliver results.

NEW Site Builder!

We have launched a brand new, game-changing product for Umbraco CMS.