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

You need to link to it in your <head> or install the font in a folder on your machine — Callat
– Callat, Commented Mar 22, 2017 at 1:08
If an answer helped you, make sure to upvote and/or accept it! — Jerfov2
– Jerfov2, Commented Mar 22, 2017 at 2:25

Community · Accepted Answer · 2017-05-23 12:17:23Z

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, 2017 at 12:17

CommunityBot

11 silver badge

answered Mar 22, 2017 at 1:08

Jerfov2

5,6047 gold badges32 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

NathanielSantley · Accepted Answer · 2017-03-22 01:08:43Z

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, 2017 at 1:08

NathanielSantley

2911 silver badge17 bronze badges

1 Comment

noah Over a year ago

This answer helped me too, but I am only allowed to except one :(

Dierig Patrick · Accepted Answer · 2017-03-22 09:05:28Z

1

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

answered Mar 22, 2017 at 9:05

Dierig Patrick

3243 silver badges21 bronze badges

Collectives™ on Stack Overflow

Using Custom font in HTML/CSS

3 Answers 3

Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Linked

Related