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

Development Tools Introduction to Front End Performance Optimization Optimize Assets Optimize CSS

nico dev
nico dev
20,364 Points
Posted by nico dev
nico dev
20,364 Points

How do you know you're using, e.g., Changa One 400, but not the 700 you imported?

Hello everyone,

How would you know at the time of optimizing performance, which of the fonts you imported are you actually using or which ones are not there at all?

Do you have to simply search font styling tags through your CSS one by one and find out, or is there any other way for this?

Thanks in advance for your (speed) insight! :)

2 Answers

Steven Parker
Steven Parker
231,172 Points
Steven Parker
Steven Parker
231,172 Points

Don't forget about font substitution.

You mainly have to tell by appearance if the selected fonts are being used, because if the selected ones are not found it's normal for the browser to substitute another font from the same family

You can also use the dev tools console to see if there were any loading errors.

nico dev
nico dev
20,364 Points
nico dev
nico dev
20,364 Points

Thank you for your reply, Steven!

Good point, although let's put it this way (and I know it may not be an ideal practice) lets' say I messed up a little with changing my fonts many times, and I am no longer sure which ones I really used and which ones not (among those I used from Google Fonts). Let's say in my HTML head I included a lot of them, but then I changed many times from 300 to 400, to 400 italic in one place and I did likewise in other places/pages of my website.

So in the end, I want to optimize performance and remove those I did not use (among those I 'imported' from Google Fonts), is there an accurate, efficient way to find out which ones I finally ended up not using? Or do I just have to read the whole CSS file(s) and go 'checkboxing' them?

Sorry if my question is a little confusing but I was just thinking that otherwise that may be a really time consuming task. Your thoughts?

Thank you so much again!!

Steven Parker
Steven Parker
231,172 Points
Steven Parker
Steven Parker
231,172 Points

You can also use the dev tools to inspect page elements. It might be faster to inspect the text on the page that you know fonts would be applied to and make a note of those that are currently in use. Then you can remove the others from your page head.