Using custom font located on a different server

Question

I have to use a custom font on one of the web pages. I am using @font-face in my CSS.

Now, I am not sure but I think for this to work the font should be on the same server as the web page. Is this right? I have tried using a different server but it didn't work. So, I am not sure if there was something I missed or a different server hosted font doesn't work.

If it works, then is it as simple as mentioning the complete URL in the url part of t @font-face? Or there is something more I need to do? What are the limitations? I know that in IE .eot fonts work.

Thanks.

I may be very wrong here but I think the font has to be in the client machine. Whether or not the server has it should be irrelevant since it's loaded by the browser, not the server side code, right? — Geeky Guy, May 28 '13 at 17:08
@Renan : Not really.That's the reason why font-face was introduced. :-) — Harsha Venkataramu, May 28 '13 at 17:09
@harsha living and learning... I wish I could upvote your comment. — Geeky Guy, May 28 '13 at 17:11
@PaulDixon : They work on other domains too.Please take a look at the fiddle link I posted in my answer below. — Harsha Venkataramu, May 28 '13 at 17:15
@Renan But I did upvote your comment.As they say,stay hungry,stay foolish :) — Harsha Venkataramu, May 28 '13 at 17:16
@harsha - in your sample, the i.nflcdn.com domain returns Access-Control-Allow-Origin headers, which is the secret sauce which allows this to happen. — Paul Dixon, May 28 '13 at 17:25
@harsha yeah I voted like that too, but I meant giving you rep :) — Geeky Guy, May 28 '13 at 17:27
@Renan : I might not be completely right as well.As Paul here commented , Access-Control-Allow-Origin headers are necessary — Harsha Venkataramu, May 28 '13 at 17:30

Harsha Venkataramu · Answer 1 · 2013-05-28T17:14:22.443

0

Yes,you can use a font located on another server.

An Example

@font-face 
{
    font-family: 'EndzoneSansLight';
    src: url('//:') format('no404'),
        url('http://i.nflcdn.com/static/site/4.0/img/fonts/endzone-sans/light.eot?#iefix') format('eot'),
        url('http://i.nflcdn.com/static/site/4.0/img/fonts/endzone-sans/light.woff') format('woff'),
        url('http://i.nflcdn.com/static/site/4.0/img/fonts/endzone-sans/light.ttf') format('truetype'),
        url('http://i.nflcdn.com/static/site/4.0/img/fonts/endzone-sans/light.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

Here's a FIDDLE

edited May 28 '13 at 17:14

answered May 28 '13 at 17:08

Harsha Venkataramu

2,887
1
34
58

Does it work on IE8 & below? I don't think so :( – Blueboye May 28 '13 at 17:49
@Leon : if the same server font-face works on IE8 or below , even this should – Harsha Venkataramu May 28 '13 at 17:54
@Leon : Also , why do you need a font from another server?Won't it be possible for you to upload the font to your server? – Harsha Venkataramu May 28 '13 at 17:56
There are limitations with our product. It is hard to describe here but trust me, I can't. – Blueboye May 28 '13 at 18:55
@Leon : You don't have to explain in detail.If you could tell us a bit about the necessity of having the font to be included from another server,we could probably help you out better. – Harsha Venkataramu May 28 '13 at 18:58
I just hit the same problem - I need to host icon font on a single location but be used on more than one domain. Rather than trying to have to remember to duplicate the file, we want to simply refer to a single source (less maintenance headache) – Hamish Rouse Jun 30 '15 at 03:23

score 0 · Answer 2 · answered May 28 '13 at 17:14

Have you heard about Google Fonts before ?

http://www.google.com/fonts/

That's the easiest way to import the custom font from other server (in this case Google's server) to your website.

choose your font and add this code on your web page

<link href='http://fonts.googleapis.com/css?family=Days+One' rel='stylesheet' type='text/css'>

And if I trace the url it will show this details

@font-face {
  font-family: 'Days One';
  font-style: normal;
  font-weight: 400;
  src: local('Days One'), local('DaysOne-Regular'), url(http://themes.googleusercontent.com/static/fonts/daysone/v3/yfpXiXt9Xp5H97keqlB0t_esZW2xOQ-xsNqO47m55DA.woff) format('woff');
}

Hope this helps :)

Yeah I have heard of google fonts but I think you can only use the fonts that they host. Can I upload my font on google fonts and use it? — Blueboye, May 28 '13 at 17:41
I don't think so, sorry.. maybe at least for now. The last option is using image, but it will cost byte more to load — Jack RW, May 30 '13 at 18:00

Using custom font located on a different server

2 Answers2