Describe the bug
Hey team! I generated a badge with the font=jetbrains parameter, and it looks beautiful on my Mac because I have JetBrains Mono installed. However, when I view my GitHub README on my iPhone, the text defaults to a basic, ugly serif font (like Times New Roman).
Why this happens
In lib/svg/generator.ts, we are applying font-family: "JetBrains Mono", monospace;. But SVG <text> elements don't automatically bundle the font. If the viewing device doesn't have it installed locally, it falls back to system defaults, breaking the premium aesthetic.
Possible Solution
We can fix this by injecting a @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap'); statement directly into the <style> block of the generated SVG payload.
Describe the bug
Hey team! I generated a badge with the
font=jetbrainsparameter, and it looks beautiful on my Mac because I have JetBrains Mono installed. However, when I view my GitHub README on my iPhone, the text defaults to a basic, ugly serif font (like Times New Roman).Why this happens
In
lib/svg/generator.ts, we are applyingfont-family: "JetBrains Mono", monospace;. But SVG<text>elements don't automatically bundle the font. If the viewing device doesn't have it installed locally, it falls back to system defaults, breaking the premium aesthetic.Possible Solution
We can fix this by injecting a
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap');statement directly into the<style>block of the generated SVG payload.