11

I'm making a webpage in a language other that English.

So the text contains English and other languages mixed.

I assigned font-family like

p{
font-family: 'EnglishFont', 'NonEnglishFont';
font-size:14px;
}

It works fine, but the original vector size of the fonts differs, causing the sentence looks weird in mixed languages.

so I want to assign different size for font in one css class, something like

p{
font-family: 'EnglishFont', 'NonEnglishFont';
font-size:14px, 16px;
}

is there any way to do that?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Young-Ho Kim
  • 193
  • 2
  • 10

1 Answers1

11

You cannot set font size so that it would depend on the font family.

Instead, try and find a font that is suitable for both (or all) languages on the page. The font designer should have taken the different characteristic of different writing systems into account. Usually fonts designed for e.g. Asian languages have Latin letters, too (at least the basic Latin letters, which mostly suffice for English).

If you really want to set different font properties for different writing systems, you need to use markup that distinguishes between different languages, e.g. using lang attributes in HTML and selectors based on them in CSS. But normally the use of different fonts is a problem to be avoided, rather than a solution.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • 3
    It's a pity there isn't a better solution for this. It's all very well to say that the use of different fonts is a problem to be avoided, but sometimes a design brief calls for specific fonts in multiple languages and as the person doing the HTML/CSS you are perceived as not having done your job properly if the end result doesn't look like the graphic design briefs, especially when you're working for a company with specific style guides and corporate identity. I suppose self-hosting the fonts and declaring multiple '@font-face' blocks with different names and weights would be one way to go? – Joseph Dec 06 '19 at 09:43
  • take a look [here](https://stackoverflow.com/a/15267560/3133446) if you are using lang attribute. – nightElf91 Aug 16 '22 at 10:30