Bulletproof @Font-Face syntax

Question

I tried to install the font via FTP but got an error that the Bulletproof font syntax is incorrect. What did I do wrong?

Edit: I'm trying to fix the code with Jared's help and it's still working

@font-face {
font-family: 'Brasilero2018Free';
src:
    local("Brasilero2018Free"),
    url('https://www.flordeibez.org/wp-content/themes/fonts/Brasilero2018Free.otf'),
    url('https://www.flordeibez.org/wp-content/themes/fonts/Brasilero2018Free.eot') format('embedded-opentype'),
    url('https://www.flordeibez.org/wp-content/themes/fonts/Brasilero2018Free.woff') format('woff'),
    url('https://www.flordeibez.org/wp-content/themes/fonts/Brasilero2018Free.svg') format('svg'),
    url('https://www.flordeibez.org/wp-content/themes/fonts/Brasilero2018Free.ttf') format('truetype');
}

What I want: fonts installed without errors and displayed in Elementor Editor

Answer 1

Your syntax is:

src: url('some_url');
src: url('other_url');

You just need to redefine the URL of the font in each line. So the browser will only use the last one, and the others will be discarded. The correct basic syntax is:

@font-face {
  font-family: 'SomeFont';
  src: 
    local("SomeFont"),
    url('//host.tld/SomeFont.woff2') format('woff2'), 
    url('//host.tld/SomeFont.woff') format('woff'), 
    url('//host.tld/SomeFont.ttf') format('truetype');
}

You can include additional font formats if you need to satisfy older browsers.

Note: Changed incorrect format('ttf') to format('truetype'), thanks @herrstrietzel