www.haywalk.ca

Hayden's piece of the internet since 2020

PSA: Getting Fonts to Work on Mobile

Written 2026-02-10

The site in question

This is just a short PSA for anyone running into problems with custom fonts not working on mobile devices.

Unnecessary Backstory

I have a few domain names lying around, one of which is psychoticfriends.net. For the uninitiated, this is a reference to the "Psychotic Friends Network" that is briefly mentioned in one level (specifically Thursday) of the 2003 PC game POSTAL 2. I use the domain to host a Matrix server, but wanted a placeholder webpage as an Easter egg for anyone who bothers to plug the domain into their browser. The whole page is just a title, a couple of inside jokes from the game, and a screenshot of Gary Coleman's cameo. The text is in the "Smash" font, which is the font used in promotional material for the game. Since I put the site up, I've had issues with the font rendering on mobile, and only just took the time to sort it out!

More Obvious: Using the Correct Font Formats

This one is simple enough: make sure the font is available in both WOFF and WOFF2. When you're defining the font in CSS, you can specify multiple sources delimited by commas. Feel free to use the following snippet of CSS:

@font-face {
    font-family: 'FontNameHere';
    src: 
        url('https://mywebsite.com/fonts/font.woff2') format('woff2'),
        url('https://mywebsite.com/fonts/font.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

If your font is in another format, there are a number of online converters that can convert it to WOFF and WOFF2. These will have the best compatibility with modern browsers, both mobile and desktop.

Less Obvious: Web Server Configuration

This is where I got stuck, and now hope to get you unstuck. The bane of any young web developer's existence: CORS! You need to configure your server to respond with the appropriate CORS headers so that the browser will be able to download the font files. In Apache, there are three parts to this:

  1. Enable the mod_headers
  2. Enable .htaccess files
  3. Use your .htaccess file to set CORS headers for font files

1. Enable mod_headers

Easy! Just run the following command:

$ sudo a2enmod headers

2. Enable .htaccess Files

This one will depend on how your server is configured - either in the main Apache configuration, or in your site's virtual host config, add the following:

<Directory "/">
    AllowOverride All
</Directory>

This allows a .htaccess file to override the site's default settings.

3. Write your .htaccess File

Again, the goal here is to get the server to respond with the correct CORS headers when it gets asked for a font file. You can make a file called .htaccess at the root of your site and paste in the following:

<IfModule mod_headers.c>
    <FilesMatch "\.(woff|woff2)$">
        Header set Access-Control-Allow-Origin "*"
    </FilesMatch>
</IfModule>

AddType font/woff2 .woff2
AddType font/woff .woff

This tells Apache to send the appropriate headers and MIME types for font files. To finish up, simply restart Apache! If your server uses systemd, simply run:

$ sudo systemctl restart apache2

And you should be good to go. No regerts [sic]!