Inline Custom CSS Fonts In HTML5

Question

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?

Answer 1

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>

Answer 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>