-1

I have imported some fonts in my CSS file. But it's not working in the design.

Here is the code for the fonts I have imported and CSS linking.

enter image description here

And here is the output where only sans-sarif is working.

enter image description here

I removed the VPN. There is no error in my console now. However, the font-family issue is still there.

enter image description here

Anyone knows what is the issue?

Hossain
  • 17
  • 9
  • Read this (Same issue): https://stackoverflow.com/questions/70130216/embedding-a-font-into-css-but-the-font-does-not-show-up-in-html-file/70131396#70131396 – Ezra Siton Nov 30 '21 at 13:31
  • 4
    As a side note and to see if it changes anything. You do not usually need to call Googlefonts more than once. Multiple fonts can be used from one line of code like this for the Roboto and Roboto-Condensed fonts. `@import url('https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed');` – Cutey from Cute Code Nov 30 '21 at 13:32
  • not sure what the css2 does, but if i call opun the `https://fonts.googleapis.com/css?family=Poppins` in the browser, i get a nice stylesheet command back. i know it doesnt like spaces in between, not sure if you have a space in it. – Dorvalla Nov 30 '21 at 13:42
  • This is the error I am getting in the console. "Unchecked runtime.lastError: The message port closed before a response was received." Any idea how may I fix it? – Hossain Nov 30 '21 at 13:59
  • I’m voting to close this question because no meaning / value for other users ( some specific styling issue solved after some days by the person who ask the question ). – Ezra Siton Dec 04 '21 at 04:44

3 Answers3

0

On a side note, and this works for me, since i use Poppins too.

My @importline is as following

    @import url('https://fonts.googleapis.com/css?family=Oxanium:400,500,600,700,800|Poppins:400,400i,500,500i,600,600i,700,700i&display=swap');

    body {
        font-family: 'Poppins', sans-serif;
    }
    
     h1 {
        font-family: 'Oxanium', cursive;
    }
<h1> test </h1>
<p> Lets run with this poppins </p>

Maybe your problem is that you havent called a specific Poppins font so it has no clue which strength it has to follow.

Dorvalla
  • 5,027
  • 4
  • 28
  • 45
  • Thank you. I tried your import as well and it doesn't work either. There is an error in the console which is "Unchecked runtime.lastError: The message port closed before a response was received." Do you know how may I fix that? – Hossain Nov 30 '21 at 13:58
  • What framework you using, cause this is not an error that corresponds with css. If you are running none, maybe its one of your chrome extensions? Try deactivating them. Try running your application in a blank browser. https://stackoverflow.com/questions/54126343/how-to-fix-unchecked-runtime-lasterror-the-message-port-closed-before-a-respon – Dorvalla Nov 30 '21 at 14:03
  • I am not using any framework. This is just raw HTML/CSS. I am using this machine for more than 2 years to write codes and this is the first time it's happening to me. There are more than 30 extensions. I enabled and disabled all of them. Still not working. I have tried it with my firefox browser as well which barely has any extenstion. Not sure what is the issue here. – Hossain Nov 30 '21 at 14:16
  • Update your question with a screendump of your error, to what file does it link too? – Dorvalla Nov 30 '21 at 14:24
  • I have added the screenshot to the post, please check. It links to the HTML file. – Hossain Nov 30 '21 at 14:27
  • @Hossain https://www.codegrepper.com/code-examples/c/53+Unchecked+runtime.lastError%3A+The+message+port+closed+before+a+response+was+received. are you behind a VPN? – Dorvalla Nov 30 '21 at 14:30
  • I was, and I removed the VPN. There is no error in my console now. However, the font-family issue is still there. Tried to stop all the extensions as you suggested in the example. Didn't work for me – Hossain Nov 30 '21 at 15:56
0

I would suggest to use exactly the code that Google provides at its site for importing two font families, i.e. not with two different @import lines, but with one that contains both font families in the following way (i.e. using &family to add the second font family):

@import url('https://fonts.googleapis.com/css2?family=Poppins&family=Comforter&display=swap');
Johannes
  • 64,305
  • 18
  • 73
  • 130
  • Thanks. But I already did all of these. There are two different ways to use google fonts. One is link and another one is import. The link option is working fine. However, the import is not working at all. – Hossain Nov 30 '21 at 16:24
  • Yes, but the code for the *import* option for *two* font families (on the google site) contains both fonts in one line, the way I wrote it above. – Johannes Nov 30 '21 at 16:28
  • I tried with only one font but didn't work. I tried your procedure as well (copied your code and pasted it). It didn't work either. – Hossain Nov 30 '21 at 16:47
0

It was a silly mistake from my end. I should import the fonts at the beginning of the CSS file. But I imported it after writing some CSS.

This is how I wrote the code before.

enter image description here

This is how I imported the fonts now.

enter image description here

Extremely sorry for all the trouble guys. Appreciate your efforts and help.

Hossain
  • 17
  • 9