0

I am using @font-face to define a font family in my CSS style sheet. When I then try to set the font family attribute, I am not able to get the new font to display on my HTML page.

@font-face {
    font-family: 'Goudy Trajan Regular';
    font-style: normal;
    font-weight: 400;
    src: local('Goudy Trajan Regular'), local('GoudyTrajan-Regular'),
        url(http://allfont.net/cache/fonts/goudy-trajan-regular_9c60d369eeef3d3ea1e3ddaa07f3e15f.woff) format('woff'),
        url(http://allfont.net/cache/fonts/goudy-trajan-regular_9c60d369eeef3d3ea1e3ddaa07f3e15f.ttf) format('truetype');
}
html, body
{
    height: 95%;
    width: 90%;
    font-family: 'Goudy Trajan Regular', arial;
}

Update: I've stripped everything out and it still is not working. Here is my complete CSS -

@font-face {
    font-family: 'Goudy Trajan Regular';
    font-style: normal;
    font-weight: 400;
    src: local('☺'),
        url(http://allfont.net/cache/fonts/goudy-trajan-regular_9c60d369eeef3d3ea1e3ddaa07f3e15f.woff) format('woff'),
        url(http://allfont.net/cache/fonts/goudy-trajan-regular_9c60d369eeef3d3ea1e3ddaa07f3e15f.ttf) format('truetype');
}
body
{
    font-family: 'Goudy Trajan Regular', arial;
}

Here is my complete HTML -

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="css/style2.css">
</head>
<body>
    <h1>TESTING A NEW FONT</h1>
</body>
</html>
Steve Just
  • 33
  • 7
  • Your usage appears to be correct. Have you ensured that there are no other rules overwriting the font? If you inspect the `` tag, do you see the style there? – Obsidian Age Apr 07 '19 at 22:25
  • Check out Paul Irish’s revised bulletproof font-face syntax. Apparently there can be issues with local declarations, so he advises you explicitly reference an impossible name and stick to the hosted files. https://stackoverflow.com/a/3698361/2953245 – denmch Apr 07 '19 at 22:31

0 Answers0