CODEWITHSUNDEEP
htmlcss
user2262049
user2262049

Reputation:

Using two @font-face for one class

I using CSS3's very own @font-face for a class:

CSS:

@font-face {
    font-family: 'LP';
    src: url('font/Bebas/lp.eot');
    src: url('font/Bebas/lp.eot?#iefix') format('embedded-opentype'), url('font/Bebas/lp.woff') format('woff'), url('font/Bebas/lp.ttf') format('truetype'), url('font/Bebas/lp.svg#svgFontName') format('svg');
}

@font-face {
    font-family: 'LP';
    src: url('font/Bebas/lp2.eot');
    src: url('font/Bebas/lp2.eot?#iefix') format('embedded-opentype'), url('font/Bebas/lp2.woff') format('woff'), url('font/Bebas/lp2.ttf') format('truetype'), url('font/Bebas/lp2.svg#svgFontName') format('svg');
}

.box h1 {
    font-family: LP;
    font-size: 20px;
}

HTML:

<div class="box"><h1>Some Text</h1></div>
<div class="box"><h1>تکست</h1></div>

this font works with english text, now i want when i have a arabic or persian text (rtl text) on same class it will work with second font-face.

that means:

if is english text, css began using @font-face (lp.ttf) if is arabic or persian text, css began using @font-face (lp2.ttf)

but both have same name for font-face. both are 'LP' you know, it complicate to explain,

want to using 2 @font-face for h1 tag for 2 different language. is it possible to do this via css? or jquery? or even php??

i don't know how can i do this with h1 tag! it should be h1, not a class or id.

Upvotes: 0

Views: 1684

Answers (2)

Jim
Jim

Reputation: 73936

You're looking for the solution in the wrong place. It's not your CSS that's your problem, it's your HTML.

HTML includes lang and dir attributes to indicate the language your content is in and the writing direction it uses. You can select elements using attribute selectors. For instance:

<h1 lang="en" dir="ltr">Some Text</h1>
<h1 lang="ar" dir="rtl">تکست</h1>

h1[lang=en] { ... }
h1[lang=ar] { ... }

h1[dir=ltr] { ... }
h1[dir=rtl] { ... }

Upvotes: 0

Mr Lister
Mr Lister

Reputation: 46549

Officially, you can use the unicode-range descriptor.
With your example, you'd only have to add one line at the end:

@font-face {
    font-family: 'LP';
    src: url('font/Bebas/lp.eot');
    src: url('font/Bebas/lp.eot?#iefix') format('embedded-opentype'), url('font/Bebas/lp.woff') format('woff'), url('font/Bebas/lp.ttf') format('truetype'), url('font/Bebas/lp.svg#svgFontName') format('svg');
}

@font-face {
    font-family: 'LP';
    src: url('font/Bebas/lp2.eot');
    src: url('font/Bebas/lp2.eot?#iefix') format('embedded-opentype'), url('font/Bebas/lp2.woff') format('woff'), url('font/Bebas/lp2.ttf') format('truetype'), url('font/Bebas/lp2.svg#svgFontName') format('svg');
    unicode-range: U+0600-07FF;
}

However, I have no idea how well this is supported by browsers. Test thoroughly.

Upvotes: 1

Related Questions