Importing Custom Fonts (CSS)

Hello, I'm trying to import a custom font for my project.

@font-face {
    font-family: 'Hometown';
    src: url('assets/fonts/Hometown.ttf') format('ttf');
}

@font-face {
    font-family: 'Hometown';
    src: url('assets/fonts/Hometown.ttf') format('ttf');
}

This currently works, but when I switch to an '.otf' file, the font doesn't import. Does anyone know how to fix this?

7 Replies

Matt•11mo ago

For reference, the font comes with these docs:

Matt•11mo ago

Matt•11mo ago

I've imported these files as well and referenced font-family: 'the_hometownregular', but still no fix.

b1mind•11mo ago

https://joyofcode.xyz/using-fonts-on-the-web

Joy Of Code

Best Practices When Using Fonts

Everything I know about best practices when using fonts on the web.

b1mind•11mo ago

that second screen shot I think the name should still be the name font-family: 'Hometown'; 🤔

Kikky#1902•11mo ago

Hi, this is the CSS i used in my latest project for custom fonts and it works: Font with OTF example:

@font-face {
    font-family: "FontA";
    src: local("FontA-Light"),
        url("~/assets/fonts/FontA-Light.otf") format("opentype");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "FontA";
    src: local("FontA-Book"),
        url("~/assets/fonts/FontA-Book.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "FontA";
    src: local("FontA-Light"),
        url("~/assets/fonts/FontA-Light.otf") format("opentype");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "FontA";
    src: local("FontA-Book"),
        url("~/assets/fonts/FontA-Book.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
}

Font with TTF example:

@font-face {
    font-family: "FontB";
    src: local("FontB-Regular"),
        url("~/assets/fonts/FontB-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "FontB";
    src: local("FontB-Italic"),
        url("~/assets/fonts/FontB-Italic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: "FontB";
    src: local("FontB-Regular"),
        url("~/assets/fonts/FontB-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "FontB";
    src: local("FontB-Italic"),
        url("~/assets/fonts/FontB-Italic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
}

And you specify it as font-family: 'FontA' or font-family: 'FontB'. If you have woff and woff2, they are prefered option over otf/ttf for web. Edit: FontA and FontB are made up names, not actual font family names

Matt•11mo ago

@kikky1902That is basically the same thing I'm doing My example works with another font but not with this font for some reason The issue was: format('ttf'); should be format('truetype')

Gaming

Programming

Importing Custom Fonts (CSS)