Grow your CSS skills. Land your dream job.

Preload a font-file (.ttf)?

  • # March 7, 2010 at 11:47 am


    i create a website that use a .ttf-file. I include this file with css (@font-face) but my problem is… sometimes when i load the page the text who is used the .ttf-file looks bad (arbitrary mark). Can i preload the font-file and is this the solutions for my problem?

    PS… I’m form Germany sorry for my bad English :oops:

    # March 7, 2010 at 12:35 pm

    Can you show us a copy of the code you have written up?

    # March 7, 2010 at 12:40 pm

    I don’t think you can (?).My advice would be to select a similar font as your standard page font which will show while the ttf is loading and then doesn’t look as bad as a standard font.

    Hopefully more browsers will follow Safari whereby the font loads before it displays any font on the page

    # March 7, 2010 at 12:54 pm

    This is my Code:

    @font-face { font-family: navifont; src: url(‘fonts/dreamori.ttf’); }
    @font-face { font-family: navifont; src: url(‘fonts/dreamori.ttf’) format(‘truetype’); }
    # March 8, 2010 at 4:34 am

    The problem might be the format that you are putting it in the style sheet. Try this:

    @font-face { font-family: navifont; src: url(‘fonts/dreamori.ttf’) format(“truetype”);}

    body { font-family: navifont; }

    If it still has arbitrary marks, it’s possible that that font file doesn’t support the character you are using.

    # March 8, 2010 at 4:39 am

    Also ttf files are not supported on all browsers. For Internet explorer you will need .eot

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".