Google Chrome won't load two CSS files

Question

I just started creating a personal website for me, then I came across a problem. As soon as I include two stylesheets, the second stylesheet doesn't load (doesn't render). My first stylesheet that does load (does render) looks like this:

@font-face {
    font-family: 'archive';
    src: url('archive-webfont.eot');
    src: url('archive-webfont.eot?#iefix') format('embedded-opentype'),
         url('archive-webfont.woff2') format('woff2'),
         url('archive-webfont.woff') format('woff'),
         url('archive-webfont.ttf') format('truetype'),
         url('archive-webfont.svg#archive') format('svg');
    font-weight: normal;
    font-style: normal;
}

The second stylesheet that doesn't load (doesn't render) looks like this:

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    color: #FFFFFF;
    background: #333333;
}

h1 {
    margin: 0;
    font-family: archive;
}

My HTML looks like this:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Jacques Marais</title>

        <link rel="stylesheet" href="fonts/archive.css" title="Archive Font CSS" />
        <link rel="stylesheet" href="css/master.css" title="Master CSS" />
    </head>
    <body>
        <h1><span class="first-character">J</span>acques Marais</h1>
    </body>
</html>

When I look at the Resources panel in the Developer Tools, it shows both stylesheets, but when I look at the Sources panel, it only shows that one loaded:

Sources

Resources

I tried all methods mentioned here and here.

Update

Here are the Network and Console panes.

Update 2

Update 3

@Trix Nope, none. The stylesheets I included in the question contains all code that I used. — Jacques Marais, Dec 25 '15 at 12:14
any lines starting with `@`, although I can see one, the font-face. any others? — Peyman Mohamadpour, Dec 25 '15 at 12:15
would u please provide screenshot of network and console tabs? — Peyman Mohamadpour, Dec 25 '15 at 12:19
Plase Audit the present state, using the Audit tab and let me see the results — Peyman Mohamadpour, Dec 25 '15 at 12:32
Have you checked whether the DOM really contains the link tag? Whatever this inject.js does it might have removed it for whatever reason — Aurus, Dec 25 '15 at 12:33
u may debug ur webpage loading experience using Chrome Inspector. while open, press `Ctrl + P` to start the debugger — Peyman Mohamadpour, Dec 25 '15 at 14:52
@Trix `Ctrl + P` opens the Sources panel to search for a file. — Jacques Marais, Dec 25 '15 at 14:53
@Trix Thanks for all your help. It seems like the `title` attributes were causing the problem. — Jacques Marais, Dec 25 '15 at 15:10
As an aside, you may want to look up the CSS `::first-letter` pseudo-element. — Mr Lister, Dec 30 '15 at 08:07

score 2 · Accepted Answer · edited Dec 30 '15 at 08:05

Try this:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Jacques Marais</title>

        <link rel="stylesheet" href="fonts/archive.css" />
        <link rel="stylesheet" href="css/master.css" />
    </head>
    <body>
        <h1><span class="first-character">J</span>acques Marais</h1>
    </body>
</html>

I just deleted the title attribute inside your link tag and it works. (I've tested it on my webserver)

No title attribute inside <link> tag.

http://www.w3schools.com/tags/tag_link.asp

Ops, never mind, it supports global attribute (included title), anyway if you delete them the page works... I've noticed also it works if you leave title attributes but without spaces inside them. Try to change your titles and delete all the spaces.

score -1 · Answer 2 · answered Dec 25 '15 at 13:51

-1

I am not sure is it really work or not. I have faced this same problem and found solution. At the second stylesheet do like this -

h1 {
    margin: 0;
    font-family: 'archive'; /* add your font-family name inside '' */ 
}

answered Dec 25 '15 at 13:51

Sajeeb Ahamed

6,070
2
21
30

Nope, doesn't work. Thank you for the suggestion though. – Jacques Marais Dec 25 '15 at 14:47

Google Chrome won't load two CSS files

2 Answers2