• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
UT Shield
College of Fine Arts Web instruction
  • Welcome
  • About Us
    • WordPress & Drupal
    • Websites & Content Owners
  • Getting Started
    • Learn Best Practices for Web
    • Vocabulary Terms
    • Do you need a website?
    • Ways to Get a Website
      • Website Options Comparison
      • Initiate a Project with the Web Team
      • Outsource or DIY
    • Know Your Audience
    • Navigation & Menu Items
  • Requirements
    • Americans with Disabilities Legal Obligations
      • Alternate Text
      • Use of Color & Contrast
      • Link Text & Appearance
        • Non-Visible Link Context
      • PDF Files
      • Software Plug-in Link
      • Captions, Audio Description & Transcripts
        • webVTT Caption File
        • Caption Using Amara
        • Writing Captions & Audio Description
        • Video & Remote Communications
      • Additional ADA Issues
        • Accessible Social Media
        • Video & Remote Communications
    • UT Web Accessibility Policy
    • UT Web Privacy Policy
    • Records Retention – Backups, Archives and Revisions
    • College of Fine Arts Brand
    • UT Brand Guidelines
    • Information Security Office Policies
  • Best Practices
    • College of Fine Arts Communications Written Style Guide
    • Using a Rich Text Editor
      • Using an External HTML Editor
    • Links & URLs
      • Link Text & Appearance
        • Non-Visible Link Context
      • Absolute vs. Relative Paths
      • HTTP vs HTTPS
      • Anchor Links
      • Changing URLs
      • Shorten a URL for Marketing
    • Images
      • JPG vs PNG
      • Image Editing and Troubleshooting
    • Web Forms & Surveys
      • Create a Link to Pre-Filter a Web Form Page
    • Standards & Structure
      • Hierarchical Headers
      • Computer File Names
      • URL address names
        • UT Short Links Service
      • HTML
        • Common HTML Errors
        • Multiple Rows with Floated Images
        • Responsive Word Wrapping
    • Artificial Intelligence
    • Test & Evaluate
    • Wikipedia
    • Social Media & Networking
      • Accessible Social Media
    • RSS & Feeds
    • UT Austin Web Publishing Guidelines
  • Site Performance
    • Page Load Time
      • Fonts
    • Respond to a Variety of Devices
      • Telephone Numbers on Smart Phones
    • Analytics & Visitor Data
      • Outreach Campaign Link Tracking
        • Campaign URL Builder
        • Campaign Link Tracking Worksheet
    • Page Not Found Traffic
    • Tips to Increase Traffic
    • Optimize for AI Chat and Search
  • Site Specific Instructions
    • Instructions for COFA sites on University Blog Services WordPress
    • Instructions for COFA Drupal Kit sites
    • Instructions for COFA sites on UT Drupal Kit Managed

Fonts

Last Updated March 2025

A long running issue for designers has been the limited fonts available for the Web. The best way to keep your sites loading fast is to use a Web-safe font. With Web-safe fonts  you can be confident that visitors to your site have the font installed on their computers and it will display properly.

What fonts to choose is another matter. Opinions vary drastically and research is not conclusive, except that we all agree legibility is vital and we need to be considerate of readers with dyslexia. At the University, it is also important that we take into account the University of Texas at Austin Branding Guidelines about Typography. Read WebAim’s article, Typefaces and Fonts, for tips to design accessible typography systems.

How to use Non-Web-Safe Fonts

Fallback Fonts

Standard practice is to supply fallback fonts. Web developers can supply a list of comma-separated font faces that can be used. The visitor’s computer will try to load the first font in the list. If it doesn’t find the font it will load one of the subsequent fonts. A font family, like san-serif, should end the list.The first san-serif font the computer finds will be displayed.

This technique doesn’t allow for a lot of control but has no effect on page load time. We recommend this technique for paragraphs and body text.

Images

The simplest way to add various fonts to your site is to make optimized graphics with text but remember the more images you have the longer your page will take to load. Don’t forget to include alternate text that mimics the text on the image. Not only will this assist visually impaired visitors but search engines, like Google, will still find the keywords in your image.

@font-face Custom Font

This techniques provides fonts for the visitor to download. The less of the custom font you use on the page the better your page load time will be. This technique is not recommended for paragraph or body text.

Unfortunately, a significant number of people still use older versions of browsers that do not support this technique. Web developers using this technique need to specifying fallback fonts. They must also provide several versions of each font. Internet Explorer 9 only supports .eot. Latest versions of Firefox, Chrome, Safari, and Opera support .ttf and .otf type fonts.

Also, the fonts provided must be open-source and licensed for distribution on the Web.

To bypass the licensing and version issues we recommend Google Web fonts. They provide hundreds of open-source fonts which they claim to have optimized for the Web. We’ve found them to still be quite slow.

Effects on page load time vary from font-to-font. There are some complex techniques to reduce the performance hit of custom fonts.

If you are still convinced that you must have a custom font, please contact the COFA Web team for assistance.

Learn More

For a complete overview of fonts on the Web visit the Web Typography Wikipedia page. Fun video about the dilemma of choosing fonts from BrainCraft.

Primary Sidebar

Open Office / Co-Working Sessions

Second Monday of the month:
11 a.m. – 12:30 p.m.

Fourth Thursday of the month:
2 p.m. – 3:30 p.m.

Email us for the Zoom link.

College of Fine Arts WordPress Instruction
College of Fine Arts Drupal Instruction
Subscribe to our email list to receive periodic tips and resources for generating great digital content

Contact Us

The COFA Web team can be reached by emailing us at cofawebmaster@austin.utexas.edu


To view some links on this page you may need to download Acrobat Reader.

UT Home | Emergency Information | Site Policies | Web Accessibility | Web Privacy | Adobe Reader

© The University of Texas at Austin 2025