CODEWITHSUNDEEP
htmlcssfont-facelang
Mostafa Eslami
Mostafa Eslami

Reputation: 137

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

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

Upvotes: 6

Views: 6733

Answers (6)

Meysam Sahragard
Meysam Sahragard

Reputation: 363

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".

Upvotes: 6

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201588

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.

Upvotes: 2

Bob Brown
Bob Brown

Reputation: 1502

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.

Upvotes: 0

MR Gharibeh
MR Gharibeh

Reputation: 354

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>

Upvotes: 2

Hashem Qolami
Hashem Qolami

Reputation: 99484

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>

Upvotes: 10

user2598812
user2598812

Reputation:

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";
}

Upvotes: 0

Related Questions