Question 194631 in Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress – 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?

EDIT: I’m trying with Jared’s help to fix the code, but still now 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: Install a font with no errors, that shows up in Elementor Editor

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Any ideas on why it's not working yet?

    @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'); 
}


  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search