How to add two different sizes for two different fonts

Question

How to add two different sizes for two different fonts?

This is my CSS body code:

body {
  direction: rtl;
  font-family: Roboto, Droid Arabic Kufi;
}

Roboto for English words and Droid Arabic Kufi for Arabic words. How can I do it if the word is "English" (Roboto), so the size will be 13 pixels, but if it is Arabic (Droid Arabic Kufi) it will resize to 12 pixels.

Answer 1

Why not create both English and Arabic class, including each font-familyand font-size:

.english {
    direction: ltr;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
}
.arabic {
    direction: rtl;
    font-family: 'Droid Arabic Kufi', sans-serif;
    font-size: 12px;
}

Then assign it to the html element depending on what language it is in:

<span class="english">english text 13px font size</span>
<span class="arabic">arabic text 12px font size</span>

An example of a complete fragment (used by Droid Sans as a demo, not Droid Arabic Kufi):

.english {
  direction: ltr;
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
}
.arabic {
  direction: rtl;
  font-family: 'Droid Sans', sans-serif;
  font-size: 12px;
}

<link href="https://fonts.googleapis.com/css?family=Droid+Sans|Roboto" rel="stylesheet">
<span class="english">english text 13px font size</span><br>
<span class="arabic">arabic text 12px font size</span>

Run codeHide result

Answer 2

, . , . , .english .arabic. :

.english {
  direction: ltr;
  font-family: Roboto;
  font-size: 13px;
}

.arabic {
  direction: rtl;
  font-family: Droid Arabic Kufi;
  font-size: 12px;
}

, - , .