Search code examples
cssreactjsubuntunginxserver

@font-face in server nginx not working but in loacalhost is ok


i have a font file and set to @font-face with this code in css file

@font-face {
  font-family: 'MyCustomFont1';

  src:
    local('MyCustomFont1'),
    url('IRANSansXV.woff2') format('woff2'),
    url('IRANSansXFaNum-DemiBold.woff') format('woff'),
    url('Digi Lotos Bold.ttf') format('ttf'),

}

and with font-family set to body

body {
  font-family: MyCustomFont1;
  font-variation-settings: "wght" 400, "rdot" 0.5
}

It works for me in localhost, but it doesn't work on the nginx server

my mime.types for font

  GNU nano 6.2                                          mime.types                                                   types {
    font/ttf                              ttf;
    font/otf                              otf;
    font/woff                             woff;
    font/woff2                            woff2;

    application/x-font-ttf                ttf;
    font/opentype                         otf;
    application/vnd.ms-fontobject         eot;
    font/x-woff                           woff;
    application/font/woff2                woff2;
    application/font-woff                 woff;

and this for config nginx for font

server {

        listen 80 default_server;
        listen [::]:80 default_server;

        root /var/www/html;

        location ~* \.(eot|ttf|woff|woff2)$ {
                add_header Access-Control-Allow-Origin *;
        }

        location ~* \.(eot|otf|ttf|woff|woff2)$ {
                add_header Access-Control-Allow-Origin *;
                expires max;
        }

I tried with localhost and it was ok but when I tried with server it didn't work and it put system default font for me


Solution

  • I put my font somewhere on another host and put my address in the url section and I was able to download it.