8

I am trying to use a custom font in a webpage. I however know next to nothing about HTML5 and CSS. I want 1 h1 tag to have a custom font. I have the .ttf file in the same folder as the webpage. I tried this with no success:

<h1 style="text-align: center"; font-family="MinecrafterReg.ttf">Welcome to Ben's Minecraft</h1>

Could anyone else help me?

Sua Morales
  • 894
  • 10
  • 21
Ben Ackerley
  • 171
  • 1
  • 1
  • 5

4 Answers4

9

Stick this in the style tags:

@font-face {
font-family: MinecrafterReg;
src: url(MinecrafterReg.ttf);
font-weight:400;

Then stick this in the h1 tag: 

<h1 style="text-align: center; font-family: MinecrafterReg">Welcome to Ben's Minecraft</h1>
Enamul Hassan
  • 5,266
  • 23
  • 39
  • 56
Ben Ackerley
  • 171
  • 1
  • 1
  • 5
2

Nowadays you can place an @import at the top of your style block:

<style>
  @import url('https://fonts.googleapis.com/css?family=Roboto');
</style>
James Gentes
  • 7,528
  • 7
  • 44
  • 64
-3

This is not how you should use a custom font on a website. First, you should use an external style sheet and have all your CSS in that. Using inline styles is not a great practice. Second, I do not think you can link to a .ttf file as you want. Notice also that your code had wrong inline format. font-family: not =. Also, the whole inline style needs to be in quotes. style="text-align: center; font-family: 'Sigmar One', cursive;"

That being said - you could link your font in your 'head' of your document and then use inline styles to style h1. Here is a way to do it with a google font. Hope this helps!

<head>
<link href='https://fonts.googleapis.com/css?family=Sigmar+One' rel='stylesheet' type='text/css'>
</head>

<h1 style="text-align: center; font-family: 'Sigmar One', cursive;">Welcome to Ben's Minecraft</h1>
Andhi Irawan
  • 456
  • 8
  • 15
Mike
  • 45
  • 1
  • 1
  • 8
-5

font-family:url('https://s3-xxxxxxxxxxxxxx/fonts/FloydsnirLTStd-Rmands.otf'); in Inline style css

Luqman
  • 1