Different fonts don't work in the copied code

[cesaralvrz]

Describe the bug
In the website the fonts are displayed correctly, but when you copied them to your profile it showcase the default font.

To Reproduce
Steps to reproduce the behavior:

1. Go to the website https://awesome-github-stats.azurewebsites.net/
2. Change font
3. Copy the code (html or markdown)
4. Paste it in the profile

Expected behavior
To showcase the fonts correctly on the profile

Screenshots
On the website:

On my profile:

Desktop (please complete the following information):

• OS: macOS
• Browser: Firefox, Brave
• Version: both latest

[bjsneto]

The card containing the statistics is an SVG inside an <img> tag, and according to the MDN SVG documentation (SVG as an Image - Restrictions):

For security purposes, some browsers place restrictions on SVG content when it's being used as an image. Specifically, the following limitations may apply:

• JavaScript is disabled.
• External resources (e.g., images, stylesheets) cannot be loaded, though they can be used if inlined through data: URLs.
• :visited-link styles aren't rendered.
• Platform-native widget styling (based on OS theme) is disabled.

Note that the above restrictions are specific to image contexts; they don't apply when SVG content is viewed directly, or when it's embedded as a document via the <iframe>, <object>, or <embed> elements.

Currently, the fonts are being loaded as external resources (e.g., via Google Fonts), and since the SVG is rendered inside an <img> tag, the browser blocks these external requests as described in the documentation above.

Possible Solution

Embed fonts directly in the SVG (Base64)

Instead of loading external fonts, the font files could be converted to Base64 and embedded directly within the SVG using @font-face:

@font-face {
  font-family: 'CustomFont';
  src: url(data:font/woff2;base64,d09GMgABAAAAA...) format('woff2');
}