CODEWITHSUNDEEP
htmlcssfonts
Arsha Kiani
Arsha Kiani

Reputation: 45

How do I install a custom font on my html site

I'm having trouble using the font Cg Omega on my website.

Here is my HTML:

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="font.css">
    <style type="text/css">
    /* when @font-face is defined(it is in font.css) you can add the font to any rule by using font-family */
    h1 {
        font-family: 'cgomeg';
    }
    </style>
</head>
<body>
    <h1>Lorem Ipsum</h1>
    <p class="the-font">Lorem ipsum dolor sit amet</p>

And this is my CSS:

@font-face {
font-family: 'cgomeg';
src: local('cgomeg'), url('cgomeg.ttf') format('truetype');
}


/* use this class to attach this font to any element i.e. 
<p class="the-font">Text with this font applied</p> */
.the-font {
font-family: 'cgomeg' !important;
}

All the code seems right, and all the files are in the correct location, I triple checked. I also used a different font, which I found on FontsForWeb.com, and that one worked, but this one didn't. I really have no idea what I'm doing wrong, I need an expert advice!

Thanks!

Upvotes: 2

Views: 123

Answers (1)

Skatox
Skatox

Reputation: 4284

First, you should use the !important, it will make hard to heritage classes and do child rules, so the css rule should be:

.the-font {
   font-family: 'cgomeg';
}

Also, when you define the font, the name doesn't have any dash, so when you apply it to the h1 should be:

h1 {
    font-family: 'cgomeg';
}

Note: I asume that the font is located at the same folder as the .css stylesheet.

Upvotes: 1

Related Questions