Arabic Language Support

[NotAnmol]

Inter to have support for Arabic language, really loved what Notion has done with their product using Inter, would love to do same, but we need Arabic support because we support localisation

Additional context

• Right now we are using Tajawal for Arabic Text. Visually it is very similar to Inter (only Arabic Glyphs are similar, Latin Glyphs are totally different).

[VladWinner]

You may be interested in this solution: https://github.com/ryanoasis/nerd-fonts

Duplicate #358

[bluemix]

I am thinking of doing the Arabic version of Inter.

[NotAnmol]

@bluemix you are a saviour.
We were thinking of making a custom font ourselves where we combine Latin Glyphs from Inter and Arabic Glyphs from Tajawal

[bluemix]

@NotAnmol You can achieve this by using a font editor (e.g., FontForge) and combining the Latin with Arabic to produce a new font.
But, I want to create an Arabic one from Inter, with the same characteristics derived from the Latin version.

[NotAnmol]

@bluemix yes thats what we are moving (using FontForge) right now.
But I am really happy that you are trying to add Arabic support. Eagerly waiting for it.

[VladWinner]

@bluemix yes thats what we are moving (using FontForge) right now.

Isn't it easier to use 'Nerd Fonts' solution? #391 (comment)

[NotAnmol]

@VladWinner couldn't find 'Inter' font in Patched Fonts folder.

[VladWinner]

@VladWinner couldn't find 'Inter' font in Patched Fonts folder.

https://github.com/ryanoasis/nerd-fonts#option-8-patch-your-own-font

[rsms]

In practice you do not want one font file with Latin/Cyrillic and Arabic since the constructs are very different. Better to use multiple font files in your source chain. If you’re making a website, specify it with the font-family CSS list.

There are no plans for Arabic Inter I’m afraid. Noto is a good font family that works well with Inter.

[NotAnmol]

@rsms So what would you suggest, Let's say I use Noto for Arabic and Inter for English, how would I apply 2 different fonts for 2 different languages in a single page.

[VladWinner]

how would I apply 2 different fonts for 2 different languages in a single page.

@import url(//fonts.googleapis.com/earlyaccess/notokufiarabic.css);
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
font-family: 'Noto Kufi Arabic', 'Inter', sans-serif;

OR

@import url(//fonts.googleapis.com/earlyaccess/notonaskharabicui.css);
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
font-family: 'Noto Naskh Arabic UI', 'Inter', sans-serif;

OR

@import url(//fonts.googleapis.com/earlyaccess/notonaskharabic.css);
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
font-family: 'Noto Naskh Arabic', 'Inter', sans-serif;

Source

[NotAnmol]

That's just importing 2 fonts, what if Arabic version also have English glyphs, how would I set it so that it automatically applies one font to Arabic and other to English

[VladWinner]

@NotAnmol Mentioned 'Noto * Arabic' fonts contain only Arabic glyphs, while for the rest glyphs (English etc.) Inter font will be picked up. Try it yourself.

[evilaliv3]

@NotAnmol: actually in modern browsers you could define which browser you would like to be used by specifying the unicode-range like shown below.

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('../lib/webfonts/inter-cyrillic-ext-400-normal.woff2') format('woff2'), url('../lib/webfonts/inter-all-400-normal.woff') format('woff');
  unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}