Usage

Apply the “dir” attribute to the HTML tag, and reference the RTL version of Fabric.

<html dir="rtl">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="fabric-[version].rtl.min.css">
  </head>
  ...
</html>

Language-optimized fonts

By default, Fabric presents all text using the Western European character set of Segoe UI. For languages with other characters, Fabric will either serve a version of Segoe UI with a different character set or use a system font.

Usage

The HTML “lang” attribute specifies the language of the element's content. This is typically applied to the root HTML element, where it will be inherited by the entire page. In this example the entire page is in Thai.

<html lang="th-TH">...</html>

For pages with content in multiple languages, the “lang” attribute can be applied to individual elements. In this example, a page that is mostly Thai also contains some Vietnamese.

<html lang="th-TH">
  ...
  <section lang="vi-VN">...</section>
</html>

Fabric supports a variety of language codes, which map to the following font stacks:

Language Code Font stack
Western European (default) N/A 'Segoe UI Web Regular', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif
Japanese ja-JP YuGothic, "Meiryo UI", Meiryo, "MS Pgothic", Osaka, "Segoe UI", Tahoma, Arial, sans-serif
Korean ko-KR "Malgun Gothic", Gulim, "Segoe UI", Tahoma, Arial, sans-serif
Chinese (simplified) ch-ZHS "Microsoft Yahei", Verdana, Simsun, "Segoe UI", Tahoma, Arial, sans-serif
Chinese (traditional) ch-ZHT "Microsoft Jhenghei", Pmingliu, "Segoe UI", Tahoma, Arial, sans-serif
Hindi hi-IN "Nirmala UI", "Segoe UI", Tahoma, Arial, sans-serif
Thai th-TH 'Leelawadee UI Regular', 'Kmer UI', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif
Arabic ar 'Segoe UI Regular Arabic', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif
Bulgarian bg-BG 'Segoe UI Regular Cyrillic', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif
Czech cs-CZ 'Segoe UI Regular EastEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif
Estonian et-EE 'Segoe UI Regular EastEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif
Croatian hr-HR 'Segoe UI Regular EastEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif
Hungarian hu-HU 'Segoe UI Regular EastEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif
Lithuanian lt-LT 'Segoe UI Regular EastEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif
Latvian (Lettish) lv-LV 'Segoe UI Regular EastEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif
Polish pl-PL 'Segoe UI Regular EastEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif
Serbian lt-sr-SP 'Segoe UI Regular EastEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif
Russian ru-RU 'Segoe UI Regular Cyrillic', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif
Ukrainian uk-UA 'Segoe UI Regular Cyrillic', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif
Turkish tr-TR 'Segoe UI Regular EastEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif
Slovak sk-SK 'Segoe UI Regular EastEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif
Kazakh kk-KZ 'Segoe UI Regular EastEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif
Greek el-GR 'Segoe UI Regular Greek', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif
Hebrew he-IL 'Segoe UI Regular Hebrew', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif
Vietnamese vi-VN 'Segoe UI Regular Vietnamese', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif