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

Ryan Jaccard
Ryan Jaccard
2,504 Points
Posted by Ryan Jaccard
Ryan Jaccard
2,504 Points

Do you link GoogleFonts on EVERY html page, or can you save time by incorporating these href links into the stylesheet?

Since most websites will use a consistent set of fonts across pages, I would've thought that these web font href links could be built into the CSS style sheet, instead of having to re-paste the web font link into every HTML page. Is this an option that's introduced later?

1 Answer

andren
andren
28,558 Points
andren
andren
28,558 Points

You can embed the font CSS into your own using an @import statement at the top of your CSS file. Like this for example:

@import url('https://fonts.googleapis.com/css?family=Roboto');

However doing so can slow down your page load.

The reason for this is that when you use @import your browser will download and process the font CSS first and then process your CSS. When you use separate link elements for the font and for your own CSS on the other hand the browser will download and process both of the CSS files concurrently. Meaning that it does not wait for one before it starts working on the other.

Processing the CSS concurrently speeds up loading and rendering of the page, and due to this use of the @import statement is generally discouraged nowadays. So it's a trade off between convenience and speed. If including the font link on all of your pages is a large inconvenience for you then it might be worth a small processing delay to just use @import.

Ryan Jaccard
Ryan Jaccard
2,504 Points
Ryan Jaccard
Ryan Jaccard
2,504 Points

Ah, this makes perfect sense. I hadn't understood the font link as being an additional CSS that lives alongside mine. Thank you, Andren!