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 Abigail Furlow
Abigail Furlow
2,333 Points

Some fonts I tried in Workspaces won't display correctly in the Preview.

I've tried changing the font to a couple of different fonts off listed on the Websafe Fonts page. Some of them work, but some of them don't. For example, Avant Garde & Futura did NOT work. They were replaced with Times New Roman. However, Impact, Century Gothic, and obviously Helvetica and Arial do work.

If these are all "websafe" fonts, why do some of them display and others don't? Futura is very similar to Centuryt Gothic in styling and yet it didn't work. I don't really mind. I just wonder how Workspaces or the browser is choosing which fonts to display and which ones it won't.

If it helps, I am using Firefox 44.0.2.

grahammowat2
grahammowat2
6,038 Points

I would need to see some code. It may be a case that certain fonts are overriding others or maybe you have misspelled something can't be sure without some code.

2 Answers

Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

Hi Abigail,

If you specify fonts in a font-family declaration without also including links to those fonts (through a CDN or locally), the browser can only use whatever fonts you have in your system. It will try each in order until it finds one it has, and then finally fall back to the browser's default font if it can't find any of those. Websafe fonts are fonts that are normally pretty consistent across computers, but not guaranteed, so if you need a specific font for your design, it's always best to link it in your CSS.

Abigail Furlow
Abigail Furlow
2,333 Points
Abigail Furlow
Abigail Furlow
2,333 Points

Thanks a lot. I looked and the 2 fonts I tried that didn't work, are fonts I don't have installed on my computer so that must have been why it didn't display.