how to use two fonts for two different languages like english and persian (farsi)?

Asked 25/12, 2014 at 21:53 Answered 8/3, 2020 at 11:43

imagine that you want to design a website that learns English to Iranian people (Persian (Farsi) language) . English and Persian (Farsi) doesn't have any similarity in alphabet because Persian is RIGHT TO LEFT and English is LEFT TO RIGHT and completely are different . i didn't find any tags to set one font for all Persian (Farsi) words and other font for all English words . for example set B-Nazanin for Persian and set Times New Roman for English automatically that don't need to define font for every word every time . just define once these fonts . what can we do ? thanx

Hitchcock answered 25/12, 2014 at 21:53 Comment(2)

See w3.org/International/questions/qa-css-lang – Roil 25/12, 2014 at 22:35

What makes you think you need to set different fonts, and what makes you think jquery is the most important thing here (the first tag of the question)? – Mitchellmitchem 25/12, 2014 at 22:43

One possible option is to give a lang="fa-IR" attribute/value to the <html> or to any other elements within the document when the website is shown in persian language.

Hence you can override CSS declarations by using [lang|="fa"] selector.

For instance:

[lang|="fa"] p { font-family: "B-Nazanin"; }

<html lang="fa-IR">
  <p> سلام دنیا </p> 
</html>

Or:

p[lang|="fa"] { font-family: "B-Nazanin"; }

<p>Hello World!</p>
<p lang="fa-IR">سلام دنیا!</p>

Shrive answered 25/12, 2014 at 22:9 Comment(2)

that's right . pardon me :) i think my question is unanswerable :) i think i should forget that :) – Hitchcock 25/12, 2014 at 22:51

@MostafaEslami I do not recommend this way but assuming you are using JavaScript, it is possible to match Persian contents by regular expression so they can be wrapped by a proper wrapper element having an specific class name or whatever in order to apply your desired styles to them. – Shrive 25/12, 2014 at 22:56

you can use the following link for this purpose:

Display text with two language in webpage with different fonts with font-face at rule in css

@font-face { /* Persian Font */
        font-family: 'MyFont';
        src: url(Fonts/BYekan.ttf);
        unicode-range:U+0600-06FF;
    }
@font-face { /* english font */
        font-family: 'MyFont';
        src: url(Fonts/ALGER.TTF);
        unicode-range: U+0020-007F;
    }

Usage:

 body{
  font-family: 'MyFont';}

tip: for different languages you can use different "unicode-range".

Bellied answered 8/3, 2020 at 11:43 Comment(0)

using style content by language in HTML is to use the :lang selector in your CSS style sheet. ex :

:lang(ta)   {
    font-family: Latha, "Tamil MN", serif;
    font-size: 120%;
    }

and dont forget use lang in you HTML code

<p lang="en">Ceci est un paragraphe.</p>

Cambogia answered 25/12, 2014 at 22:11 Comment(5)

This is the best answer. OP should already be using lang on the html element anyway. See w3.org/TR/WCAG20-TECHS/H57.html – Roil 25/12, 2014 at 22:31

that's right . but what should i do for define two fonts for two different languages ? – Hitchcock 25/12, 2014 at 22:40

Why would he include code for Tamil language when the content is mixed English and Farsi? And it is pointless to use a language selector when no corresponding attributes are used in markup. – Mitchellmitchem 25/12, 2014 at 22:47

It's straightforward to substitute whatever typeface OP wants. Changes in document language already need to be marked up using lang for--among other reasons--screen readers, so it's appropriate to target lang from CSS. – Roil 25/12, 2014 at 22:54

Tamil doesn't get in handy . just i need two fonts for two different languages ... – Hitchcock 25/12, 2014 at 23:2

If you really want to use two different fonts for two different languages, your options are:

1) Use some markup that distinguishes between the languages. This could be a class attribute or (more logically, but with slightly more limited browser support) a lang attribute. Of course, you would use this for the language with smaller frequency. This is a lot of work of course. Depending on content generation system, it might or might not be automated.

2) Select the fonts so that the primary font does not contain glyphs for characters in the other language. For example, if you set * { font-family: foo, bar } and foo contains Latin letters but no Arabic characters, foo will be used for English and bar for Farsi. Punctuation characters would still be a problem. More importantly, it will be hard to find such fonts.

3) Use CSS code that selects font family by Unicode range. I won’t go into details, since this approach has too limited browser support to be practically useful yet.

However, it seems that you are trying to create a problem rather than solve one. By typographic principles, the same font should be used for copy text if possible. You should select a font that is suitable for both English and Farsi, or better still a list of such fonts (since no font is available on all computers), or a downloadable font of that kind. Failing that, you might select two fonts, or two lists of fonts, carefully selected, so that you list them both or all and browsers will use them in a natural way: using, for each character, the first font in the list that contains it.

Mitchellmitchem answered 25/12, 2014 at 22:58 Comment(4)

Thanks for sharing, I wasn't aware of unicode-range, it looks pretty useful. Just surprised that IE9 supports it. – Shrive 25/12, 2014 at 23:10

the problem is i didn't find suitable font that designed good for each languages . anyway tnx for guidance ... – Hitchcock 25/12, 2014 at 23:12

Out of curiosity, which user agent(s) support class but not lang? – Roil 25/12, 2014 at 23:37

@danielnixon, there is really nothing that browsers need to do in order to support the lang HTML attribute, since it is defined as declarative, not as a having any specific effect. But when it is used for the purpose described here, the CSS support to [lang=...] or :lang(...) selectors becomes crucial. The former is well supported (unless you need to care about IE 6), but the latter, more convenient selector requires IE 8 or higher and “standards mode”. – Mitchellmitchem 26/12, 2014 at 8:25

use B-Nazanin or others for persian content and use Open sans for english contect.

If you want to set B-nazanin for persian and set open sans for english, try this code in css:

body{
  font-family: "Open sans","B-nazanin";
}

Reata answered 25/12, 2014 at 22:9 Comment(1)

i want to use Times New Roman for all English words and use B-Nazanin for all Persian words . that you said was alternative font that when browser didn't have first , use second ... – Hitchcock 25/12, 2014 at 22:26

If I understand your question correctly, you will mix Farsi and English on one web site.

Assign two classes, perhaps "farsi" and "english" with appropriate font-family declarations. Then put the Farsi text inside <div class="farsi"> and the English in <div class="english">.

Edited to address mixing languages: You put the <div> around the primary language and use <span> for words in the other language.

I don't think there is an easy way to finely mix languages with different alphabets and even writing directions. Perhaps you can use a macro in your HTML composition tool, or something, to accomplish adding the necessary tags.

Epps answered 25/12, 2014 at 22:12 Comment(5)

exactly . but the problem is i have lots of mix . for example : farsi farsi farsi farsi English farsi farsi English farsi farsi English farsi farsi English farsi ... i should do repetitive job in several times and i will be dying :) – Hitchcock 25/12, 2014 at 22:19

<div class="farsi"> farsi farsi farsi farsi <span class="english">English</span> farsi farsi <span class="english">English</span></div>

I'd be looking for an automagic way to generate those <span> tags. – Epps 25/12, 2014 at 22:24

i didn't want to do repetitive job but you emphasize to do :) i learned that i shouldn't do repetitive job cause i asked this question ... – Hitchcock 25/12, 2014 at 22:29

Use <html lang="fa"> and then <p lang="en"> only on the paragraphs that are English. – Roil 25/12, 2014 at 22:30

It is not that I want you to do repetitive work, it is that I cannot see a way around it. – Epps 25/12, 2014 at 22:46

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags