[Support request] How to add a .otf font

[David]

Hmmm… i am not seeing the files being called.
I found this site, which converts OTF to WOFF and generates the @font-face CSS required.
Fancy trying that out?

https://transfonter.org

[Pedro]

Hey David,

Thank you.

Just give it a try and updated everything.

But I am wondering if it is working this time or not.

Can you please check if the files are being called?

The font-family I got from the website you’ve kindly shared is “Gotham Rounded” and I updated everything but the names of the files are “GothamRnd”. I am wondering if that might be an issue or not but apparently, everything is working.

Can you please confirm, please?

Thank you.

[David]

Almost – so your @font-face CSS URLs has a base64 encoding prefix. So remove this from each of th e URLS:

data:application/font-woff2;charset=utf-8;base64,

It should just contain the https://…. URL

Did that code come from the transfonter generator? I’ll have to do some more tests

[Pedro]

David,

Yes, the code came from the link you gave me when converted the fonts.

I just made the changes you mentioned but I think it is exactly the same.

Anything else I can do?

Thanks.

[David]

If you clear you browser cache you should see it working apart from the one assigned to your H3.
Thing is your @font-face css still looks little messed up.
I took your regular font and ran it through that converter with the default settings ( only things checked are Family Support and the WOFF and WOFF2 formats ) and this is the result, which is what your CSS should look like for each font varient:

@font-face {
    font-family: 'Gotham Rounded';
    src: url('GothamRnd-Book.woff2') format('woff2'),
        url('GothamRnd-Book.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

[Author]

Posts