Menu
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
888
Calibri font may not have Farsi/Arabic letters (browsers will try to find substitution by some other Arabic font of their choice). You should explicitly define font size as different browsers may have different opinions on default font size. Show activity on this post.
Some designers might even venture to use two fonts of the same classification. For instance, if you choose to use two sans serif fonts, make sure they evoke similar moods but are completely different from each other. Consider how you are using the fonts and how you can go about it. You can achieve contrast by mixing weights, kerning, and styles.
Avoid using the same font styles as pairs. Use font weights to achieve hierarchy. Combine fonts from the same designer. Use font duos (who doesn't like a good time-saving tip!). Trust your gut and practice, practice, practice.
You can achieve contrast by mixing weights, kerning, and styles. If you are really inclined to use two completely different fonts, you can go classic with a sans serif and a serif, or depending on the theme you could use a script and a serif font. Below we have Ropstone, a vintage decorative font inspired by classic posters.
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>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".
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
