Jordan Baron Jordan Baron - 3 months ago 15
CSS Question

Custom font doesn't work with Bootstrap

I am trying to add a custom font in CSS but it does not work.

My HTML:

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8">
<title>Shout!</title>
<meta name="author" content="Jordan Baron">

<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div>
<img src=images/logo.png alt="logo" height="54" wdth="133" class="logo">
<hr class="divider">
<h1 id="wis">Shout!</h1>
</div>
<script src="scripts.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script>
</body>
</html>


My CSS:

@font-face {
font-family: SanFran;
src: url(SF-UI-Display-Thin.otf);
}

div {
text-align: center;
}

.divider {
margin: 0;
padding: 5px;
}

.logo {
margin: 0;
padding: 5px;
}

.wis {
font-family: SanFran;
}


I am using Bootstrap 3 on Mac OS X. I am using Chrome.
The font changes when I don't use Bootstrap but when I do use Bootstrap the font doesn't change

Answer

It won't change because you're using an ID on your <h1> but you're trying to target a class of .wis instead of an ID of #wis.

Try changing

.wis {
  font-family: SanFran;
}

to

#wis {
  font-family: SanFran;
}
Comments