If your website or web application uses Verlag or Vitesse web fonts, you will need to replace them with Red Hat Display and Red Hat Text by June 30, 2023, when our campuswide web font license for wisc.edu subdomains expires.
(Note: If your site includes PDFs or other digital files that use Verlag or Vitesse, these files don’t need to be replaced by that date, though we recommend doing so if possible.)
The process for migrating to the new web fonts depends on your site’s current setup. Most sites fall into one of the following three categories: WiscWeb-hosted sites, UW Theme users (not hosted on WiscWeb), and non–UW Theme users. If you are unsure which category your site falls into, or if you need help figuring out how to implement the new fonts on your site, please reach out to the Office of Strategic Communication web services team.
WiscWeb-hosted sites
If your website is hosted on WiscWeb, the fonts were automatically updated for you on February 16, 2023.
UW Theme users (not hosted on WiscWeb)
If your WordPress website uses UW Theme or UW Theme Lite but is not hosted on WiscWeb, you will need to update to the new versions of the themes by June 30, 2023. If your site is currently running an outdated version of the themes, you may want to factor in some additional time for testing your site when updating the theme.
If you are using a child theme to customize the design of UW Theme or UW Theme Lite, you may need to make additional adjustments to your site’s CSS. (See below under “CSS design guidance for Red Hat fonts.”)
Non–UW Theme users
If your website or web application uses Verlag or Vitesse web fonts but does not use the UW WordPress themes, you can download the new font files below. The university’s official HTML templates have been updated and can serve as a reference for migrating to the new fonts. Overall, the steps are as follows:
- Replace the font files in your HTML with the new stylesheet link for Red Hat Text and Red Hat Display.
- Update your CSS to use the new Red Hat
font-familyvalues. Adjust your CSSfont-sizeandfont-weightproperties per the CSS guidance below.
1. Replace the font files in your HTML
In most cases, your website or application is linking to a CSS file with Verlag and Vitesse font files Base64-encoded into the CSS. The directory and file name for this file was typically provided as /fonts/uw160/fonts.0.0.1.css but your site or application may use a different directory and file name. To migrate to the new Red Hat fonts:
- Download the Red Hat CSS font file (.zip).
- After opening the zip archive, move the
uw-rhdirectory alongside the olduw160directory in your codebase. - Delete the old
uw160directory (which has the Verlag and Vitesse fonts in it). - Edit your site or application templates and/or HTML to link to the new CSS font file:
Replace:
<link rel="stylesheet" href="/fonts/uw160/fonts.0.0.1.css">
With:
<link rel="stylesheet" href="/fonts/uw-rh/fonts.0.0.1.css">
Again, your href value may differ depending on how your project is organized.
Additional options:
If you prefer, you can instead link to the CSS font file in an AWS CloudFront CDN maintained by the Office of Strategic Communication. If you do, be sure to include the crossorigin attribute:
<link rel="stylesheet" crossorigin href="https://cdn.wisc.cloud/fonts/uw-rh/0.0.1/fonts.css">
Note: Please do not pull Red Hat fonts into your site by linking directly to Google fonts (i.e., fonts.googleapis.com). Based on recent interpretations of GDPR compliance, we recommend that campus websites self-host Google fonts files. Following the above steps for adding Red Hat fonts to your site meets those self-hosting requirements.
Performance considerations:
For campus sites or applications that want to optimize for the best possible performance, we also provide WOFF2 files of the Red Hat fonts. Linking your @font-face rules to separate WOFF2 files will give the best performance since modern web browsers will only download the specific WOFF2 files needed by a page’s content. For campus sites that are not already optimizing for performance, using the Base64-encoded CSS files above (either the self-hosted or CDN version) will be sufficient. For sites that do want to optimize performance, begin by downloading the WOFF2 files. The downloaded zip file includes eight WOFF2 files and a CSS file with @font-face rules for referencing the WOFF2 files. If you are incorporating these files into your site or applications, adjust the URL path references in the CSS file as needed.
Browser support:
Some older web browsers, notably Internet Explorer 11 and older, do not support WOFF2 font files. These browsers will render text in their system default sans serif font, typically Arial.
2. Update your CSS
In addition to replacing the font files, you will need to update any font-family values in your CSS that were referencing Verlag or Vitesse. You may also need to adjust your font-size and font-weight values to better align with the updated web style standards for campus.
Replace font-family values
In your CSS (or in your CSS preprocessor code; e.g., Sass or Less) replace font-family values for Verlag and Vitesse with Red Hat Text and/or Red Hat Display. Red Hat Text should be the default font-family value for your CSS, often set on the body selector. Red Hat Display should be used for your site title, navigation menus, h1–h6 headings, or any other short, prominent HTML text. Red Hat Text should always be used for any “reading” or body copy, because it is better suited to reading sentence and paragraph copy. The university’s official HTML templates demonstrate the proper use of Red Hat Text and Red Hat Display and can be used as guidance for adjusting CSS styles for your project. (If your site is using Vitesse, you should either switch to Red Hat Display or consider replacing it with a complementary font. We recommend using free, open-source fonts provided by a reputable source such as Google Fonts.)
CSS design guidance for Red Hat fonts
Red Hat Text and Red Hat Display are slightly larger fonts relative to Verlag. This means that you may need to adjust any custom font styling you have done on your site or application. In general, the new official HTML templates (and UW WordPress themes) scale down the font-size of the site title and major headings. The font-weight for major headings and other elements has also been scaled back from the heavier 700 and 800 values used with Verlag. The university’s official HTML Templates can be used as a reference for how to adjust styles. Web developers can access the source files for the templates (including Sass files) from UW–Madison’s GitLab server. If you have questions, please email the the Office of Strategic Communication web services team.