[Resolved] Local TTF font does only work in Safari

[Stephan]

Dear GP-Team,

I try to use a local hosted TTF font and added it with the following CCS to the Merch theme template.

@font-face {
    font-family: 'Creampuff';
    font-style: normal;
    font-weight: normal;
    src: url('https://example.com/wp-content/uploads/sites/3/2023/01/CREAMPUF.ttf') format('truetype');
}

This only works in Safari though. Other browsers throw this error:

Failed to decode downloaded font: https://example.com/wp-content/uploads/sites/3/2023/01/CREAMPUF.ttf

I downloaded from another source and also used different FTP programs to upload. Did I use the correct CSS?

Thanks a lot!

[David]

Hi there,

thats an issue with the TTF file itself.
Try converting the file to a woff and woff2 file. Using a site like font squirrel

https://www.fontsquirrel.com/tools/webfont-generator

Then use just the woff and woff2 files in your CSS. Don’t bother with the TTF

[Stephan]

Hi David,

thanks for the hint. Turned out there must have been a problem with the font file itself as the mentioned webfont generator also said it was corrupt.

I tried this generator then https://transfonter.org/ and with that I could transform it into woff. Maybe that helps somebody.

Thanks a lot!

[David]

Glad to hear you got it working!

[Author]

Posts