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 CSS Foundations Web Typography Web Fonts

Richard Targett
Richard Targett
4,960 Points
Posted by Richard Targett
Richard Targett
4,960 Points

Using @fontface on PC (not hosted yet)

How do you go about using typekits fonts on your brackets.io browser on a local host PC. I am not yet uploading to test out the design I have on the web.

I am using my local computer, and the fontface so far wasn't showing up.

Where in typekit does it allow for the code? Also. Is it possible?

3 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

You probably need to install your font to your computer system if you want it to show up locally.

You can also link it to a location on your web server so it will show up even if a user does not have that font downloaded :-)

Richard Targett
Richard Targett
4,960 Points
Richard Targett
Richard Targett
4,960 Points

but theres no way to simply pull from the internet and place it on brackets.io as I code in css/html docs?

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

No it doesn't quite work like that.

When pulling in fonts from a web server, either you'd use the link element

<link href='https://fonts.googleapis.com/css?family=PT+Sans+Caption|Karla&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

or directly in your CSS with @font-face, making sure you use a rellative path. The font file will exist somewhere, wether it's on your web server or hard drive.

Either way it will then be called in the normal way with CSS.

You give the name via the font-face rule and then link it using a selector in the standard way.

@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 */
}


font-family:  'MyWebFont';