WiscWeb - Using the UW Theme Language Fonts plugin
- Plugin activation
- Setting font enhancements
- Displaying English within translated text
UW–Madison’s Cultural Linguistic Services (CLS) provides translation support for Spanish, Hmong, Tibetan, Chinese and Nepali. The university’s official font, Red Hat, does not support the character sets for three of these languages: Chinese, Nepali, and Tibetan. If you include text in these languages on your web pages, they will render using your operating system’s font for each language. However, CLS has identified preferred Google fonts for each that do a better job of rendering text in each language. This plugin provides these fonts, as well as additional customizations for enhanced readability.
The plugin loads the CSS and woff2 files for Eczar (Nepali), Jomolhari (Tibetan) and Noto Serif SC (Simplified Chinese) from the cdn.wisc.cloud domain that is managed by University Marketing at UW-Madison.
The plugin works by overriding root-scoped CSS custom properties (variables) for the font-family property defined in UW Theme. With the plugin installed, text in these languages will render in their preferred fonts. Text in English, Spanish, Hmong or any other languages using characters supported by Red Hat fonts will render with Red Hat.
This plugin was designed specifically for improving the readability of Chinese, Nepali, and Tibetan languages within WiscWeb and the UW Theme. It will not work without UW Theme.
The UW Language Fonts plugin can be activated by Administrators using the instructions in WiscWeb - Self service plugin activation / deactivation.
By default, the plugin will render text from these three languages using the preferred fonts. However, the Nepali and Tibetan fonts render smaller than ideal using UW Theme’s CSS. The fonts will be correct but they may be hard for some users to read. The plugin accounts for this by allowing users to designate the font for the page via a page body CSS class. Alternate CSS then is applied and adjusts the size of the characters for Nepali and Tibetan text. The Simplified Chinese text renders fine as is and is not adjusted.
Note: The ‘lang’ attribute for US English will still appear in the HTML tag even when the plugin is active. A complete multilingual solution would override this attribute, but this is beyond the scope of WiscWeb support.
- After the plugin is activated, navigate to the page you have translated to Nepali or Tibetan
- On the right side of the page, you should see a box titled Page Builder Attributes
- Add the appropriate ‘lang’ attribute to the Body CSS class field
To designate Nepali font on the page, type lang-ne into the Body CSS class field.
Note: For Nepali font, the page option for adding a class will also scale up the font size by 125-130%. This change was made because the fall-back font for Nepali shows up a bit smaller, by default. Properly marked-up English words (with lang="en") will be scaled down.
To designate Tibetan font on the page, type lang-sit into the Body CSS class field.
Note: For Tibetan font, the page option for adding a class will also scale up the font size by 125-130%. This change was made because the fall-back font for Tibetan shows up a bit smaller, by default. Properly marked-up English words (with lang="en") will be scaled down.
If you've translated to Chinese, Nepali, or Tibetan on a page but want little snippets to appear in English, you can manually add the English ‘lang’ attribute to that grouping of text:
<p lang="en-US">Your English words here</p>