Using Custom font in HTML/CSS

Question

I am using the Atom editor with my Mac and have a problem. I need to put the "Typogrotesk" font in my website. I have been trying to do this for a while, but have had no luck. I have tried using this as my CSS code, but no luck:

h1 {
font-family: "Typogrotesk";
font-size: 300%;
color: white

Answer 1

Make a font face:

@font-face {
    font-family: 'Typogrotesk'; /*a name to be used later*/
    src: url('TheURLToTheFontFile'); /*URL to font*/
}

Then to use it in your css styling:

.example {
    font-family: 'Typogrotesk';
}

Credit: @Chris at this link

Answer 2

This should work:

@font-face {
    font-family: "Typogrotesk";
    src: url(yourfontfile);
}

Put this in your CSS to import the font. You should be able to use the font elsewhere.

If that doesn't work, you may need to try yourfontfile in single or double quotes.

Answer 3

Download it here: http://www.dafont.com/de/typo-grotesk.font

Upload it to a folder on your webspace. For example: "styles/fonts"

On the top of your style.css you add the following code:

@font-face {
    font-family: "Typogrotesk";
    src: url(fonts/typogrotesk.ttf);
}

After that you define it for a single element

.yourclass {
font-family: 'Typogrotesk';
}

or you define it for all elements

* {
font-family: 'Typogrotesk';
}