Setting Barlow as CSS font in my stylesheet-CodePudding

I wan to set Barlow and Fraunces in my CSS. But every time i try to import and use that font family, there doesn't seem to be any changes and font still seems to be Times New Roman.

I tried this

@import url(https://fonts.google.com/specimen/Barlow);
body{
    font-family: 'Barlow';
}

CodePudding user response：

That's because you have to include your font-weight and font-style properties in your CSS code:

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;700&display=swap');

body{
    font-family: 'Barlow', sans-serif;
    font-weight: 400;
    font-style: normal;
}

CodePudding user response：

You can try this

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow:wght@100&display=swap" rel="stylesheet">


<style>
body { 
  font-family: 'Barlow', sans-serif;
}
</style>