Sep 16, 2022 08:00:00

'Color font' with free customization such as color change and gradation added to Google Fonts

A 'color font' is a font with a specified color, including everyday emojis. On the other hand, other colorless fonts are simple ones that use only one color, and can only be changed to another color by operating with functions such as text editors. Google has announced that `` highly customizable typefaces '' that apply color font technology such as emoji will be added to

Google Fonts .

First Batch of Color Fonts Arrives on Google Fonts - Material Design
https://material.io/blog/color-fonts-are-here

With the February 2022 update of `` Google Chrome '', support for `` COLRv1 '', which can display color fonts such as emojis clearly, has started. By replacing pictograms with fonts that support color gradation, synthesis, mixing, etc. instead of images, this solves the problem that pictograms blur when scaling up or down, and can keep the amount of data considerably small.

Google Chrome 98 stable release with added font 'COLRv1' that can display pictograms neatly with small capacity - GIGAZINE

According to Google, with COLRv1 you will be able to customize emoji fonts and colors. In conventional fonts, it was only possible to specify a single color for the font itself and change the color, but with COLRv1, all general CSS gradients are possible, and one character can be colored with multiple colors. increase.

In addition, conventional color fonts were basically displayed in fixed colors, but by using COLRv1, it is now possible to include multiple color palette options using CSS 'base-palette' for color fonts. will be In other words, by preparing a color set in advance, you will be able to use different color patterns for each scene.

The color palette set for the font can be freely customized with CSS 'font-palette-values'.

Furthermore, it is also possible to create a three-dimensional font by adjusting the 'thickness' of the font, so that various customizations can be made.

Another example shows how to use COLRv1 to customize new typefaces. As of September 2022,

Noto Color Emoji , which has 3664 emojis, can freely change the color of each part of the emoji by using the COLRv1 function. The following image is a duck color demo that I changed the duck pictogram to GIGAZINE's logo style color scheme.

In addition, Arabic characters are expressed colorfully with emphasis on beauty as much as communication, and have unique characteristics such as functionally using two colors for one character to clarify pronunciation. It seems that there is. ``

Reem Kufi Ink '', `` Reem Kufi Fun '', and `` Aref Ruqaa '' can make such Arabic characters look like calligraphy using ink by using gradation, or change the color of a part of the characters. Ink , Amiri Quran , Cairo Play , Blaka Ink
6 new fonts have been added.

The fonts compatible with COLRv1 included in Google Fonts are as follows.
・Reem Kufi Ink
・Reem Kufi Fun
・Aref Ruqaa Ink
・Amiri Quran
・Cairo Play
・Blaka Ink
・Noto Color Emoji
・Bungee Spice
・Nabla