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

Possible duplicate of [Using custom fonts using CSS?](http://stackoverflow.com/questions/12144000/using-custom-fonts-using-css) — Jerfov2, Mar 22 '17 at 01:04
You need to link to it in your `` or install the font in a folder on your machine — Callat, Mar 22 '17 at 01:08
If an answer helped you, make sure to upvote and/or accept it! — Jerfov2, Mar 22 '17 at 02:25

score 3 · Accepted Answer · edited May 23 '17 at 12:17

3

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

edited May 23 '17 at 12:17

Community

1
1

answered Mar 22 '17 at 01:08

Jerfov2

5,264
5
30
52

score 2 · Answer 2 · answered Mar 22 '17 at 01:08

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.

answered Mar 22 '17 at 01:08

NathanielSantley

299
1
16

This answer helped me too, but I am only allowed to except one :( – noah Mar 22 '17 at 02:44

score 0 · Answer 3 · answered Mar 22 '17 at 09:05

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

Using Custom font in HTML/CSS

3 Answers3