Google Fonts

Article and Description files

🦉 Both the ARTICLE.en_us.html and DESCRIPTION.en_us.html files are used to bring the information that appears in the #About section on any specimen page of Google Fonts to provide further information about the font family.

The team member onboarding the font will create any of these files. Thus, the actual file a designer should write carefully is the README.md file of the font's repository, as the information in it will be crucial to create a descriptive #About section.
Background reading:
must→ README file

Table of contents

The Article

The Article file is a new expanded version of the DESCRIPTION.en_us.html file that includes images and longer-form information and content. It appears on the Google Fonts site as the main content in the About & License section. For example, see the About page of Playpen Sans, and then view the ofl/playpensans directory in the Google Fonts repo: github.com/google/fonts/tree/main/ofl/playpensans.

The ARTICLE.en_us.html file and images should live in an article/ directory alongside the METADATA.pb file in the root of the ofl/fontname directory. Typically, only the Noto fonts are expected to combine the DESCRIPTION.en_us.html and ARTICLE.en_us.html files. For all the other families (non-Noto), if an article with images is added, the description should be overwritten by the Article. This means that, in the case of adding expanded content and images, we should shift all the Description content to the Article and delete the DESCRIPTION.en_us.html.

Here are some guidelines for how to prepare the article/ directory and files:

Requirements

Format text with the font family

You may format text with the font family by using HTML span tags with the "autonym" class. This should not be used to style the entire document. Use it sparingly to document available features in the font family. For example, to style the text “THIS TEXT” with the font family, enter HTML like this:

<span class="autonym">THIS TEXT</span>

Images

Please refer to the Promote your font section of this Guide for fully detailed information on these images. The following summarizes the main specifications for the required images.

Allowed HTML elements

Forbidden HTML elements

Examples

Without localised text

See Space+Grotesk#about provided by DESCRIPTION.en_us.html as an example: it gives plenty of links (mini-website, original authors, referenced font published in GF), and follows all requirements.

With localised text

See Zen+Antique#about as an example, provided by this file DESCRIPTION.en_us.html.

Html snippet

<p>Zen Antique features two kinds of Antique Japanese with Kanji.
The impression of the weights (thickness) of strokes are different among characters—Hiragana and Latin alphabets are slightly lighter, 
while Katakana and Kanji are slightly heavier, which gives the unique rhythm and taste in this font.
<a href="https://fonts.google.com/specimen/Zen+Antique+Soft">Zen Antique Soft</a> has a slightly rounded effect on the corners.</p>

<p>To contribute to the project, visit <a href="https://github.com/googlefonts/zen-antique">github.com/googlefonts/zen-antique</a></p>
<p>Zen Antique には、古風な雰囲気の二種類の漢字を含む日本語書体があります。
文字によって画線の太さに変化があり、ひらがなと欧文は細め、カタカナと漢字は太めで、フォントに独特のリズムと味わいを与えています。
また、<a href="https://fonts.google.com/specimen/Zen+Antique+Soft?subset=japanese">Zen Antique Soft</a> では、角が少し丸くなっています。</p>

<p>このプロジェクトに参加して貢献したい方は、次の URL をご参照ください。<a href="https://github.com/googlefonts/zen-antique">github.com/googlefonts/zen-antique</a></p>

Result on Google Fonts

About Zen Antique

Zen Antique features two kinds of Antique Japanese with Kanji. The impression of the weights (thickness) of strokes are different among characters—Hiragana and Latin alphabets are slightly lighter, while Katakana and Kanji are slightly heavier, which gives the unique rhythm and taste in this font. Zen Antique Soft has a slightly rounded effect on the corners.

To contribute to the project, visit github.com/googlefonts/zen-antique

Zen Antique には、古風な雰囲気の二種類の漢字を含む日本語書体があります。 文字によって画線の太さに変化があり、ひらがなと欧文は細め、カタカナと漢字は太めで、フォントに独特のリズムと味わいを与えています。 また、Zen Antique Soft では、角が少し丸くなっています。

このプロジェクトに参加して貢献したい方は、次の URL をご参照ください。github.com/googlefonts/zen-antique

The Description

This file follows the same requirements as the Article file with some exceptions:

However, please bear in mind that following our new efforts to promote the fonts, the Description file is considered legacy.

Further reading:
templ Promote your font
templ Designer Profile