If in doubt, it is best to leave the font specification blank. However, there may be times when you still need to override or change the default font with CSS styles for a particular situation. Thanks to Nicholas Shanks for his technical assistance.

Western Scripts

Basic Support vs. Extended Synbols

In terms of typograpghical design, the Latin (Western), Cyrillic and Greek alphabets share many similarities such as distinction beween lowercase and capital forms, similar punctuation conventions, separation of most letter forms and distinctions between serif and non-serif forms.

As a result many fonts from Microsoft, Apple or Adobe may already include the characters needed to write in most Western, Central and European languages.

Mixed Fonts in Browsers

But not ALL fonts support EVERY possible character.

In many browsers, when a character is not available in a particular font, the browser may substitute it from another font. Below is an example of a case where a phonetic symbol, the schwa /ə/ or upside down e is changed from Arial Black to another font.

Arial Black: The Symbol Schwa /ə/ vs. “e”

Finding Appropriate Fonts

If you are curious about fonts for specific languages or scripts, then look on the page for the specific language to learn about additional font choices.

CSS to Specify Font

The example below gives an example of how to specify a font using the font-family in CSS attribute to ensure IPA characters are consistently displayed. For more information, see the W3C Schools CSS Fonts page.

Font-Family Specification

The statement below forces the text to be Arial in order to make sure the schwa is displayed consistent.

HTML

<p style="font-family: Arial">Arial: The Symbol Schwa /ə/ vs. "e"</p>

Result
Arial: The Symbol Schwa /ə/ vs. "e"

CSS Class

If your site uses lots of non-English text, you may want to create style classes which can invoke with the class="" attribute. It can be a good way to streamline your code.

The following example specifies a class for non-English text with multiple font options.

CSS

.utf8sans {"Lucida Grande","Arial Unicode MS", sans-serif}

HTML

<p class="utfsans">There's that ə again.</p>

Non-Western Scripts and Size

When working with many East Asian or South Asian scripts, it is worth setting the default font size to one larger than one might use for a Western script. Compare the effect of the sizing in the display below.

Multiple Scripts at 1 em vs. 1.5 em
Script 1 em

1.5 em

Cyrillic Українська Українська
Greek ελληνικά ελληνικά
Korean 한국어 한국어
Devanagari देवनागरी देवनागरी
Chinese Traditional 漢語 漢語

In the table above, the larger size is specified as font-size: 1.5em or 1.5 times larger than the base size of 1 em used in the Western text. Depending on your needs, you can also specify a specific point size (e.g. font-size: 18pt).

CSS by Language

Depending on your needs, you specify certain CSS attributes for text tagged with a certain language, For instance, the CSS below specifies that any text tagged as Spanish (i.e. <span lang ="es">..</span>) will be bold face, italicized and navy blue in color.

CSS

:lang(es) {font-weight:bold; font-style: italic; color: #009}

HTML

<p>He ordered <span lang="es">arroz con pollo</span> (chicken and rice) for lunch at the Mexican restaurant.</p>

Result

He ordered arroz con pollo for lunch at the Mexican restaurant.

CSS Buttons

If you are using a well-supported script like Chinese, Japanese, Korean or Russian, then you have the option of leaving the content as text and adding CSS tags to make them appear like buttons or provide other decorative effects. See the Cyrillic example below:

ПСУ

.fakebutton {color: #69F; font-weight: bold; font-size: xx-large;
font-family: "Times CY","Times New Roman", "Times", serif;
background-color: #009; padding: 5px 10px; margin-left: 30px;
border: 4px solid #69F; text-align: center; width: 100px;}

<p class="fakebutton">ПСУ</p>

Top of Page

Skip to toolbar