MICAH MATEO VARGAS

Game Developer

INFO

Project Type:
Language:
Other Tools:
Team Size:
Role:

Web Development
CSS and Markdown
Github, Itch
1
Developer

anyfont4itch

ABOUT

anyfont4itch is a guide and css for how to use any desired custom font on itch.io using a ttf, otf, woff, or woff2 file.

itch.io is a website for users to host, sell, and download indie video games, game assets, and more. As of November 2024, it hosts over 1,000,000 products.

Text customization on itch is limited as it only supports fonts hosted on Google Fonts. While this provides a wide selection (1,731 fonts as of 2024), many projects feature custom fonts that are tied to their brainding or are used in-game. Incorporating a project’s font into an itch.io page is straightforward and helps maintain consistency with a game’s theme and aesthetic. The difference between a mediocre and good itch page is matching colors to the game, adding a banner, and/or having a background. The difference between a good and great itch page is having font consistent between page and project.


Loading fonts using Base64

To custom load fonts into itch, I developed a solution by converting font files to Base64. This process encodes the file into a string of characters, which are then used to create the font in a @font-face rule. Then the newly created font-family is applied to relevant html elements.


Pages using anyfont4itch

All my project pages on itch use the css I developed detailed in this guide. You can see how I use fonts to create a per project aesthetic.

I've also used it for two profile pages.

On my profile page, I included my own css to match the style of this website. I also had each game's title be displayed in it's relevant font.