Web Fonts Facts and FAQs - You Must Know

This is a comprehensive record of authoritative web typography facts, based on commonly searched or asked questions about web fonts. You will get brief but in-depth knowledge and tips about usage and working of web fonts which will ultimately boost you understanding and capability to make a better decision for selecting a best web font for your website or app.

Situations When Web Fonts May Fail to Load

Browsers download a web font from server to display your text. In following situations, web fonts can be unsafe.

• Browser may have disabled a font.

• Old browsers may not support a web font.

• Browsers may have some bugs and unable to download a web font file.

• Font cannot be downloaded due to very slow internet connection at user end.

• Server where font files are hosted, may go down.

But in real world, such situations are extremely rare keeping in view the powerful font rendering technologies of present era browsers and much improved internet speed throughout world.

How Fonts are Loaded to Render Web Pages?

If you have used some system font such as Arial as primary font, it will not be downloaded from server, and browser will use it from the system if available. However, if you have used a web font, it will be downloaded from the server over network. In case, your primary web font fails to load – rare case – browser can use other font from the system, which was declared by the web designer as fallback font.

A Google patent document describes the process in following words. [RD]

“When the computing device has the specified font, e.g., in memory, the computing device can quickly display the web page. When the computing device does not have the specified font, the computing device can either locate and download the font via the network, e.g., from the server or another server, or the computing device can use another font in a font stack specified by the source document.”

Best Web Fonts having Support for Multiple Scripts

In today’s globalized world, website authors should consider a font which supports glyphs for as many languages as possible, for a consistent design and look of text on their web pages. Multi-script font helps browsers for consistent text rendering. It is quite possible that a sentence or a word in body text of your website, is written in some other language, such as French, Urdu, Hebrew.

Noto font family by Google supports such font internationalization. It supports hundreds of scripts, from throughout the world.

• Noto Sans is the core font of Noto project

• Source Sans Pro

• IBM Plex Sans

• Alegreya, Merriweather, Nunito, Roboto, and Quattrocento

Do Browsers Use User-Installed Fonts?

No. Though they have access to all installed fonts on a device, but browsers tend to ignore user-installed fonts for font matching purpose. Browsers rely more on pre-installed system fonts, which are shipped with the operating system of the device. [RD]

This fact is also mentioned by WebKit which says that browser uses web fonts and pre-installed fonts to render text on a page, while ignoring locally installed user fonts. [RD]

Therefore, for your website, you should choose a pre-installed font as fallback in font family property.

Usage Statistics of Web Fonts on Global Websites

More than 82% of top 10 million websites on desktop computers use web fonts and 80% webpages on mobile, use web fonts. [RD]

In 2011, usage of web fonts was nearly zero. Free font libraries (e.g. Google Fonts) and improved font compression systems (WOFF) paved the way for popularity of web fonts.

In early days of internet, browsers used to display text of web pages only in preinstalled fonts. But with advancement in web typography and speed of internet connections, web fonts are preferred by web designers due to their accessibility and functional designs.

China is the country where usage of web fonts is almost zero. Japan has also very low usage of web fonts, due to huge glyph demands of these languages.

Popularity of web fonts should encourage new web designers to use them on their web projects.

Languages with Large Character Repertoire

To express these languages, we need knowledge of great number of characters, as compared to English and other alphabetic languages. Languages which require huge characters set of a font, are as following.

• Chinese – It has over 3000 characters for general literacy, and it goes up to thousands of characters to cover complete language. Unicode 14 has included 92,865 Han characters. [RD]

• Japanese script requires 2136 characters – comparatively less than Chinese.

• Korean – 1800 characters but over 10,000 glyphs are required to render the Korean text.

Due to large character repertoire, use of web fonts for Chinese script is low. Web fonts in Korea are popular having faster load speed due to cross-site caching by Google Fonts, slicing and font subsetting, font compression, and Unicode support. File size of average Latin font is generally less than 100 KB but file size of a Korean font is around 4MB, much larger than a Latin font but even lesser than a font supporting Chinese language. [RD]

What Character Glyphs a Web Font Must Contain?

In addition to 26 alphabet letters (both lowercase and uppercase), these glyphs should be part of your selected font because these glyphs or characters are commonly used in our text.

!"#§$%&'()*@+,-./0123456789:;<=>?[\]_{|}†¢£•®©™¥¿¡–—“”‘’¤‹›‰€«» ‹›

