How to Use Webfonts in Spotify Apps and Pages

The best thing working on a Spotify app is the sense of discovery because the lack of documentation(*) and use cases to search through when something doesn't work. It's like the 2000's when not everything was already blogged.

The worst thing is the lack of support for some modern web features.

If I can understand the reasons why VIDEO and AUDIO support is disabled I understand less why webfonts does not render.

Searching the web I've found an old answer on Stack Overflow that explains why webfonts are not supported but does not provide a solution.

So I've started searching a solution without success.
When I almost was at the point of using Verdana for everything I remembered the quirks between Webkit and webfonts; starting with the bad rendering of the woff format and the inline-block white-space bug and I remembered that for both the problems the solution was to use SVG fonts.

So I've tried to serve only the SVG format in the @fontface declaration and: ta-dah! It worked!

Conclusions

If you want to use custom webfonts in a Spotify app follow this simple steps:

1. design with fonts you like;
2. find or generate only the SVG version of the font;
3. use a standard @font-face declaration in your CSS specifying the SVG format only;
4. enjoy the webfont perfectly rendered (even better than with woff format).

Test app

If you want to give it a try you can download a test app I've built from github.

Let me know if you find bugs or if this solution doesn't work for you.

(*) By the way, the Spotify developer's documentation is not all bad but some examples are wrong and some APIs seem to be missing.
But, as I've already wrote, this is not necessarily a bad thing for an enthusiast developer ;).

Source: my blog post