Symbol Fonts Blocked on Office Computers

Squares where the icons were

On the designer's screen, the header shows a small telephone beside the number, a cart in the corner and a magnifying glass on the search box. Product photographs have arrows for flicking through them.

On a computer in a hospital office or an accounting firm, the same page shows empty squares. Some icons appear as stray letters; some vanish altogether.

The words around them are fine. Only the symbols have failed, and often they sit on the buttons that matter most.

The cause is how many themes draw their icons: not as pictures, but as characters in a special font.

Where downloaded fonts are blocked

• Office networks that switch off font downloads in Internet Explorer.
• Firewalls that strip font files from web traffic.
• Readers who override page fonts with their own, often for low vision.
• Opera Mini, a browser common on cheaper phones, which skips web fonts.
• Fonts served from another address without the permission browsers expect.

The first mostly affects businesses that sell to other businesses. Large organisations often lock down Internet Explorer for security, font downloads included, and their staff use it all day.

How an icon font works

An icon font is a font file in which each character is a small picture instead of a letter. The page asks for a character, and the browser draws it in that font.

It is a neat trick: one small file holds hundreds of icons, they scale to any size and they take on the colour of the text around them. Many popular themes include one.

But the browser has to download and use the font. If it cannot, it draws the same character in an ordinary font, which has no picture for it: hence the empty square, or a letter that means nothing.

The buttons that matter most

Icons tend to sit exactly where a visitor acts: the telephone on a call button, the cart, the search, the menu button on a narrow screen, the arrows on a product gallery, the close button on a pop-up.

When the icon is all a button has, a blocked font leaves an empty box with no clue to its purpose. The visitor cannot find the cart or open the menu, and assumes the site is broken.

When the icon sits beside a word, losing it costs almost nothing. That difference is the whole fix.

Pair every icon with a word

Put a visible word next to each icon that does something: Call, Cart, Search, Menu, Close, Next. Words survive every font failure, and they help visitors who do not know what an unfamiliar symbol means.

Where space is tight on a phone, the icon can sit above a short word in smaller type. One word is enough to keep a button usable when the symbol fails.

The phone number itself should always be text, so it can be read, copied and tapped to call whatever happens to the telephone symbol.

A worked example

A gift basket company run from a small shop makes baskets of local food, wine and treats, and much of its December trade is corporate: gifts for clients and staff, ordered by office managers and assistants from their desks.

Its theme drew every control from an icon font: plus and minus buttons for quantities, the cart, the arrows on each basket's photographs, and a telephone beside the number in the header.

Last December an assistant at an accounting firm phoned to place a large order instead. On her office computer, the quantity buttons and the cart were blank squares, and she could not tell which one added baskets.

Her firm's network blocked font downloads. The quantity buttons became a box for typing a number, the header gained the word Cart and an item count, and the gallery arrows became real images with alternative text.

The site was then checked on a computer set to block fonts, before this year's corporate orders began.

Real images where an icon must stand alone

Some icons have to work without a word, such as gallery arrows or social links in a crowded footer. Those are safer as real PNG or SVG images, placed in the page with alternative text saying what they do.

Images are not affected by font settings, and screen readers announce their alternative text. A few small image files cost little in speed, and far less than a button nobody can identify.

Load the font properly

Some failures are self-inflicted. Firefox, for one, refuses a font served from a different address unless that server says it may be used.

So icons can break when fonts move to a separate server, or when pages on the plain address load fonts from the www address.

Serving fonts from the same address as the pages, or adding the header that permits them, removes that problem. It does nothing for networks that block fonts on purpose, which is why the words still matter.

Testing on a locked-down computer

Borrow a laptop from a customer's or a friend's office if you can, and open the site on it. Otherwise, simulate one.

In Internet Explorer 11, open Internet Options, then the Security tab, choose Custom level for the Internet zone, and set Font download to Disable. Reload the site and look at every page where people act.

The Accessibility button in Internet Options also has a setting to ignore font styles specified on webpages, which shows what a reader who overrides fonts sees. Set both back afterwards.

The counter-case

A site whose visitors are almost all on their own phones and home computers will rarely meet a blocked font, and an icon font can stay where it decorates rather than labels.

Icons beside words, such as a telephone next to Call us, never needed fixing, since losing them costs nothing.

Where an icon is the only label on a button, though, the advice holds for every site: give it a word, or make it a real image with alternative text, and test on a computer that blocks fonts.

Before the next order rush

1. List every button that shows only an icon.
2. Add a visible word to each one.
3. Keep the phone number as text.
4. Use real images for icons that stand alone.
5. Serve fonts from the same address as the pages.
6. Block font downloads in Internet Explorer and test.
7. Check the cart and checkout on that setting.

Step six shows the problem in five minutes. Owners rarely see it otherwise, because their own computers download fonts without complaint.

Missing fonts cause a quieter version of the same trouble in quotes and invoices in whatever font Word picks.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.