CODEWITHSUNDEEP
htmlcssfont-faceunicode-range
farhad.a
farhad.a

Reputation: 341

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

My web page displays Persian text using the Yekan font as expected. Why does the English text incorrectly use a font other than Alger?

@font-face { <!-- Persian Font -->
        font-family: Yekan;
        src: url(Fonts/BYekan.ttf);
        unicode-range:U+0600-06FF;
    }
    @font-face { <!-- English Font -->
        font-family: Alger;
        src: url(Fonts/ALGER.TTF);
        unicode-range: U+0020-007F;
    }

Upvotes: 3

Views: 1045

Answers (1)

Tomas K
Tomas K

Reputation: 371

You can add only one font to an element.
Trick: Try giving them the same Name:

@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';
}

This should solve your problem, but I cannot test it because I'm on mobile.

Upvotes: 2

Related Questions