Cargando una fuente externa a través de CSS en línea

¿Es posible cargar una fuente externa a través de CSS en línea?

Nota: No estoy hablando de usar un archivo CSS externo con una definición @font-face , sino más bien algo como lo siguiente:

 

test

¿Es posible cargar una fuente externa con css en línea? NO con un archivo CSS externo [….].

Sí, puede base64 codificar una fuente o fonts como se muestra en este artículo de Stephen Scaff y colocarlas en un bloque de style en su página para evitar la solicitud externa.

También puede ser posible utilizar esta técnica de la manera que usted describe si el navegador que está utilizando lo admite.

  

Todos los navegadores modernos son compatibles con WOFF2 , por lo que probablemente deba usar eso y solo eso en el futuro previsible. Además, esta técnica mejorará tus puntajes de velocidad de página, pero degradará el rendimiento general (incluso para cargas de primera página), a menos que solo estés codificando base64 los activos de página críticos (por ejemplo, glifos de la fuente que se muestra arriba del pliegue) y cargue de forma asíncrona el descanso.

En lo que respecta al rendimiento, la mejor opción ahora es utilizar compresión Brotli y canalizar la hoja de estilos de la página web con HTTP / 2 Server Push .

No puede incluir una regla @font-face en un atributo de style (que es “CSS en línea” en el sentido más estricto). Según la especificación HTML 4.01, no puede incluir tal regla dentro del elemento body en absoluto (“CSS en línea” en un sentido más amplio, que incluye elementos de style ) . Pero en la práctica es posible.

En la práctica, si incluye un elemento de style dentro del body , los navegadores lo procesarán como si estuviera en el lugar sintácticamente correcto, es decir, dentro del elemento principal. Incluso funciona “hacia atrás”, afectando a los elementos que aparecen antes.

Incluso puede hacer que este enfoque, que debe usarse solo si no puede cambiar el head , sea formalmente correcto según HTML5 CR. Permite un elemento de style al inicio de cualquier elemento con contenido de flujo como su modelo de contenido. Los navegadores actuales ignoran el atributo de scoped .

Actualización : el siguiente ya no es relevante, ya que el error del validador se ha solucionado.

Sin embargo, hay un error en el W3C Markup Validator y en validator.nu: no permiten el style al inicio del body . Para superar este error y hacer que su documento valide además de ser válido, puede usar un elemento div adicional:

  

No, no es que yo sepa. Deberá declarar este tipo de cosas en un bloque

o en un archivo CSS externo.

Aunque si quieres algo como esto, es muy probable que lo estés haciendo mal.

Si usa @ font-face, debería poder hacer algo como esto:

CSS

 @font-face { font-family: 'RalewayThin'; src: url('fonts/raleway_thin-webfont.eot'); src: url('fonts/raleway_thin-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/raleway_thin-webfont.woff') format('woff'), url('fonts/raleway_thin-webfont.ttf') format('truetype'), url('fonts/raleway_thin-webfont.svg#RalewayThin') format('svg'); font-weight: normal; font-style: normal; 

}

Asegúrese de incluir las fonts: el ejemplo anterior ha colocado todas las fonts en un directorio de ruta relativa al archivo css.

HTML

 

Debería poder encontrar aquí fonts de fonts de fonts en línea gratuitas .