Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial


Loading Fonts to a Site via FTP

Hey guys,

I'm stuck on loading fonts to my site that are stored on my FTP. As I have never gone about loading fonts this way I was wondering how this can be achieved.

I have tried the below CSS code to no avail and I just can't seem to put a finger on how to correctly do this.

@font-face {
    font-family: 'entypo';
    src: url(http://juicy-tomato.com/cdn/proj-01-gs8ball/siteFnt/entypo.eot);
    src: url(http://juicy-tomato.com/cdn/proj-01-gs8ball/siteFnt/entypo.eot#iefix) format('embedded-opentype'),
         url(http://juicy-tomato.com/cdn/proj-01-gs8ball/siteFnt/entypo.woff) format('woff'),
         url(http://juicy-tomato.com/cdn/proj-01-gs8ball/siteFnt/entypo.ttf) format('truetype'),
         url(http://juicy-tomato.com/cdn/proj-01-gs8ball/siteFnt/entypo.svg#svgEntypo) format('svg');

Any advice on how I can achieve this would be greatly appreciated.

Thanking you in advance

Stu : )

3 Answers

13,570 Points

No need to link it by url, you can do it like this:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */

then once you're done that


Just make sure that that you get the folder directory correct.

To read more about it: http://css-tricks.com/snippets/css/using-font-face/

You can use ../ to go back a folder and /foldername/ to go forward.

an example would be


Which would direct the browser to a folder that was two folders deep.

Hey Robert Muresian,

Thanks for your answer, but I am aware that this is the way of importing fonts as I usual use this method, but with the site I'm currently building I am using PHP and a few pages are sub pages in folders i.e. http://www.domainname.com/music/artists.php Hope fully that makes sense. :)

Correctly me if I am wrong but I have to link files via my hosting. If there is a better way of doing this please let me know, I'll tag Hampton Paulk, he would know what to do.

Stu :)

13,570 Points

Ah, I understand what you mean now. I would probably go with what bleedcmyk said. There has to be an alternative way. I look forward to the answer