Reality about Browsers Caching of Web Fonts

It is generally believed that browsers cache web fonts in device which can be used by other websites using same web font, for fast page loading. In fact, this is not true.

After tests, I found out that browsers do not cache web fonts. The website, See Sound, uses Roboto as primary web font. Edge browser on Windows computer, downloaded Roboto. Even if I click the link from Bing search, which uses Roboto font, and Roboto must have been cached for Bing search, but it is not cached as when I analyzed the See Sound, browser downloaded Roboto again to display the webpage.

Therefore, it should be clear that browsers do not cache fonts in the device. Instead, with advent of CDNs, nowadays, browsers benefit from caching of content delivery networks.

On the other hand, browsers often cache a whole web page temporarily in the device of the user for fast reloading, if commanded.

However, according to Google documents, websites using Google Fonts API benefit from cross-site caching.

Glyph Demanding Assessment of Web Content for Lightweight Web Font

Through this new web font technology, only necessary glyphs of a web font are downloaded from server, instead of a complete font or its subsets. This technology tremendously helps a web font in reducing file size and fast loading.

First, content of a web page is scanned to find out the glyphs of a web font used. Then browser downloads only the required glyphs, corresponding to the page content. Unnecessary glyphs are not downloaded. Thus, few necessary downloaded glyphs substantially reduce the file size of the used web font style. This customized and lightweight font, results in fast load time of the page.

This process is done, using the cache memory and processor of the device. This method reduces the file size of a web font more efficiently than conventional method of font subsetting.

This method is also capable of dynamically adding or removing glyphs, in real time and thus updating the demanded font glyphs.

It can also predictively prefetch the demanded glyphs (characters) of web fonts, for the next likely web pages, user may be expected to click and visit from the current first page.

The patent document, describes this proactive prefetching of web font, in these words:

“For instance, if an end user accesses a first web page that includes a hyperlink to a second web page, one or more customized lightweight web fonts may be proactively generated and stored for the second web page based on a prediction that the end user is likely to access the second web page at some point in the future given the access to the first web page.”

This latest font technology is invented by IBM, and patent was granted to IBM in October 2021, for the invention. [RD]

How to Write a Unicode Symbol in Text Document or Website?

The easiest way to enter a Unicode character – symbol, letter, sign, emoji – on a text document or on your website, is through copy and paste method. You need to just copy the required character from a source and paste it on your web page while you are editing your website.

You can copy symbols from variety of dedicated websites or from list provided by Wikipedia on following page. URL: https://en.wikipedia.org/wiki/List_of_Unicode_characters

This ‘copying and pasting’ method is secure because it avoids displaying tofus or empty boxes.

You can also enter Unicode codepoint to apply an emoji on a website.

There are some other methods of entering Unicode characters. You may refer to our detailed article by Dozro on this website.

Which Font Format is Best?

According to WC CSS Working group, Font formats include, OpenType Collection (.otc, .ttc), Embedded OpenType (.eot), OpenType (.ttf, .otf), SVG Font (.svg, .svgz, deprecated), TrueType (.ttf), WOFF 1.0 (Web Open Font Format, with .woff extension), WOFF 2.0 (Web Open Font Format) with .woff2 extension. URL: https://drafts.csswg.org/css-fonts-4/#font-format-definitions

TTF, OTF and EOT font formats are not compressed by default. Woff2 is lightweight with built-in compression and best font format than TTF and WOFF1 formats.

Uncompressed font formats such as TTF and OTF are 2-3 times larger in size than WOFF2 format.

WOFF2 is performance-oriented font format with optimal page load speed.

Currently, WOFF2 format is used by more than 75% websites and previous version WOFF1 is used on around 11% of websites. On the other hand, TTF is only used by around 3% of web pages. [RD]

All major browsers support WOFF2 format. Browsers supporting WOFF2 formats, include Edge, Firefox, Chrome, Safari, Opera Mobile and Samsung Internet. Android browser has full support for WOFF-2 font format. Opera Mini does not support WOFF2 fonts. URL: https://caniuse.com/woff2

Unprecedented usage of WOFF by browsers also explains the risks associated with self-hosting of web fonts. Hosted platforms such as Google Fonts or Shopify, ensure that WOFF format is automatically chosen, with updated files.

