A naukri.com initiative
Dev
1w
185
Image Credit: Dev
✨ Why the Same Font Can Look So Different — and How to Fix It
- Fonts can look different even when using the same font due to variations like glyphs.
- Typography discrepancy noticed when comparing personal portfolio site to Brittany Chiang’s site.
- Discovered that the letter 'a' had different glyphs: double-storey and single-storey.
- Double-storey 'a' is traditional, while the single-storey 'a' looks more modern.
- Used CSS property font-feature-settings to change the glyph style to single-storey 'a'.
- Attempted to implement the change through Next.js and Tailwind CSS, but it didn't work.
- Opted to self-host the Inter font by downloading it from GitHub and configuring it in the project.
- After self-hosting the font, successfully achieved the desired single-storey 'a' style.
- Key takeaway: Fonts like Inter have multiple glyph variations, and font-feature-settings in CSS can customize glyphs.
- When using third-party font services, not all OpenType features may be accessible.
- Self-hosting fonts provides more control over glyph variations and styling.
- Useful Links: Brittany's Portfolio, Google fonts article on font glyphs, MDN for font-feature-settings, Next.js Docs on Using Local Fonts.
- Author invites feedback and tips in the comments.
- Article concludes with gratitude for reading.
Read Full Article
11 Likes
For uninterrupted reading, download the app