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

CSS

Posted by Stu Cowley
Stu Cowley
26,287 Points

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

robertm
robertm
13,570 Points
robertm
robertm
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

body{
font-family:MyWebFont;
}

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/

bleedcmyk
bleedcmyk
5,945 Points
bleedcmyk
bleedcmyk
5,945 Points

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

an example would be

url('../../font.otf')

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

Stu Cowley
Stu Cowley
26,287 Points
Stu Cowley
Stu Cowley
26,287 Points

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 :)

robertm
robertm
13,570 Points
robertm
robertm
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