1

Google fonts were working perfectly till I imported the W3.css file. I even tried to shift the google fonts link to the beginning of the document. It starts working as soon as I remove the link to W3.css file. Google fonts working:

<head>
<link href="https://fonts.googleapis.com/css?family=Concert+One"rel="stylesheet">
</head>

Google fonts not working:

<head>
<link href="https://fonts.googleapis.com/css?family=Concert+One"rel="stylesheet">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
Vinay Pillutla
  • 11
  • 1
  • remember to do some debugging: right click on an element you know should be using your Google font, select "inspect element", and then in the CSS section look at which rules are being applied on top of each other, from which file. You can find the answer here all on your own with a bit of proper investigating. – Mike 'Pomax' Kamermans Apr 15 '17 at 18:57

1 Answers1

1

you just need to declare the google font you are using in the element you want.

body {
  font-size: 30px !important
}

.gf {
  font-family: "Concert one"
}
<link href="https://fonts.googleapis.com/css?family=Concert+One" rel="stylesheet">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<div class="gf">test</div>
<div class="w3">test 2</div>
dippas
  • 58,591
  • 15
  • 114
  • 126