Adding Custom Fonts 2024? [SOLVED]

help
1

SOLVED. See the next post for details.

My site uses the Cloudfront CDN. I want to use the fonts Creata-Regular.woff2 and Creata-Bold.woff2. I’ve copied the fonts to the directory /public/fonts/.

In my main.css file, I have:

@font-face {
    font-family: 'Creata-Regular';
    src: local('/fonts/Creata-Regular'), url("https://dg8cu6dzhqz3l.cloudfront.net/fonts/Creata-Regular.woff2") format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Creata-Bold';
    src: local('/fonts/Creata-Bold'), url("https://dg8cu6dzhqz3l.cloudfront.net/fonts/Creata-Bold.woff2") format('woff2');
    font-weight: normal;
    font-style: normal;
}

I set up CORS via Helmet, and have this in my CORS setup:

  "allowedOrigins_fontSrc": [
    "https://fonts.googleapis.com",
    "https://fonts.gstatic.com/",
    "https://cdn.userway.org/",
    "https://dg8cu6dzhqz3l.cloudfront.net"
  ],

This works perfectly in Chrome, but not in Safari or Firefox.

What is the correct way to set this up?

Update:

I changed main.css to this:

@font-face {
    font-family: 'Creata-Regular';
    src: url("https://dg8cu6dzhqz3l.cloudfront.net/fonts/Creata-Regular.woff2") format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Creata-Bold';
    src: url("https://dg8cu6dzhqz3l.cloudfront.net/fonts/Creata-Bold.woff2") format('woff2');
    font-weight: normal;
    font-style: normal;
}

…and got it working in Safari, but not yet in Firefox.

Firefox is throwing the error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://dg8cu6dzhqz3l.cloudfront.net/fonts/Creata-Regular.woff2. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.

This seems like something I should be able to fix in my CORS policy. I updated it to:

  "allowedOrigins_fontSrc": [
    "https://fonts.googleapis.com",
    "https://fonts.gstatic.com/",
    "https://cdn.userway.org/",
    "https://dg8cu6dzhqz3l.cloudfront.net/",
    "https://dg8cu6dzhqz3l.cloudfront.net/fonts/"
  ],

Is there another CORS policy I need to set in addition to fontSrc?

2

Solved!

I put my custom fonts in /public/fonts/

This works for Chrome and Safari:

@font-face {
    font-family: 'Creata-Regular';
    src: url("https://dg8cu6dzhqz3l.cloudfront.net/fonts/Creata-Regular.woff2") format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Creata-Bold';
    src: url("https://dg8cu6dzhqz3l.cloudfront.net/fonts/Creata-Bold.woff2") format('woff2');
    font-weight: normal;
    font-style: normal;
}

The key to custom fonts in Firefox, is that Firefox handles custom fonts differently than the other two. From SurrealCMS:

You see, WebKit-based browsers incorrectly allow cross-domain fonts to load, but other browsers (correctly) do not. This is why your fonts might load in Chrome and Safari, but not in Firefox.

This fixed it so that custom fonts work in Firefox:

WebApp.rawConnectHandlers.use((req, res, next) => {
    // Check if the request path ends with '.woff2'
    if (req.url.endsWith('.woff2')) {
        // Set the Access-Control-Allow-Origin header to '*'
        res.setHeader('Access-Control-Allow-Origin', '*');
    }
    // Call next to continue the request processing
    next();
});

Additional CORS setup in Helmet was not required.

If anyone reading this has improvements/recommendations, please post them.

3

The issue that we encounter is that you cannot add the font on your folder and be able to develop using that font. There is this initial work to deploy the build with the font first before using it in development.

We were thinking of adding a build script to handle this but since a new font requirement comes rarely, we just chose the deploy-first method :grin:

1 Like