Should Color Web Fonts Be Used for Website?
Yes you can but it is better to wait some time before the technology gets full support.
Color fonts come in different and complicated formats.
SVG format is invented by Mozilla and Adobe
COLR/CPAL format is invented by Microsoft
SBIX is invented by Apple
CBDT is invented by Google
All color font formats are not supported by all browsers and operating systems. In fact, these multiple formats are the major problem in the way of color web fonts.
For example, SBIX format is not supported in Firefox, while CBDT is not supported in Safari.
SVG format has relatively wider support on browsers but not on all versions of operating systems. SVG format also comes with some cons, as mentioned on Microsoft Docs in these words.
“There are certain trade-offs, however. File sizes are often larger when using the SVG table than for the other color formats. Also, glyph outlines used in the COLR table can be variable (in a variable font) and can also be hinted, whereas these capabilities are not supported with the SVG table.”
Please note that hinting instructions are embedded into font file which tell operating system to modify font glyphs for better display on low resolution screens. According to Google Material, hinted version of a font (such as Roboto or Noto) take more space than non-hinted version.
SVG and COLR both support alpha channel masking. However, COLR format has better prospects in future.
Since Chrome 98, the support Colrv1 has been added.
Android 13 has also added rendering support for COLR version 1 fonts and updated the system emoji to the COLRv1 format.
You can explore Microsoft Docs to know about the Windows support for the color fonts.
Color fonts are also larger in size, for example file size of Gilbert color font is 611 KB. [RD]
Due to such hurdles, use of color web fonts is limited. Very limited number of webpages use color fonts which is near to non-existent. Currently, color fonts are mostly used in emojis. [RD]
We can hope that in coming years, color fonts will pick some popularity on the web.
Explore more articles about Fonts, or visit Home Page of Dozro website.
