Website Foreign Language Support Using @font-face
Posted on December 6, 2013 in CSS by Matt Jennings
To display a foreign language on a website, upload a font that includes the characters you need and use @font-face. For example, the main content text on http://www.classicsmile.com/espanol/meet-the-team.php uses the Lato Free and open-source software (FOSS) font which supports Spanish characters.
Do an online search to find FOSS fonts supporting additional languages, like BabelStone Han which supports Chinese.
Use Font Squirrel Webfont Generator to create CSS and fonts to use @font-face.
Often, you can add foreign characters to a website by typing them out in a Microsoft Word document, copying and pasting them into a website’s source code or Content Management System (CMS) field. Then, they should appear on the most popular older and newer browsers. There are also other CMS or browser add-on solutions to adding a foreign language onto a website.
Below is an example of this type of code from http://www.classicsmile.com/espanol/meet-the-team.php:
[css]
/* @font-face for Spanish language in content area */
@font-face {
font-family: ‘latobold’;
src: url(‘fonts/lato-bol-webfont.eot’);
src: url(‘fonts/lato-bol-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘fonts/lato-bol-webfont.woff’) format(‘woff’),
url(‘fonts/lato-bol-webfont.ttf’) format(‘truetype’),
url(‘fonts/lato-bol-webfont.svg#latobold’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: ‘latoitalic’;
src: url(‘fonts/lato-regita-webfont.eot’);
src: url(‘fonts/lato-regita-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘fonts/lato-regita-webfont.woff’) format(‘woff’),
url(‘fonts/lato-regita-webfont.ttf’) format(‘truetype’),
url(‘fonts/lato-regita-webfont.svg#latoitalic’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: ‘latobold_italic’;
src: url(‘fonts/lato-bolita-webfont.eot’);
src: url(‘fonts/lato-bolita-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘fonts/lato-bolita-webfont.woff’) format(‘woff’),
url(‘fonts/lato-bolita-webfont.ttf’) format(‘truetype’),
url(‘fonts/lato-bolita-webfont.svg#latobold_italic’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: ‘latoregular’;
src: url(‘fonts/lato-reg-webfont.eot’);
src: url(‘fonts/lato-reg-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘fonts/lato-reg-webfont.woff’) format(‘woff’),
url(‘fonts/lato-reg-webfont.ttf’) format(‘truetype’),
url(‘fonts/lato-reg-webfont.svg#latoregular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
/* Font for Spanish language support in the main content area of the website */
#main-column .inner
{
padding-top: 20px;
margin: 0 18px 18px 18px;
font-family: ‘latoregular’;
}
#main-column .inner strong, #main-column .inner b
{
font-family: ‘latobold’;
}
#main-column .inner em, #main-column .inner i
{
font-family: ‘latoitalic’;
}
[/css]