I have a font file that I've set to @font-face using the following CSS code:
@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');
}
Then, I set the font family for the body like this:
body {
font-family: MyCustomFont1;
font-variation-settings: "wght" 400, "rdot" 0.5
}
Everything was working fine on my localhost, but when I uploaded it to the nginx server, the font didn't display correctly.
In my mime.types file, I have specified the following types for fonts:
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;
I also added configurations to my nginx server for serving fonts:
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;
}
Unfortunately, despite everything working fine on localhost, the font was not displaying correctly on the server and default system font was used instead.