2

So I've checked out another question being answered on this and attempted this on my own. I want to use the Lobster two font and I'm not sure what I'm doing wrong.

Here's my code:

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Cogna</title>
    <link rel="stylesheet" type="text/css" href="Home.css">
</head>
<body>
<table id="site">
    <tr>
        <td id="Cogna">Cogna</td>
        <td style="border: 2px solid black; border-collapse: collapse;">a</td>
    </tr>
    <tr>
        <td style="border: 2px solid black; border-collapse: collapse;">a</td>
        <td style="border: 2px solid black; border-collapse: collapse;">a</td>
    </tr>
</table>
</body>
</html>

CSS:

@font-face {
    font-family: 'Lobster Two';
    src: url("//fonts.googleapis.com/css?family=Lobster+Two");
}

#Cogna {
    font-family: 'Lobster Two', Times, serif;
    font-size: 5em;
    border: 2px solid black; border-collapse: collapse;
    padding: 18pt;
    width: 20%
}

#site {
    border-collapse: collapse;
    width: 100%;
}

I know I've asked it to replace with Times New Roman if it can't find the font, but I really want to use the font.

Any help would be great. Thanks.

Edit: this is the exact link to the font: https://fonts.google.com/specimen/Lobster+Two.

Osama Kawish
  • 312
  • 1
  • 5
  • 15
  • You sure that's the correct URL? You're missing an essential part. – chazsolo Aug 08 '17 at 15:37
  • @chazsolo I am a bit new to CSS and kind of mixed the link I got here: http://www.cssfontstack.com/Lobster-Two, to my CSS. – Osama Kawish Aug 08 '17 at 15:39
  • Please take a look at Google's excellent developer documentation on adding custom fonts. Very well written and easy to follow. https://developers.google.com/fonts/docs/getting_started – Adrianopolis Aug 08 '17 at 15:53
  • Please if you are just learning don't learn to code using tables. Tables are not made for page layouts. http://www.beginnersguidetohtml.com/guides/css/layout/div-tags – Adam Aug 08 '17 at 16:09

7 Answers7

2

Referencing a link to the font is fine, but downloading the font is preferable. I did mine according to this answer.

  1. Go to https://google-webfonts-helper.herokuapp.com/fonts
  2. Pick the font(s) you want and download the files

  3. Drop in the generated CSS from the page, and reference the CSS file in your HTML like so:

    <link rel="stylesheet" href="path/to/styles.css">
McGlothlin
  • 2,059
  • 1
  • 15
  • 28
1

2 Method in order to add Google font :

Standard :

Add this in the head of your html file <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lobster">

CSS:

Apply the family to which ever elements you choose in your style.css file such as:

h1 {
    font-family: 'Lobster', cursive;
}
Adrianopolis
  • 1,272
  • 1
  • 11
  • 15
Rémy Testa
  • 897
  • 1
  • 11
  • 24
1

Google is friendly enough to give you a step by step guide on how to use their fonts.

enter image description here

More details on their wiki

Ivan
  • 34,531
  • 8
  • 55
  • 100
0

I think you need to change this src: url("//fonts.googleapis.com/css?family=Lobster+Two"); into thissrc: url("http://fonts.googleapis.com/css?family=Lobster+Two");

North-Wind
  • 156
  • 1
  • 12
0

Try including the font using this:

@import url('https://fonts.googleapis.com/css?family=Lobster+Two');

instead of 

@font-face {
font-family: 'Lobster Two';
src: url("//fonts.googleapis.com/css?family=Lobster+Two");
}
VanessaJossi
  • 1
0
use this in your html file: <link href="https://fonts.googleapis.com/css? family=Lobster+Two" rel="stylesheet">

add this in your css where you want to apply the font there

font-family: 'Lobster Two', cursive;

try this .. good luck :)

Jok3r
  • 454
  • 3
  • 9
0

In the style sheet use

@import url('https://fonts.googleapis.com/css?family=Lobster+Two');

Then where you want to apply the font: 

font-family: 'Lobster Two', cursive;
Alan Simpson
  • 447
  • 5
  • 5