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 Basics (2014) Enhancing the Design With CSS Web Fonts with @font-face

VISHAL DEEPAK
VISHAL DEEPAK
3,272 Points
Posted by VISHAL DEEPAK
VISHAL DEEPAK
3,272 Points

Using OTF font format

I checked up the resource that directed me to this site Font Squirrel – Free web fonts(http://www.fontsquirrel.com/). Most of the fonts are in the format .otf. Is it safe to use this format ? Do all browsers support this?

2 Answers

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

Hey Vishal,

I recently did one of the CSS courses and I believe that the OTF font format is a preferred font format to use.

OpenType is a format for scalable computer fonts. It was built on TrueType, and is a registered trademark of Microsoft. OpenType fonts are used commonly today on the major computer platforms.

I just found a great reference to have a look at about Web Fonts Over at W3 Schools.

I have been using the OTF format for awhile now and I haven't had any issues with using it.

Hope this helps

Stu : )

VISHAL DEEPAK
VISHAL DEEPAK
3,272 Points
VISHAL DEEPAK
VISHAL DEEPAK
3,272 Points

Thank you for the quick reply. I also noticed that when a font is downloaded we get a large number of otf files, each for differnt weight and style. Any way to add all of them at once, or should i add only those that are needed

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

You simply just add another @font-face rule:

@font-face {
    font-family: CustomFont;
    src: url('CustomFont.otf');
}

@font-face {
    font-family: CustomFont2;
    src: url('CustomFont2.otf');
}

If your second font still doesn't work, make sure you're spelling its typeface name and its file name correctly, your browser caches are behaving, your OS isn't messing around with a font of the same name, etc.

You can use Font Squirrel's Web Font Generator (www.fontsquirrel.com/tools/webfont-generator) to get all the other font types.