Question 289887 in Html Question posted in
Some basic documentation can be found here.

Html – Using font-family and a src URL in @font-face rule isn't showing the font

Face font doesn’t load a font I downloaded and placed in the same folder as my website.

@font-face {
    font-family: 'fontName';
    src: url('font.ttf');
}

header {
    text-align: center;
}

h1 {
    font-family: 'fontName';

I did change the ttf file name, but I don’t think that is the issue as it didn’t work on another font I tried.

Are there any errors in my code?

Tags:

2

Answers


  1. 0

    The .ttf file format is not enough on its own, you have to specify its format as well (as seen in the provided CSS), as well as the font-family must be the determined according to the font’s title, for example: "font_Name_regular".

    And the following formats are also needed:

    • WOFF
    • WOFF2
    • EOT Lite or EOT Compressed
    • and SVG

    for the text to appear in a cross-browser way (in most browser environments).

    You can generate them via a third-party online app, like this: https://www.fontsquirrel.com/tools/webfont-generator
    using the "Expert…" mode, choosing all the file-formats. The more you choose the better the cross-browser compatibility will be.

    Then you’ll get (in a zip) something like the following:

    font-name-webfont.ttf (which is your base file, but again, you need to be attentive about the font-family name, that is the "title"),

    font-name-webfont.eot,

    font-name-webfont.svg,

    font-name-webfont.woff

    &

    font-name-webfont.woff2
    files.
    And inside the given stylesheet.css, you’ll find the following, which is important, as said earlier:

    @font-face {
    font-family: 'font_Name_regular';
    src: url('font-name-webfont.eot');
    src: url('font-name-webfont.eot?#iefix') format('embedded-opentype'),
         url('font-name-webfont.woff2') format('woff2'),
         url('font-name-webfont.woff') format('woff'),
         url('font-name-webfont.ttf') format('truetype'),
         url('font-name-webfont.svg#font_Name_regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

    Which then you can use, as desired, on your website.

    Login or Signup to reply.
  2. 0

    Try adding local('fontName'), to src: before the url(). See the MDN page on @font-face. This is working for me, although I am loading a local *.woff2 font, not *.ttf.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search