¿Necesita precargar fuentes en el y declararlos en CSS como fuente?

Mi pregunta proviene de intentar optimizar para los activos clave de precarga de Lighthouse Test.

Coloqué las fuentes marcadas por el informe del faro en el navegador Chrome en un enlace en mi archivo principal.

[header.php]

<link rel=”preload” href=”/wp-content/themes/mytheme/assets/font/Roboto/Roboto-Regular.ttf” as=”font” crossorigin=”anonymous”>

¿Todavía necesito incluirlo en mi archivo style.css y declarar la fuente?

[style.css]

@font-face {
  font-family: "Roboto";
  src: url("/wp-content/themes/mytheme/assets/font/Roboto/Roboto-Regular.ttf") format("truetype"); }

Lo pregunto porque a pesar de agregar el enlace de precarga en mi encabezado, el informe de Lighthouse todavía muestra que mi archivo no se está cargando previamente.

Gracias por su ayuda a todos.

Ambas declaraciones no tienen el mismo objetivo.

El valor de precarga del atributo rel del elemento le permite declarar solicitudes de recuperación en el HTML, especificando los recursos que su página necesitará muy pronto, que desea comenzar a cargar temprano en el ciclo de vida de la página, antes de que se active la maquinaria de representación principal de los navegadores.

• Fuente @ https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content

Si agrega precarga por sí mismo, su fuente no se tendrá en cuenta. Tienes que especificar la acción también.

<link rel="preload" href="style.css" as="style"> <!--preload-->
<link rel="stylesheet" href="style.css"> <!--action-->

Aquí precargamos nuestros archivos CSS y JavaScript para que estén disponibles tan pronto como sean necesarios para la representación de la página más adelante.

Como dijo Graham en el comentario, la precarga solo puede ser eficiente si se especifica antes de cualquier acción relacionada con la fuente como el <link> etiqueta (cargando fuente a través de html) o el propio archivo css.

Además, su solicitud depende de style.css. cargar su fuente en el html podría mejorar en gran medida el rendimiento. Ya sea incrustándolo en un <style> etiqueta o cargando a través de la <link> etiqueta.

Con las mejoras recientes en el servicio de fuentes mediante CDN, cargar una fuente desde una versión guardada localmente se vuelve ineficiente. La versión local debe utilizarse como respaldo. te recomendaría echa un vistazo a las fuentes de Google.

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">

En otros comentarios .ttf no debe usarse, no está optimizado. @ https://stackoverflow.com/a/11002874/3645650 considere usar .woff y .woff2 en cambio.

(Ejecute lighthouse con su navegador configurado en modo incógnito, para obtener información real y confiable).

TL;RD: Sí

El precarga hace que esté disponible, pero el navegador no parece usarlo.

Lo probé en mi sitio web: hasta que incluí el @font-face declaración que apunta al mismo archivo (me quedo Merriweather.woff2 en mi servidor), el texto no se mostraría con la fuente, aunque tenía * { font-family: Merriweather } en mi CSS.