Question

I'm just getting back into webdev as I want to make a simple web page. I'm starting with Bootstrap and building my page around that. I want to be able to change the font family of my header but it's not working. Code below.

<link href="https://fonts.googleapis.com/css?family=Chewy" rel="stylesheet" type="text/css">  

<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<title>BOOST YOUR CONFIDENCE</title>

<section class="sectionone">

    <h1 class="display-1">Confidence Boost</h1>

</section>

<section class="sectiontwo">

    <h2 class="display-4">
        We all need a confidence boost sometimes, click below!
    </h2>

</section>

Answer 1

Your CSS works fine for me; the only thing I noticed is that you missed the "." class identifier in the name of the css class, like so:

.display-1 {
    font-family: 'Chewy', cursive;
}

Here's a fiddle:

https://jsfiddle.net/w4z1fqpz/

Answer 2

Ok, so as discussed in the comments, you need to reference your custom style sheet. Make sure it falls after bootstrap so it overrides correctly.

<link href="https://fonts.googleapis.com/css?family=Chewy" rel="stylesheet" type="text/css">  
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="Vendors/bootstrap-grid.css" rel="stylesheet">

<title>BOOST YOUR CONFIDENCE</title>

And as pointed out above, make sure your class in your stylesheet starts with a dot.

Google Font Family wont change

2 个答案: