Google Fonts

The Article file

🦉 The ARTICLE.en_us.html file provides the information that appears in the #About section of any specimen page on Google Fonts, giving readers further details about the font family.

The team member onboarding the font creates this file. The file a designer should write carefully is the README.md file of the font's repository, as the information in it is crucial to building a descriptive #About section.
Background reading:
must→ README file

Table of contents

The Article

The Article file 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 its images should live in an article/ directory alongside the METADATA.pb file in the root of the ofl/fontname directory.

Every family now uses an ARTICLE.en_us.html file, even when it contains no images. (The legacy DESCRIPTION.en_us.html file has been retired: all of the About content now lives in the Article.)

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

The Article file supports images, which must live in the article/ directory alongside ARTICLE.en_us.html. For the full image specifications — formats, file sizes, resolution, and social media requirements — see the Promote your font section of this Guide. In summary:

The images in this repository are licensed under the CC https://creativecommons.org/licenses/by-sa/4.0/. This license mention must be present in the repository, inside the documentation folder (see Promote your font for details).

Videos

There are two options for including videos in the Article file: an MP4 with a maximum file size of 1.4 MB, or a YouTube link.

</video>```

You can use these cases as reference: Danfo, Savate

Allowed HTML elements

Forbidden HTML elements

Examples

Without localized text

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

With localized text

See Zen+Antique#about as an example.

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

Further reading:
templ Promote your font
templ Designer Profile