Custom Fonts

To allow the LiSA Player to fetch and use the font files served from your host, you’ll need to have the font‐serving host send the proper CORS header so that the browser actually permits the cross‐origin fetch.

Enable CORS on the font host

Even with CSP allowing the LiSA Player domain, the browser will still refuse the request unless the font server responds with:

Access-Control-Allow-Origin: https://player.hello-lisa.com

(or a wildcard * if you’re OK with any origin).

So on the font-serving host's web server configuration (Apache, nginx, CDN, etc.), make sure requests for fonts (e.g. `*.woff or *.woff2) return the header.

Deprecation Notice: Support for account-specific player domains will be discontinued soon. To ensure uninterrupted service, please add both of the following to your allowlist:

  • https://player.hello-lisa.com

  • https://{clientId}.loveslisa.tech

Necessary adjustments:

Please ensure to replace {clientId} with your unique client identifier, provided during account setup.

nginx

Define a map at http-scope to turn the incoming $http_origin into itself if it’s allowed, or into an empty string otherwise:

map $http_origin $cors_allow_origin {
    default                          "";
    "https://player.hello-lisa.com"  $http_origin;
    "https://{clientId}.loveslisa.tech"  $http_origin;
}

In your font‐serving location block, add the header only when $cors_allow_origin is non-empty:

server {
    # … your server config …

    location ~* \.(?:woff2?|ttf|otf)$ {
        # only echo a CORS header if $cors_allow_origin was set
        if ($cors_allow_origin != "") {
            add_header Access-Control-Allow-Origin $cors_allow_origin;
            add_header Access-Control-Allow-Methods "GET, OPTIONS";
            add_header Access-Control-Allow-Headers "Origin, Accept, Range";
        }

        # standard font‐serving directives
        expires 1M;
        add_header Cache-Control "public";
        try_files $uri =404;
    }
}

This way, requests whose Origin is in your map get the header; all others get none.

Apache (httpd) (using SetEnvIf and mod_headers)

Define which origins you allow:

# in your site’s <VirtualHost> or server config
<IfModule mod_setenvif.c>
    # capture allowed origins
    SetEnvIf Origin "^(https://player\.hello-lisa\.com|https://{clientId}\.loveslisa\.tech)$" CORS_ALLOW_ORIGIN=$0
</IfModule>

Then use mod_headers to echo it back:

<IfModule mod_headers.c>
    Header always set Access-Control-Allow-Origin "%{CORS_ALLOW_ORIGIN}e" env=CORS_ALLOW_ORIGIN
    Header always set Access-Control-Allow-Methods "GET, OPTIONS" env=CORS_ALLOW_ORIGIN
    Header always set Access-Control-Allow-Headers "Origin, Accept, Range" env=CORS_ALLOW_ORIGIN
</IfModule>

Only requests whose Origin matches your regex will get the header.

Express.js (Node.js)

If you’re using an Express app, you can make a small middleware:

const whitelist = [
  // Other whitelisted URLs
  "https://player.hello-lisa.com",
  "https://{clientId}.loveslisa.tech",
];

app.use((req, res, next) => {
  const origin = req.get("Origin");
  if (whitelist.includes(origin)) {
    res.set("Access-Control-Allow-Origin", origin);
    res.set("Access-Control-Allow-Methods", "GET, OPTIONS");
    res.set("Access-Control-Allow-Headers", "Origin,Accept,Range");
  }
  // Handle preflight
  if (req.method === "OPTIONS") {
    return res.sendStatus(204);
  }
  next();
});

Key points

  • Do not use * if you need to support credentialed requests (cookies, HTTP auth).

  • Always echo the incoming origin rather than hard-coding more than one in the header.

  • Remember to also allow the OPTIONS preflight with the same logic (or via a global handler).

  • Clear caches or restart your server after changes so the new headers take effect.

With one of these techniques in place, you can safely serve your fonts to as many specific domains as you like.

PreviousThemingNextWidgets

Last updated