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

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

Front End Web Development Techdegree Graduate 56,484 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.


Hi Jonas

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