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.
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.