How to combine RTL support with an Arabic language font

Step 1

You can find lots of Arabic ready web fonts on Google Fonts. https://fonts.google.com/?subset=arabic.

We will use the Cairo font for this example https://fonts.google.com/specimen/Cairo?subset=arabic.

 

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:

~/less/usn_THEME_NAME/usn-rtl.less

 

Step 4

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

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

~/less/usn_THEME_NAME/usn-rtl.less

 

Step 5

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

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;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.

 

#h5yr

Get started today

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

NEW uSkinned Guides.

We have recently revamped our support guides.