google fonts won't load with html

Question

I'm sure this question has been asked multiple times before. I have followed a lot of the advice, but none seems to work. I've been trying to load 'chelsea market' and caveat in my h1 line. Any help would be appreciated. Here's my code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Chelsea+Market' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Caveat' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<style>

h1 {
    font-family: ‘Chelsea Market’, Arial, sans-serif; font-size: 200px; color: rgb(0, 0, 228); 
margin-bottom: 0px; text-align: center; text-shadow: 5px 5px 10px #000000;

    }

You are using invalid quote characters in the css `‘Chelsea Market’` — Håken Lid, Feb 07 '17 at 00:07
Open chrome devtools (or firefox), click the Network tab, load the page, and check the status code and response headers for the fonts and css from google. — Håken Lid, Feb 07 '17 at 00:10
THe problem is I can't load the actual fonts for 'chelsea market'. Everything else works except that. I've tried using double quotations"" as well and that didn't work either — estelyk, Feb 07 '17 at 08:48

score 0 · Answer 1 · answered Feb 07 '17 at 03:17

0

Have you tried @import instead off the regular link to the font?

@import url('https://fonts.googleapis.com/css?family=Chelsea+Market');
font-family: 'Chelsea Market', cursive;

answered Feb 07 '17 at 03:17

COOKIE

356
4
12

Can I see the rest of your code? Your code doesn't actually have the h1 int the HTML. – COOKIE Feb 07 '17 at 23:00
yea sure, it's rather long though if you don't mind: – estelyk Feb 08 '17 at 20:47
h1 { font-family: 'chelsea market', Arial, sans-serif; font-size: 200px; color: rgb(0, 0, 228); margin-bottom: 0px; text-align: center; text-shadow: 5px 5px 10px #000000; } p { font-family: 'Caveat'; font-size: 33px; color: rgb(113, 218, 113); margin-top: 0px; margin-left: 450px; }
YALA

Let's go places..
– estelyk Feb 08 '17 at 20:54
do you have any other code? This code seems to work fine in [codepen](http://codepen.io/CookieMonsta/pen/EZdKRv). – COOKIE Feb 09 '17 at 03:08
That's it! but somehow the code does work now, not sure how. Thanks though – estelyk Feb 10 '17 at 18:42

score 0 · Answer 2 · answered Feb 07 '17 at 03:40

0

I saw there is no <body> and <h1> tag in your code. I 've just tested out by copying your code and add <body> and <h1> tag, it works fine in my Codepen here

answered Feb 07 '17 at 03:40

hoath

1
2

Hi hoath, i'm having trouble with the fonts. I want it to be in 'chelsea market' – estelyk Feb 07 '17 at 21:09
@estelyk Seems like you have a problem when using google font together with bootstrap.css. I think you have to download bootstrap and make a custom for your own instead of using bootstrap CDN. This link might help http://stackoverflow.com/questions/24075222/how-can-i-change-the-bootstrap-default-font-family-using-font-from-google – hoath Feb 08 '17 at 02:50

google fonts won't load with html

2 Answers2

YALA