Why does a badge's font face not correspond to the Shields Specification

[pavpen]

The Shields Specification currently says:

The letter spacing (or kerning) is deliberate and focused on clarity, so is the use of the Open Sans font face. Contrary to widely available web-safe alternative sans-serif fonts like Arial (a sloppy Helvetica ripoff) and Verdana (a sloppy Futura ripoff), Open Sans remains highly legible at very small sizes which is why it was chosen.

However, if I request a badge from Shields.io I currently get the following font stack:

font-family="Verdana,Geneva,DejaVu Sans,sans-serif"

Can someone, please, explain why the Shields.io output doesn't match the specification?

Steps to Reproduce

• curl https://img.shields.io/badge/downloads-2.7G-green

Observed Behavior

• The returned SVG document uses font-family="Verdana,Geneva,DejaVu Sans,sans-serif" for badge labels.

<svg xmlns="http://www.w3.org/2000/svg" width="106" height="20" role="img" aria-label="downloads: 2.7G"><title>downloads: 2.7G</title><filter id="blur"><feGaussianBlur in="SourceGraphic" stdDeviation="16"/></filter><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="106" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="69" height="20" fill="#555"/><rect x="69" width="37" height="20" fill="#67ac09"/><rect width="106" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="355" y="150" fill="#010101" fill-opacity=".80" filter="url(#blur)" transform="scale(.1)" textLength="590">downloads</text><text aria-hidden="true" x="355" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="590">downloads</text><text x="355" y="140" transform="scale(.1)" fill="#fff" textLength="590">downloads</text><text aria-hidden="true" x="865" y="150" fill="#010101" fill-opacity=".80" filter="url(#blur)" transform="scale(.1)" textLength="270">2.7G</text><text aria-hidden="true" x="865" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="270">2.7G</text><text x="865" y="140" transform="scale(.1)" fill="#fff" textLength="270">2.7G</text></g></svg>

Expected Behavior

• The returned SVG uses the "Open Sans" type face.

[PyvesB]

Hello @pavpen 👋🏻

Essentially, Open Sans is not universally available, so we can't use it in badges unless we base64 the font directly in every SVG, or accept that a proportion of users will be rendering a different font, said proportion presumably being significantly higher than those who don't have Verdana. As to why we've kept the specification misaligned with what Shields.io effectively does, here's a related discussion: #225.

[pavpen]

Thanks for the explanation!

I, personally, consider some of the limitations with badges starting with some of what's in the HTML, and SVG standard, since badges seem to be often used from HTML, or Markdown.

• It's inconvenient to embed an HTML component from another URL in an existing document. (E.g., an <iframe/> requires specifying a size. Sizing to fit content requires injecting JavaScript.)
• SVG uses different length units for text, and for geometric elements. And, there's no mechanism to refer to rendered text length. (Sizing a path to text requires embedding JavaScript in the SVG.)
• Markdown renderers usually disallow embedding styling elements, as well as JavaScript. (And such elements do raise security concerns.)

I was, indeed, considering embedding characters from a font with a permissive license, rather than relying on whatever is on a user's machine. E.g., Google Fonts already supports requesting a font file with only a specific set of characters.

[pavpen]

In any case, I think it's worth linking this discussion in the "Shields Specification".