How to add a .otf font

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

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.

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

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.

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;
}