Part 5. More Fonts


#1



In my code, I link to the "style.css" first then the two Google Fonts. And in the rendering browser, the Google Fonts were used!

I'm a little bit surprised and want to confirm that is it true that the order of reference doesn't really matter in CSS? I expected this would only work if I link to the Google Fonts first and used it later in the style.css file.


<head>
    <title>The Rise of Soccer in The US</title>
    <link href="style.css" type="text/css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Roboto:100" type='text/css' rel='stylesheet' />
    <link href="https://fonts.googleapis.com/css?family=Playfair+Display" type='text/css' rel='stylesheet' />
</head>


#2

The order in which the style sheets load is the precedence order in the cascade. What you're witnessing is the style sheets loading before the body content. The fonts will apply since the main style sheet didn't get parsed into the DOM until after the content was loaded.

Ideally, the main styles should load last, just in case the DOM is ready before the fonts finish downloading. The main sheet will be last to load so the fonts will be present.


#5

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.