Using custom fonts on a website

by danielkwood

HTML

<html>
    <head>
        <title>Font-face rule example</title>
        <link rel="stylesheet" href="theme.css" type="text/css"/>
        <link href="https://fonts.googleapis.com/css?family=Baloo+2|Roboto&display=swap" rel="stylesheet">
    </head>
    <body>
        <h1>This is a heading.</h1>
        <p>This is a paragraph.</p>
    </body>
</html>

CSS

@font-face{
    font-family: Blackbird;
    src: url(fonts/Blackbird.ttf);
}
h1{
    font-family: 'Baloo 2', cursive;
}
p{
    font-family: 'Roboto', sans-serif;
}