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

Brandon Spangler
Brandon Spangler
8,756 Points
Posted by Brandon Spangler
Brandon Spangler
8,756 Points

Is it okay to put the font link tag linking to the font styles under the link tag linking to the css?

Is something like this okay?

<link rel="stylesheet" href="css/all.css">
<link href="https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,800" rel="stylesheet">

I had it the other way around like Nick, but I was getting negative feedback from the PageSpeed tools site. I was getting a response like this:

Eliminate render-blocking JavaScript and CSS in above-the-fold content

Your page has 1 blocking CSS resources. This causes a delay in rendering your page. None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.

Optimize CSS Delivery of the following: https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,800

When I switched the place of the two tags as shown above, I received a way better score

Moderator Edit: Changed topic of Discussion for the thread to better reflect the context

1 Answer

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,860 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,860 Points

HI Brandon,

While I can't answer the 'warning` you are getting, I would say that it should be done the way Nick has it. With the way you changed it to, your main Stylesheet is going to load, which use those fonts, before those fonts are even loaded. This is more than likely going to cause some problems with the rendering of the page as the Fonts may not be loaded before the CSS styles the page.
This would be pretty much the equivalent to loading a jQuery plugin before loading jQuery... it's most likely just not going to work.

I personally haven't put much stock in those Speed check or HTML or CSS checkers. While they can provided some valuable feedback and suggestions, they can (and often do) offer some non-sensical errors and some just plain erroneous suggestions. If you want an example of this, run that same font line through an HTML checker... it will actually error because the checker does not recognize the pipe symbol.

Hope that helps. :) :dizzy: