Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Basics (2014) Understanding Values and Units Font Properties

Aaron Coursolle
Aaron Coursolle
18,014 Points

Can I provide a font?

I still have one of those "2000 royalty-free fonts" CD-roms laying around. It probably wouldn't be worth it for paragraph text, but there were a few fonts that would look good as headlines in future designs. Is there any way I can include them so that people see them when they visit my site?

4 Answers

Colin Bell
Colin Bell
29,679 Points

You can, but you'd have to host the font yourself.

SELF-HOSTING

Self-hosting desktop fonts

Most font files you have installed will be TrueType (.ttf) with a smattering of OpenType (.otf). You can save these to your server and specify them in your CSS.

Support for .ttf and .otf file formats is widespread across all modern browsers except IE (even the latest version) and some mobile browsers (including legacy versions of iOS Safari).

To increase your coverage you’ll need several additional formats. .eot works for IE, .woff will work for most browsers and is the W3C’s preferred format, .svg will work on legacy browsers. There’s a number of web services that will generate these formats for you from your .ttf file, one of the most popular being Font Squirrel’s.

The downside with converting desktop fonts for use online is twofold: firstly, you are almost certainly not licensed to do so; and > secondly, desktop fonts are almost always optimized for print, they simply do not render well on screen.

Aaron Coursolle
Aaron Coursolle
18,014 Points

"firstly, you are almost certainly not licensed to do so" Does that include royalty-free fonts, as well?

Colin Bell
Colin Bell
29,679 Points

Does that include royalty-free fonts, as well?

I don't believe so, but I'm not sure.

Ryan Field
PLUS
Ryan Field
Courses Plus Student 21,240 Points

In addition to the above-mentioned methods, there is one other way of getting custom fonts into your webpage, which is by using a base64-encoded font. Now, this isn't something you should do with all your fonts or very often at all, but it is a method you could use if you really wanted a font on a page and you had no place to host your own.

The explanation of how to do this is here, but it boils down to using Font Squirrel to turn your font into a string of data characters, and then just using that string in your CSS file.

Remember, use this sparingly if you do so at all. Also keep in mind that fancy fonts can have quite lengthy base64 strings, so just be mindful of not having a CSS file that is too large.

ellie adam
ellie adam
26,376 Points

Hi Coursolle, People only see those font they already have on their pcs or global fonts. They can't see your selected fonts. That's why now these days we use google fonts and put google url in links. So everybody can see it on their pcs.

:)

ellie adam
ellie adam
26,376 Points

I think it is too much headache. I won't do it I will use google font :)

Aaron Coursolle
Aaron Coursolle
18,014 Points

Good point. I don't think I would ever go beyond google or installed fonts for paragraph text. This would be for headline text only and only in special cases.