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

JavaScript Treehouse Club - MASH MASH - CSS Changing Stuff in Your Style Sheet

Posted by nicolasvanbylen
nicolasvanbylen
2,336 Points

Difference between changing your font in .HTML and .CSS (linking fonts) VS. Web Safe Fonts in .CSS

Hi there

I was wondering why you have the possibility to change your font in CSS only. Because when you use e.g. Google Fonts, get the link and paste it in both HTML and CSS, you have your desired font. But when you change your font in CSS, you can only choose a 'web safe font'. This does not make a lot of sense to me. I would think everyone would always opt for the Google Fonts function. So why would you want to use the Web Safe Font in CSS only?

I hope my questions is clear.

Thank you!

2 Answers

stjarnan
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
stjarnan
Front End Web Development Techdegree Graduate 56,488 Points
stjarnan
.a{fill-rule:evenodd;}techdegree seal-36
stjarnan
Front End Web Development Techdegree Graduate 56,488 Points

Hi Nicolas!

Opting for these awesome Google fonts, you can end up with some really nice looking fonts that fits perfectly with your design. However, have you noticed how they (Google fonts) always provide you with something like this in how to implement your Google font: 

font-family: 'Open Sans', sans-serif;

This is because it is possible that a person browsing your site does not have the Open Sans font downloaded, that person's browser will then follow the link provided in your HTML to go download your font. But there is always the possibility of errors, an example could be if Google fonts is down for maintenance. If that happens the font used will be the second one in your list, sans-serif which is 'web safe'.

Sometimes you do not even need anything else than web safe fonts for your projects, as there is some great looking web safe fonts out there.

And lastly, many font downloads would slow your site down if the users have to download a lot of fonts. So only using Google fonts could end up with a performance hit on your site.

I hope that helps, please let me know if you have any other questions.

Jonas

nicolasvanbylen
nicolasvanbylen
2,336 Points
nicolasvanbylen
nicolasvanbylen
2,336 Points

Hi Jonas

Thank you soooo much for your fast response and clear answer! That all makes a lot sense.

Nicolas