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

Question

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

Bergamot

Answer 1

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.

Phototaxis