When you specify a Web font using @ font-face in CSS, the link to the local font file succeeds, but the link to the remote font file fails?

[problems encountered]

try to specify Web fonts in CSS using @ font-face. It is found that font effects can be displayed successfully when the linked font file is local, such as: 

@font-face{
  font-family:"Emblema One";
  src:url("WebFonts/EmblemaOne/EmblemaOne-Regular.woff"),
      url("WebFonts/EmblemaOne/EmblemaOne-Regular.ttf");
}
h1{
  font-family:"Emblema One", sans-serif;
}

but when the linked font file is stored on the server, it does not take effect successfully, such as 

@font-face{
  font-family:"Emblema One";
  src:url("http://www.XXX.com/WebFonts/EmblemaOne/EmblemaOne-Regular.woff"),
      url("http://www.XXX.com/WebFonts/EmblemaOne/EmblemaOne-Regular.ttf");
}
h1{
  font-family:"Emblema One", sans-serif;
}

[attempts made]

1. First of all, the path of the remote file must have been repeatedly confirmed, no problem;
2. When searching for answers on the Internet, I saw that someone said that it might be a problem of font file MIME type, so I added:

to the " .htaccess " file on the server. 
AddHandler application/x-font-woff .woff
AddHandler application/x-font-ttf .ttf

after being added, the link to the remote font file can be opened and downloaded directly with the browser, but the problem remains unsolved;
3. After using 360browser and IE, you can do it locally, but not remotely.

[Test Environment]

Server side (remote)
Host Type: Ali Cloud Virtual Host
operating system: CentOS 6.564 bit

client (local)
operating system: Windows 10 Family Chinese version 1803

Html css
Jun.09,2021

in addition to the font file MIME type, does the cross-domain header (Access-Control-Allow-Origin) also need to be added?

first make sure your server can access this address;
then try adding format: 


@font-face {
  font-family: 'iconfont';  /* project id 324840 */
  src: url('//at.alicdn.com/t/font_324840_79msj31s32.eot');
  src: url('//at.alicdn.com/t/font_324840_79msj31s32.eot?-sharpiefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_324840_79msj31s32.woff') format('woff'),
  url('//at.alicdn.com/t/font_324840_79msj31s32.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_324840_79msj31s32.svg-sharpiconfont') format('svg');
}

Previous: Why can deadlocks occur when multiple processes are used in flask requests?

Next: How can another Toast appear when a vue project is submitted when a modal exists?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e5fa5a-4457f.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e5fa5a-4457f.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?