Динамическая загрузка шрифтов. Javascript: отсутствует заголовок «Access-Control-Allow-Origin»

Я пытаюсь динамически загружать шрифты с помощью этой функции.

...
    // Load Font
    function loadFont(url, fontName) {
        if (!isFontAvailable(fontName)) {
            let fontObject = new FontFace(fontName, 'url(' + url + ')');
            fontObject.withCredentials = true;
            fontObject.load().then(function (loaded_face) {
                document.fonts.add(loaded_face);
                document.body.style.fontFamily = fontName + ', Arial';
            }).catch(function (error) {
                console.info("loadFont: " + error);
            });
        }
    }

Но я получаю следующие ошибки:

Access to font at 'http://localhost/fonts/iransans/IRANSansLight.ttf' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
IRANSansLight.ttf:1 Failed to load resource: net::ERR_FAILED

Я использую Nginx в качестве веб-сервера. Я добавил этот блок кода в свой файл конфигурации.

location ~* "^.*?\.(eot)|(ttf)|(woff)$" {
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Expose-Headers true;
}

Я также проверил заголовки ответов:

/var/www$ curl -I http://localhost/fonts/iransans/IRANSansLight.ttf
HTTP/1.1 200 OK
Server: nginx/1.14.0 (Ubuntu)
Date: Mon, 24 Jun 2019 16:50:21 GMT
Content-Type: application/octet-stream
Content-Length: 59968
Last-Modified: Sun, 03 Mar 2019 20:30:49 GMT
Connection: keep-alive
ETag: "5c7c3979-ea40"
Access-Control-Allow-Origin: *
Access-Control-Expose-Headers: true
Accept-Ranges: bytes

Как видите, Access-Control-Allow-Origin прямо здесь. Но я не знаю, почему ошибка говорит: «Отсутствует заголовок« Access-Control-Allow-Origin »».

Кстати, я пробовал другие способы загрузки своих шрифтов, например этот: http://jsfiddle.net/zejz2tkp/1/ Но тоже не сработало, я имею в виду, что ничего не изменилось. Конечно, я немного отредактировал этот JsFiddle, и это уже совсем другая история.