Kugelsichere @Font-Face-Syntax

Question

Ich habe versucht, die Schriftart über FTP zu installieren, habe jedoch die Fehlermeldung erhalten, dass die Syntax der Bulletproof-Schriftart falsch ist. Was habe ich falsch gemacht?

Bearbeiten: Ich versuche, den Code mit Jareds Hilfe zu reparieren und er funktioniert immer noch

@font-face {
Schriftfamilie: 'Brasilero2018Free';
Quelle:
    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');
}

Was ich will: Schriftarten ohne Fehler installiert und im Elementor-Editor angezeigt

Answer 1

您的语法为：

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

您只需在每一行中重新定义字体的 URL。所以浏览器只会使用最后一个，其他的都会被丢弃。正确的基本语法是：

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

如果您需要满足旧浏览器的要求，您可以包含额外的字体格式。

注意：将错误的 format('ttf') 更改为 format('truetype')，感谢 @herrstrietzel