Pro Tip: Order of fonts in font family property is important. Always mention the WOFF2 font at the very start of the chain.

If we take, which font format combinations are used mostly by web authors in @font-face blocks, it turns out that WOFF2-only was used on 84% web pages. Only 4% websites use svg, truetype, woff combination. Please take note that svg font format is on the rapid decline. [RD]

Are You Required to Write Complex CSS for Fonts?

No. Not at all in most cases. If you are using online hosts such as Google Fonts or Adobe Fonts, you have to simply enter a single line of provided code into head of your website.

If you are using website builder platforms, such as Shopify, GoDaddy, Wix, Weebly and Squarespace, you do not even require entering a single line of CSS code. You simply select your favorite font styles from the font list and the rest is done by the platform.

However, you can use CSS stacks such as @font-family, @font-face if you are self-hosting the web fonts.

Optionally, some website builder platforms allow custom CSS tweaks, but they also discourage it. For example, Squarespace allows CSS tweaking, but they have clearly stated that support will be revoked in this case.

Therefore, on most website building platforms, you are not required to learn or write complex CSS for fonts.

Which is Best Fonts Compression Algorithm?

Web assets such as web fonts are compressed to reduce file size. Font compression is imperative for fast loading and navigation. There are variety of compression encodings such as Gzip, Brotli and LZ4. GZip is historically used more for web assets and web fonts. However, Brotli is gaining fast popularity in recent years due to its comparative advantage and efficiency. Brotli compression is developed by Google and it is used for text compression by web servers such as Apache servers and CDN content delivery services such as Google Fonts.

Google Fonts provide inherent support for Brotli compression. All major browsers support Brotli compression.

According to Google Developers site:

“If the browser supports Brotli (br) you should use Brotli because it can reduce the file size of the resources more than the other compression algorithms. Use GZIP as a fallback to Brotli. GZIP is supported in all major browsers, but is less efficient than Brotli.” [RD]

In 2022, all browsers support Brotli compression.

According to research, in comparison to Gzip, Brotli compresses to smaller files at the same speed and decompresses at the same speed. [RD]

Is WOFF2 Font Technology Perfect?

It is best but not perfect. Though WOFF2 fonts provide best possible compression, reducing size of font files by 25-30% more than zip. WOFF2 compression uses Brotli library. But it is not perfect, because scripts such as Chinese, have huge number of glyphs where even WOFF2 fonts cannot provide optimum compression. This is the reason; big tech companies are working on new font technologies such as concept of progressive font loading in patches.

A Google document says about WOFF2: “It's good … but not good enough for CJK.” [RD]

Here CJK means Chinese, Japanese and Korean languages.

Should you Activate Comments on Website?

No. You have no control over the language used by the commenters for writing their comments. You know well the languages and scripts used for your content and then you can implement font subsets for faster page. But in comments section, a page visitor may write comment in any other languages which can be really problematic in terms of website loading speed.

For example, your website content is written in Latin script, but your website visitors may write comments in any one of Indian scripts or Japanese script. In such case, browser must download glyphs from relevant (system or fallback) fonts, to display the text, which may slow down your website. If the browser uses a system font, it may render some text in inconsistent font styles.

Role of CDN in Performance and Popularity of Web Fonts

Content Delivery Networks or CDNs play vital role in fast delivery of web fonts. Rendering speed of a web page increases tremendously because CDN are serving web assets including web fonts from closest servers to the end user.

According to Keycdn, page load time of a web font was amazingly fast when served through Google CDN than when hosted locally. [RD]

CDNs temporarily store web files (fonts, images, videos) through caching in data centers, closest to internet user than origin servers, and speed up the work of web browsers.

Self-Hosted Fonts vs Externally Hosted Web Fonts

First, let’s understand, how we define self-hosting fonts?

Fonts which are hosted on the same server, where your website is hosted, are called self-hosted fonts. Browser downloads fonts and other web assets from the same origin.

On the other hand, if website is hosted on one server and font files are hosted on another server, then we call them externally hosted fonts or third-party fonts. In this case, browser downloads web fonts from a different server.

A self-hosting server can be a home server (computer, laptop), virtual private server or any server where fonts and website assets are hosted on same origin. For example, if your Squarespace website and fonts are served from same server or CDN (static.squarespace.com), then you are self-hosting the fonts.

