CODEWITHSUNDEEP
htmlcsscustom-font
Osama Kawish
Osama Kawish

Reputation: 390

Not sure how to apply custom fonts in HTML/CSS

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.

Upvotes: 2

Views: 298

Answers (7)

Alan Simpson
Alan Simpson

Reputation: 463

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;

Upvotes: 0

R&#233;my Testa
R&#233;my Testa

Reputation: 897

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;
}

Upvotes: 1

McGlothlin
McGlothlin

Reputation: 2099

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">

Upvotes: 2

Ivan
Ivan

Reputation: 40768

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

Upvotes: 1

Jok3r
Jok3r

Reputation: 496

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 :)

Upvotes: 0

VanessaJossi
VanessaJossi

Reputation: 1

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");
}

Upvotes: 0

North-Wind
North-Wind

Reputation: 156

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");

Upvotes: 0

Related Questions