Wiktionary:Fonts

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

Supported fonts

Wiktionary is set up to provide font support for many languages. If the user can install fonts on their device, they are encouraged to do so to get the best experience for certain languages and scripts.

To see the list of fonts currently separately supported by Wiktionary, see here.

Troubleshooting

If you are experiencing font issues, you should ensure that you have a system font installed that supports the characters you are trying to display. 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 would like to use a font other than the one assigned by Wiktionary, you can specify alternative fonts for Wiktionary to use on your Common.css page.

In order to do this, you need to know what script you would like to apply the font for. First, find the code of the script from the full list of scripts. Then add the following rule to your common.css (here Zyyy is used in place of the script code):

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

You may specify multiple font names by separating them with commas. Make sure to enclose all font names in quotation marks.

If you want the rule to only apply to certain languages, instead of .Zyyy, use .Zyyy[lang="und"], where Zyyy is the script code, and und is a language code (from the list of languages).

If you want your font to only apply to mentions, you can add .mention before the first period (without a space, i.e. .mention.Zyyy).

Importing a font

If you are on a device that cannot download fonts (or would prefer not to), you may use @import or @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.

Using @import

You may find import links at Google Fonts by clicking the plus near the desired text sample and adding the font to your cart (all fonts are free). From the cart, click <> Get embed code and then @import; you will get an import link in HTML that looks like this:

<style>
@import url('https://fonts.googleapis.com/css2?family=example:wght@400..700&display=swap');
</style>

Remove the <style> tags, and put only the import link at the top of your CSS page (only other import links and comments may be above it).

@import url('https://fonts.googleapis.com/css2?family=example:wght@400..700&display=swap');

Additionally, you may install the font via your JavaScript page; keep in mind that installing fonts this way could cause a flash of unstyled content, so this method is dispreferred unless you have a specific need for it.

mw.loader.load('https://fonts.googleapis.com/css2?family=example:wght@400..700&display=swap', 'text/css');

Using @font-face

@font-face {
    font-family: "Font name here";
    font-style: normal;
    font-weight: 400;
    src: local(""),
         url("font link 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, although if you do, your browser may download a font you already have installed on your system.

Font issues

Practically all modern browsers 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. Rarely, a font may contain a wrong character: For example, the Verdana combining characters bug may display а́е instead of а́е on some browsers.

Some very old 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.

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;
}

Identifying a font

To find out what font your browser is using for some text in Chrome and Firefox, right-click on the text, press Inspect, and find the browser's developer tools (often on the right side by default). In Chrome, the fonts for the text that you right-clicked are listed at the bottom of the Computed tab, under font-family. In Firefox they are listed in the Fonts tab.

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?)

More recently, font declarations have been moved out of MediaWiki:Common.css into MediaWiki:Gadget-LanguagesAndScripts.css.