If you are self-hosting fonts, make sure that your website is powered by a CDN and fast server, for optimum performance.

Though some third-party hosts such as Google Fonts, automatically optimize font files, but in case you are self-hosting fonts, you should optimize fonts with subsetting and WOFF2 compression.

Around 75% fonts on the web are loaded from a third-party host such as Google Fonts and around 25% fonts in the world are self-hosted on the same server. [RD]

Applying Web Fonts from Multiple Servers

Though you can apply fonts on your website from multiple sources, for example, you can apply a web font from Adobe Fonts for headings and another font from Google Fonts, for paragraphs.

However, in my opinion, it is a wrong idea to serve fonts from multiple servers. Because, in such case, browser will have to resolve DNS and make http requests from two different servers, which may increase load times.

Therefore, for fast fetching of web fonts, I recommend applying fonts only from single host.

Top Font Hosting Servers

These are some top servers hosting web fonts. [RD]

• fonts.gstatic.com 75% share (Google Fonts)

• use.typekit.net 7.2% share (Adobe Fonts)

• maxcdn.bootstrapcdn.com 1.8% share (CDN for Bootstrap, Font Awesome)

• use.fontawesome.com 1.1%

• static.parastorage.com 0.8% (Wix)

• fonts.shopifycdn.com 0.6% (Shopify)

• cdn.shopify.com 0.5% (Shopify)

• cdnjs.cloudflare.com 0.4% (Cloudflare)

• use.typekit.com 0.4% (Adobe Fonts)

• assets.squarespace.com 0.1% (Squarespace)

The purpose of this list is that you get an idea of which hosts mostly serve fonts to the browsers.

Using Italic Web Fonts

Some fonts are originally with Italic style. You can use a dedicated Italic web font style such as Noto Sans Italic which is a system font in Windows 10.

However, web browsers have the capability to slant normal Roman font glyphs to make them Italic-like slanted characters.

A patent document by Google describes it in following words:

“Command could cause the web browser software to programmatically distort the outlines of Arial (Normal) to automatically synthesize Arial (Italic).” [RD]

Therefore, I can suggest that you should avoid using a dedicated Italic font style because it may increase page load time. Just make normal font style as Italic and browser can efficiently slant it.

Top 20 Most Popular Web Fonts on the Global Web

Please do not confuse it with most popular Google Fonts, though most of them are available there.

According to web research, Open Sans and Roboto are the most used fonts on the web, with combined 39% share on the whole web.

Other fonts have less than 5% share in usage on websites:

Montserrat 5%, Source Sans Pro 4%, Noto Sans JP 3%, Lato 3%, Nanum Gothic 3%, Noto Sans KR 3%, Roboto Condensed 3%, Raleway 3%, FontAwesome 1%, Roboto Slab 1%, Noto Sans TC 1%, Poppins 1%, Ubuntu 1%, Oswald 1%, Merriweather 1%, PT Sans 1%, Playfair Display 1%, and Noto Sans is also used on 1% of the global web pages. [RD]

Web Fonts Technical Facts

Here are answers to some technical queries related to the implementation of web fonts. I reiterate that if you are using website builders (such as Wix or Squarespace), you do not need any technical know-how about using fonts on your website.

How to Control Font Loading Behavior of a Web Font?

You can use many CSS stacks to have control over the font loading behavior such as font family, font face, font display and web font loader.

Optionally, you can control behavior of font loading through font-display - a CSS property.

Latest versions of most browsers support font-display CSS property.

To see which version of browser supports this function, please check here. URL: https://caniuse.com/?search=CSS%20font-display

You can control Font Display per font face or font family. An authoritative guideline has been provided at Web Consortium website. URL: https://www.w3.org/TR/css-fonts-4/#font-display-desc

For each font face, you can choose from auto, block, swap, fallback, and ‘optional’ options. If you like, block option is ideal to ensure rendering in your preferred primary font.

According to research, in 2019, only 26% web pages were utilizing font-display property.

Swap value in font-display is most popular with 2.6% pages use it. Auto is second popular with 1.5% use. Whereas 0.7% pages set it to block, 0.4% to fallback, 0.2% to optional. In fact, ‘optional’ is also a great option in this CSS property. [RD]

According to CSS Working Group, ‘optional’ value is an ideal option to deal with cumulative layout shift.

