CODEWITHSUNDEEP
cssfont-face
Robdll
Robdll

Reputation: 6255

How to use a font ttf on CodePen

I'm new to the CSS world, and i'm practicing on codepen.io

I'd like to add a certain font to my Pen. I downloaded it from a webSite, then tried to upload it on github and use the link to that file, but it doesn't work >,<

you can find the code here: http://codepen.io/Koop4/pen/mVaOLG

or read the following:

<body>
  <h1>Hello World</h1>
</div>
</body>

html,
body {
  height: 100%;
  background-image: linear-gradient(to bottom, #0B88FF, #95EEFF);
}

@font-face {
  font-family: 'superMario';
  src: url('https://github.com/koop4/FreeCodeCamp/blob/master/portfolio/font/prstart.ttf');
}

h1,
h2,
h3 {
  font-family: 'superMario'
}

thx in advance!

Upvotes: 3

Views: 2866

Answers (1)

Mohammad Mehrabi
Mohammad Mehrabi

Reputation: 340

Because the URL of the .ttf file is a page not a file path. You must use the direct link of the font file. Use this:

@font-face {
  font-family: 'superMario';
  src: url('https://raw.githubusercontent.com/koop4/FreeCodeCamp/master/portfolio/font/prstart.ttf');
}

If doesn't work you must upload the font file in other hosts then use it.

Upvotes: 4

Related Questions