KB User's Guide - Replacing Deprecated Font Tags

If you see a notification in the new editor banner stating that your document had deprecated font tags that were removed, it may be necessary to reapply the font styles that were previously being set by those tags. This document covers the three style attributes that those font tags may have contained and provides guidance on how (and whether) to achieve the same formatting with the new editor.

In the notification displayed in the new editor banner, you will get a list of all of the specific lines that were previously wrapped in font tags. The attributes contained within those tags fall into three categories—font face, font size, and font color. Considerations for each are described in the sections below:

Font Face

The "face" attribute of a font tag was used to set the specific font/font family, e.g. Times New Roman, Arial, Courier New, etc.

The new editor does not have a general option to change the font family applied to text, as in most cases, the font displayed for normal paragraph text, headings, etc. should be determined by your site-wide styling. For example, most UW–Madison KB sites display document text in the "Verlag" font used in the UW Theme. Relying on site-wide styling allows for better consistency between the documents on your site.

Font for Code or Other Typed Text

The main exception to this is in cases where you would like to style code or other text that you intend the user to type or copy-paste. This text may have been previously styled with a <font face="Courier New"> tag. For this, you may achieve the same effect by using new editor's inline Code class, or with the Preformatted paragraph format.

Code Inline Class

The Code class can be applied by highlighting the text to be styled, then clicking on the Inline Class dropdown menu and selecting Code.

Image of "inline class" menu with code class

The text will be displayed in the "Courier New" font with a light gray background:

This is an example of text with the "Code" class applied.

You may also apply other markup to text with the "Code" class applied, for example, bolding certain words.

Preformatted Text

Alternatively, you can set a block of text to be displayed as preformatted text. You can do this by highlighting the text, then clicking on the Paragraph Format dropdown menu and selecting Preformatted.

Image of "paragraph format" menu with preformatted option

The text will be displayed in the "Courier New" font, and if you edit in Code View, white spaces and line breaks entered in a preformatted text element will be honored:

This is an example of preformatted text.

Like with the "Code" class, you may also apply other markup to preformatted text.

Font Size

The font size attribute was used to set a relative size to your text. You will see that your text had a simple numeric value (i.e. no unit) set for size, which would be a number from 1 through 7. The new editor does not have an option to change the font size of normal paragraph text, as this typically should not vary throughout a document or within your site. Like with font family, this should be controlled via your site-wide styling. A few possible exceptions are outlined below.

Font Size 1 or 2

If you see that you had font size 1 or 2 set, this was setting text to be smaller than your default font size. Generally, the only time this would be appropriate to reapply would be for cases where you intended to display something in subscript or superscript. 

These formatting options can be accessed via the More Text menu button, then by selecting either Subscript or Superscript as desired.

Image of "More Text" menu with subscript and superscript options

Font Size 3

Font size 3 is the same as your default font size, so if you saw that this was previously applied, you do not need to do anything.

Font Size 4 to 7

In many cases, font sizes 4 through 7 were being applied to text that was serving as a section heading. Instead of using font size, you should instead set this text to use the heading element. This can be done by choosing the appropriate heading level via the Paragraph Format menu.

Image of heading levels under "Paragraph Format" menu

The largest heading that can be applied within a doc body is Heading 2, and the smallest available in the editor is Heading 4 (though smaller headings can be added with HTML via Code View). For accessibility and proper document structure, you should not skip a heading size. This means that if you do not already have a Heading 2 in your document, you should start with that size and work down for subsection headings as needed.

Font Color

Font color previously set with <font> tags may be re-applied using the new editor. This option can be accessed by opening the More Text menu, then selecting Text Color. An initial set of colors will be available to choose from, or you may enter in the hex code that was previously being used.

Image of text color menu under "More Text" submenu

Please note that text colors should generally be used sparingly, as overuse may create visual confusion. If color is being used to emphasize certain text, it is also important to make the text bold so that this emphasis is conveyed via assistive technology, e.g. a screen reader.

Finally, if you are applying color to text, please check to ensure that it has sufficient contrast. This is important for content accessibility. WebAIM (a non-profit focused on web accessibility) has a color contrast checker that you can use for this purpose.