如何从外部CSS文件导入字体

Question

I'm trying to import font-family from external css file which is present in CDN.

The file has some font-family defined in the file and I want to import it. I have given it a try but I'm not able to get it working.

Here is what I have tried:

@font-face {
    font-family: 'halcom-bold';
    src: url('https://yyyy.net/aso.css');
}

Here is the external CSS code:

aso.css

@font-face {
font-family:"halcom";
src:url("https://use.typekit.net/af/657e4d/00000000000000003b9aedc6/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/657e4d/00000000000000003b9aedc6/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/657e4d/00000000000000003b9aedc6/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
font-style:normal;font-weight:700;
}

Answer 1

You can't use @font-face in Firefox with a font hosted on a different domain If you want to specify a font for @font-face using an absolute URL, or a font hosted on a different domain, it needs to be served with Access Control Headers, specifically the Access-Control-Allow-Origin header set to '*' or the domains allowed to request the font. This also applies to fonts hosted on a different sub-domain. If you are using Apache you can try to put this in your .htaccess and restart the server

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
<FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>