If I link to an external CSS on a remote server with font installed. Will it embed the font?

Question

Have licensed fonts on a server, but a page is hosted externally by a vendor.

On the externally hosted page, if I link to a CSS stylesheet on my server. Will it embed the font?

Thanks

Answer 1

The answer depends on a couple of things.

First - you have to know how the remote server handles remote requests for assets. If the remote is an Apache server, for example, and is set up to deny external requests via .htaccess to certain non-HTML page folders, it will not work. Most likely, it is not setup like that but you can find out by just trying the remote URL in a browser and seeing if it connects.

The other thing to watch out for is CORS. If your site is HTTP and the other is encrypted HTTPS you could have a cross-origin conflict. One way to avoid that is to use protocol relative URLs, which look like: //domain.com/your/folders/here. This helps resolve a cross-origin conflict more often than not.

To link to the font files use absolute, protocol relative URLs in conjunction with @font-face in your CSS:

@font-face {
  font-family: 'Proxima-Nova';
          src: url('//www.example.com/fonts/proximanovaextrabold.eot');
          src: url('//www.example.com/fonts/proximanovaextrabold.eot?#iefix') format('embedded-opentype'),
               url('//www.example.com/fonts/proximanovaextrabold.woff2') format('woff2'),
               url('//www.example.com/fonts/proximanovaextrabold.woff') format('woff'),
               url('//www.example.com/fonts/proximanovaextrabold.ttf') format('truetype');
}