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.
Table of Contents
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.
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
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.
| 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>