“For example, body text is perfectly readable in one of the browser default fonts, though a downloadable font style might be more attractive and mesh with the site’s aesthetics better. First time visitors to a site generally care far more about the site being quickly usable than they do about the finer points of its display, and optional provides a good behavior for them. If they return later, the desired font faces might have finished downloading, giving them the "intended" experience without slowing down either their first or subsequent visits.’ URL: https://drafts.csswg.org/css-fonts-4/#font-display-desc

Because ‘optional’ value provides a better user experience.

How Fonts Are Progressively Downloaded from Server? PFE

Browsers do not download the complete file of a font. Browsers scan the webpage and download the minimum required font repertoire from the server. For example, initially browser may download only letters or number glyphs from the server or may download only a particular font subset. If additional glyphs are required later, browser can download only specific glyphs on a fly, with no time. Thus, supporting API, progressively enrich the font resources as required.

This optimal font downloading system has greatly reduced the downloaded font file size and speeding up user navigation.

You can yourself perform demo of this feature on Google site. URL: https://fonts.gstatic.com/experimental/incxfer_demo

Most Popular Axis in Variable Fonts

Weight (wght) is the most popular axis in variable fonts. 90% of web pages using variable fonts also use weight and 4% also use width or stretch. Use of other font variation settings such as slant and italic are negligible.

To be clear, currently around 11% web pages use variable fonts. [RD]

To know more about variable fonts, please visit detailed page on Dozro website.

Systems and Programs Used for Rendering Web Fonts

We have listed here, only some of the known systems, browsers and operating systems, use to render and display text on a web page. This knowledge will boost your confidence in using a web font.

• Apple Advanced Typography

• Universal Shaping Engine (Windows)

• Uniscribe (Reference)

• Unicode https://home.unicode.org/

• MS Shell Dlg and MS Shell Dlg 2 logical fonts (Reference).

• Fontconfig

• Font Fusion (font engine). URL: https://en.wikipedia.org/wiki/Font_Fusion

• DirectWrite by Microsoft

Font Related CSS Stacks

Following are some CSS settings for web fonts.

• font-face

• font-family

• font-display

• font-stretch

• Font unicode-range subsetting

• Variable fonts (font-variation-settings)

• font-feature-settings

• font-smooth

• font-variant-alternates

Resources for More Information

You may consult following internal and external resources to know more on this topic.

To Share This Article, please use ‘Share’ button in the top right corner of your browser address bar. You can also copy this link and share this page anywhere. 🔗 URL: https://www.dozro.com/fonts/web-fonts-facts-faqs

If this article was helpful for you, please support Dozro on Patreon.

Get Research Data

The content on Dozro website has been created after long hours of profound research from most authentic sources. If you are interested in that research data [RD] behind the creation of this article, please visit the Research Data page.

Articles

• Please visit homepage of Dozro website. 🔗 URL: https://www.dozro.com/

• Learn font customizations for your Squarespace website. 🔗 URL: https://www.dozro.com/squarespace/font-customizations-in-squarespace-website

• Get free but great fonts having beautiful typographic designs from library of Google Fonts. 🔗 URL: https://fonts.google.com

• Dozro article regarding quick tips for choosing best fonts for website creation.

• Please explore the Services offered by Dozro.

Videos

You can watch related videos on YouTube channel of Dozro.

☑️ Watch videos about Fonts – Tips for using Web Fonts on Website, in specific PLAYLIST on Dozro Facebook page.

☑️ Watch videos regarding Fonts – Tips for using Web Fonts on Website, in specific PLAYLIST on our YouTube channel.

★ Top Videos in Squarespace Playlist of Dozro YouTube channel ★

⚫ Number of Fonts on a Website: How Many Web FONTS are Ideal for a WEBSITE?

⚫ How System Fonts Help Web Fonts in Text Rendering by Browsers? | Explained with Real Example.

⚫ How to Reduce Drawbacks of Web Fonts?

⚫ Impact of Web Fonts on Cumulative Layout Shift and Corrective Measures.

⚫ Future of Google Sans and Roboto as Default System Font.

Please watch all videos in the playlist.

Contribute

Dozro welcomes suggestions and feedback. Please suggest edits and improvements in this article. Let’s make this article a great source of trusted information for everyone. For feedback, discussions, and contributions to this article, please follow the specific community post on our Facebook group.