CODEWITHSUNDEEP
cssfontsfont-face
Ali Ahmadi
Ali Ahmadi

Reputation: 89

CSS - can I use @font-face like this:

I want to use fonts url from another website, is it possible?

@font-face {
    font-family: 'font';
    src: url('http://example.com/font.eot?#') format('eot'),    
         url('http://example.com/font.woff') format('woff'),     
         url('http://example.com/font.ttf') format('truetype');  
    font-weight: normal;
    font-style: normal;
}

I tried this but it doesn't work!

Upvotes: 2

Views: 88

Answers (2)

serge
serge

Reputation: 15229

You can't import any script or font from other server if the respective has disabled CORS in configuration.

Only if you have acces to that another server, you can enable it in the following way: 

# Microsoft IIS in web.config
<?xml version="1.0" encoding="utf-8"?>
<configuration>
 <system.webServer>
   <httpProtocol>
     <customHeaders>
       <add name="Access-Control-Allow-Origin" value="*" />
     </customHeaders>
   </httpProtocol>
 </system.webServer>
</configuration>

# Apache config
# The code can be placed with the `.htaccess` file or `httpd.conf` file:
<FilesMatch ".(eot|ttf|otf|woff)">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>

# nginx config
if ($filename ~* ^.*?\.(eot)|(ttf)|(woff)$){
    add_header Access-Control-Allow-Origin *;
}

This sets the Access-Control-Allow-Origin CORS configuration to allow pulling from all domains. List specific domains by comma if you want to serve fonts up to only specific domains. You'll want to serve up all font types appropriately in the case that the browser prefers one type.

Read further: Serving Fonts from CDN

Upvotes: 0

Jacob G
Jacob G

Reputation: 14172

No, you cannot import a font file from another URL, as it violates cross origin specs. You would have to put the css file in the same directory on that domain(http://example.com/fonts.css):

/*fonts.css*/

@font-face {
    font-family: 'font';
    src: url('font.eot?#') format('eot'),    
         url('font.woff') format('woff'),     
         url('font.ttf') format('truetype');  
    font-weight: normal;
    font-style: normal;
}

Then in your stylesheet, import it:

@import url("http://example.com/fonts.css");

Or, link to it in your document <head>:

<link rel="stylesheet" href="http://example.com/fonts.css">

Upvotes: 1

Related Questions