Bulletproof @Font-Face Syntax

I'm trying to install a font via FTP and there is this error of wrong Bulletproof font-face syntax. Please, what am I doing wrong?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

@font-face {
font-family: 'Brasilero2018Free';
src: 
    url('/themes/fonts/Brasilero2018Free.woff2') format('woff2'),
    url('/themes/fonts/Brasilero2018Free.woff') format('woff'),
    url('/themes/fonts/Brasilero2018Free.ttf') format('truetype'); 
    font-weight: 400;
    font-style: normal;
}

<!-- end snippet -->

I've tested your @font-face rule in css-live editor (extension).

There is a CORS issue (see the dev tools console):

> Access to font at
> 'https://www.flordeibez.org/wp-content/themes/fonts/Brasilero2018Free.woff2'
> from origin 'https://flordeibez.org' has been blocked by CORS policy:
> No 'Access-Control-Allow-Origin' header is present on the requested
> resource.

Your website's primary URL is https://flordeibez.org but your css references the www subdomain.

Changing your font src like solved the problem in my test.

@font-face {
font-family: 'Brasilero2018Free';
src: 
    url('https://flordeibez.org/wp-content/themes/fonts/Brasilero2018Free.woff2') format('woff2'),
    url('https://flordeibez.org/wp-content/themes/fonts/Brasilero2018Free.woff') format('woff'),
    url('https://flordeibez.org/wp-content/themes/fonts/Brasilero2018Free.ttf') format('truetype'); 
}

Provided your css file is in your theme folder you could use relative paths like:

@font-face {
font-family: 'Brasilero2018Free';
src: 
    url('../fonts/Brasilero2018Free.woff2') format('woff2'),
    url('../fonts/Brasilero2018Free.woff') format('woff'),
    url('../fonts/Brasilero2018Free.ttf') format('truetype'); 
}

If this font-family doesn't include italics or other width you should specify fonst style and weight too:

 @font-face {
    font-family: 'Brasilero2018Free';
    src: 
        url('../fonts/Brasilero2018Free.woff2') format('woff2'),
        url('../fonts/Brasilero2018Free.woff') format('woff'),
        url('../fonts/Brasilero2018Free.ttf') format('truetype'); 
    font-weight: 400;
    font-style: normal;
}

Keep in mind, you also need to apply the font-family to a HTML element - otherwise the browser won't load it.

E.g. apply it to the <h1> heading:

h1{
    font-family: 'Brasilero2018Free';
    font-weight: 400;
    font-style: normal;
}

BTW. you can safely remove .eot (Internet Explorer only) and .svg fonts (not supported by Firefox or Chrome since years). Instead add the woff2 version since it's the most compact format.

I also highly recommend to remove the local() rule as it can introduce issues in some browsers blocking locally installed fonts.

Issues with elementor specificity

Elementor and other page builder plugins tend to ad a lot of CSS specificity to font styles.

Workaround:
Install a plugin like Custom Fonts to upload custom fonts in your admin area/media library.

Go to your theme customizer and open the Additional CSS drawer and add a custom rule using !important to override existing styles.

h1{
 font-family: 'Brasilero2018Free'!important;
 font-weight: 400;
 font-style: normal;
}

With your syntax as:

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

you just redefine the URL for the font with every line. So browser will use only the last one, others are just 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 extra font formats if you need to satisfy old browsers.

NB: changed incorrect format('ttf') to format('truetype'), thanks to @herrstrietzel