Wiktionary:Fonts

General information about fonts, and the way fonts are displayed. For information about character encoding see Wiktionary:Unicode.

Troubleshooting

If you are experiencing font issues you should ensure that you have a system font installed that supports all characters for the language experiencing issues. If wiktionary is not picking up any compatible system fonts, you may need to make a request at Grease pit to change the default font for the language in question.

Font customization

If you are on a device that cannot download fonts, want a custom font for a specific language or dislike Wiktionary's recommended font, you can specify what fonts you would like wiktionary to use on your common.css page.

."SC" {
	font-family: 'font name here', serif ;
	font-size: 100%;
}

Replace "SC" with the scriptcode and "LANG" with the language code. (The [lang='LANG'] parameter is optional.) If the script code is not specific enough you may use ."SC"[lang="LANG"], if you choose to list multiple scripts/languages you must use a comma.

For link templates:

.mention-"SC"[lang="LANG"] { 
	font-family: 'font name here', serif ; }

Importing fonts

If you are on a device that cannot download fonts (or would prefer not to), use the code @font-face {} at the beginning of your css page to import the font in your browser. If you have the font installed but Wiktionary isn't using it, you may need to use @font-face to import the font from your system files.

@font-face {
  font-family: 'Font name here';
  font-style: normal;
  font-weight: 400;
  src: local(''),
url('font name here') format('font format here'); 
}

The empty local local('') parameter will prompt your browser to check if the system already has the font available before attempting to download it. The font-family name is used to search for the font, so it is recommended that you use the fonts official name. (Though you could name the font anything, an unofficial name could prevent your browser from finding the correct font). You may also use the local parameter to link to the system file local('file path to font') or omit the local check altogether. (Though if you do, your browser may download a font you already have).

Font links

You may find fonts links at Google fonts by clicking the plus near the desired text sample. Google will provide a css link embedded in html, only copy the link. Google's css link will not work on a Wiktionary css page, so instead of putting it in your css page put it in your browsers search bar (the page you are taken to should have nothing but css code). In Google's css code you should see the font link and format type, copy that and put it in your css page. There may be multiple links listed, but you should only need one.

Font issues

Some web browsers (including Firefox 1.5.0.12 under Mac OS X 10.4.9 and older versions of Internet Explorer) handle fonts differently from others. When the current font does not have a specified character, an empty square may be shown. (This behavior is particularly troubling in the IPA region of Unicode, where the symbols ɨ ʉ ɯ ɪ ʏ ʊ ɘ ɵ ɤ ɛ ɜ ɞ ʌ ɔ ɐ ɶ ɑ ɒ ɚ ɝ ˈ ˌ ʈ ɖ ɟ ɢ ʔ ɱ ɳ ɲ ɴ ʙ ʀ ɾ ɽ ɸ ʃ ʒ ʂ ʐ ʝ ɣ ʁ ʕ ɦ ɬ ɮ ʋ ɹ ɻ ɰ ɭ ʎ ʟ ʍ ɥ ʜ ʢ ʡ ɕ ʑ ɺ ɧ ɡ ɫ are not supported by the default font.)

Other browsers, in contrast, search the installed fonts for the needed character. If the browser finds the character in a font, it uses that font to display the character. Usually this results in an appropriate display. In some cases, however, the font it selects in this way may not be ideal for displaying the character. Also, this method of selecting a font may result in changing fonts in the middle of a word. And rarely a font may contain a wrong character: For example, the Verdana combining characters bug may display а́е instead of а́е on some browsers.

The fact that some browsers do not display such characters at all makes it important to specify what fonts to use. Style declarations have been created which use a CSS filter to declare font-families for those browsers. Here is an example of such a style declaration.

.IPA {
        font-family: DejaVu Sans, Segoe UI, Lucida Grande, Lucida Sans Unicode, Charis SIL, Doulos SIL, Code2000, Gentium, Gentium Alternative, TITUS Cyberbit Basic, Arial Unicode MS;
        font-family /**/:inherit;
}

History of font declarations in Wiktionary and Wikipedia

At first font declarations were placed in the template {{Unicode}}. Some of the fonts, however, that give the best overall Unicode coverage do not cover all IPA symbols; so a separate {{IPA}} template was created. Over time several other script code templates were created for other specialized code ranges.

Originally these templates contained their style declarations inline. On about October 2, 2005, however, the Mediawiki software was changed to no longer allow comments in inline style declarations (because they can be used for cross-site scripting attacks). See Wikimedia bug no. 3588. This change broke the CSS filter, which relies on a style comment. The experts at Wikipedia responded to this change by moving the style declarations from templates to Mediawiki:Common.css. (Inasmuch as the latter is not inline, it was not affected by the change.)

Moving the style declarations out of the templates has the additional advantage that it saves download length in template transclusions—sometimes several times per page. It also facilitates users declaring personal styles. On the other hand, moving to Common.css has the disadvantage that only sysops can edit the font-lists. (Or is that an advantage?)