0

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;
}
Wing
  • 8,438
  • 4
  • 37
  • 46
CJAY
  • 6,989
  • 18
  • 64
  • 106
  • Possible duplicate of [CSS @font-face absolute URL from external domain: fonts not loading in firefox](https://stackoverflow.com/questions/11616306/css-font-face-absolute-url-from-external-domain-fonts-not-loading-in-firefox) – Akshay May 21 '19 at 13:56

1 Answers1

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>
Akshay
  • 559
  • 2
  • 11