Webpage will not render specified font

0
votes

I am having an issue with the webpage because the browser keeps rendering its own font, Open Sans, below is what the chrome inspector shows:

    font-family: 'Open Sans', 'sans-serif';

The browser keeps rendering its own font, Open Sans, below is what the chrome inspector shows. I am specifying in the external stylesheet to render Roboto:

  body {
      height:100%;
      margin: 0;
      font-family: 'Roboto', sans-serif;
      background-color: #FFF;
  }

I am importing the font as the google font docs requires

<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

Inspecting the page its still:

font-family: 'Open Sans', 'sans-serif';

Same issue in different browsers. I have cleared the cache, tried different fonts such as 'Arial', tried different browsers.

2
cssbrowserfonts

2 Answers

1
votes

Welcome to Stack Overflow

You should try putting the @import of Roboto font in your CSS file and removing the link version from your HTML _

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

Hopefully this will solve your problem

0
votes

Make sure your CSS file that has Roboto font is the last one rendered in your browser. Or just try this:

html, body { font-family: 'Roboto', sans-serif; !important;}