Angular Application hosted on Firebase not importing css files

Question

Pretty self-explanatory. I'm trying to import css files into my angular app (stuff like material icons and google fonts). I've added the import statements to the styles.css (global styles file).

For some reason when it is hosted on firebase the css files are not being imported. I'm completely stumped at this point. My code is below:

@import url(https://fonts.googleapis.com/css?family=Lobster&display=swap);
@import url(https://fonts.googleapis.com/css?family=Nunito&display=swap);
@import url(https://fonts.googleapis.com/css?family=Coming+Soon&display=swap);
@import url(https://fonts.googleapis.com/css?family=Chilanka&display=swap);

i {
  color: #2b2b26;
  margin-right: 1vw;
  margin-left: 1vw;
}

i:hover {
  color: #f58a18;
}

.icon-container {
  text-align: center;
}

Let me know if you want to see any other files. Also, it displays correctly when served.

Ares · Accepted Answer · 2019-11-11 17:59:32Z

1

To build upon @saidutt 's answer, to import those CDN's you should link them in the head section of your index.html file.

Like so:

<head>
  <!-- your other metadata... -->

  <link href="https://fonts.googleapis.com/css?family=Lobster&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Nunito&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Coming+Soon&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Chilanka&display=swap" rel="stylesheet">

</head>

An alternative would be to download those CSS files to your project folder and include them in your stylesheets array of your angular.json file:

  "styles": [
          "src/googleapis1.css",
          "src/googleapis2.css",
          "src/googleapis3.css",
          "src/googleapis4.css"
        ],

... but personally I think CDN's are fine.

edited Nov 11, 2019 at 17:59

answered Nov 1, 2019 at 19:49

Ares

4418 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

iQuain Over a year ago

Thanks a million. I added them to the head section and it all works awesome now!

Ares Over a year ago

You're welcome! Please select my answer if you found it helpful. :)

saidutt · Accepted Answer · 2019-11-01 19:19:47Z

0

So, you are preferring to use CDN's. Look into your networks tab in the browser if the files are even being recorded and loaded. If not try these: import them into your index.html file.

or

include them under the styles array in angular.json file

answered Nov 1, 2019 at 19:19

saidutt

2891 silver badge7 bronze badges

Collectives™ on Stack Overflow

Angular Application hosted on Firebase not importing css files

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related