# 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:

```arduino
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. 

{% hint style="danger" %}
**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` 
  {% endhint %}

{% hint style="warning" %}
**Necessary adjustments:**

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

***

#### 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:

```nginx
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:

```nginx
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:

```apacheconf
# 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:

```apacheconf
<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:

```typescript
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.