Una solución, como te indiqué en mi comentario, es servirla directamente desde tu servidor de Node / Express. Aunque si el tema es por espacio o ancho de banda de consumo, también puedes buscar la fuente en línea.
Lo primero, verificar si la fuente que vas a servir tiene alguna restricción de licencia. Una búsqueda en Google Fonts por la fuente con nombre Rubik
nos proporciona lo siguiente en el apartado Licencia (traducción propia):
Estas fuentes se proveen bajo la Licencia Open Font
Puedes usarlas de forma gratuita en tus productos y proyectos (impreso o digital), comercial o cualquier otro. Sin embargo, no puedes vender la fuente por si sola.
Visto esto, podemos distribuir una copia de la misma de acuerdo a lo establecido en su licencia de uso.
Servir mi propia copia con archivos en línea
Vamos a servir nuestra propia copia de la fuente que nos interesa, para ello usaremos los ficheros en linea y crearemos el archivo css
adecuado.
Lo usual es alojar nuestros archivos estáticos en alguna carpeta dentro de la carpeta pública de nuestro servidor. Supongamos que nuestra carpeta pública es la típica carpeta llamada public
, y dentro de ella creamos una subcarpeta llamada css
. De esta forma podemos guardar los archivos .css
dentro de esa carpeta.
Teniendo esto en cuenta, debemos escribir el archivo .css
para usar la fuente. Dado que en tu pregunta expones la necesidad de utilizar la fuente Rubik
ligera (Light) (con peso (weight) de 300).
Nuestro archivo de estilos podría quedar así:
rubik-light.css:
/* Estilo normal */
@font-face {
font-family: "Rubik Light";
font-style: normal;
font-weight: 300;
src:
url("https://fonts.gstatic.com/s/rubik/v11/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-WYiFV0U1.woff2") format("woff2"),
url("https://fonts.gstatic.com/s/rubik/v11/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-WYiFV0Uz.woff") format("woff"),
url("https://fonts.gstatic.com/s/rubik/v11/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-WYiFV0Ux.eot?#iefix") format("embedded-opentype"),
url("https://fonts.gstatic.com/l/font?kit=iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-WYiFV0Uy&skey=cee854e66788286d&v=v11#Rubik") format("svg"),
url("https://fonts.gstatic.com/s/rubik/v11/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-WYiFV0Uw.ttf") format("truetype");
}
/* Estilo italic/oblicua/inclinada/cursiva */
@font-face {
font-family: "Rubik Light";
font-style: italic;
font-weight: 300;
src:
url("https://fonts.gstatic.com/s/rubik/v11/iJWbBXyIfDnIV7nEt3KSJbVDV49rz8sDE3U3f4I.woff2") format("woff2"),
url("https://fonts.gstatic.com/s/rubik/v11/iJWbBXyIfDnIV7nEt3KSJbVDV49rz8sDE3U3f4Q.woff") format("woff"),
url("https://fonts.gstatic.com/s/rubik/v11/iJWbBXyIfDnIV7nEt3KSJbVDV49rz8sDE3U3f4Y.eot?#iefix") format("embedded-opentype"),
url("https://fonts.gstatic.com/l/font?kit=iJWbBXyIfDnIV7nEt3KSJbVDV49rz8sDE3U3f4U&skey=80e52bf85b0b1958&v=v11#Rubik") format("svg"),
url("https://fonts.gstatic.com/s/rubik/v11/iJWbBXyIfDnIV7nEt3KSJbVDV49rz8sDE3U3f4c.ttf") format("truetype");
}
(Las direcciones en la URL apuntan al fichero correspondiente a la fecha de publicación de esta respuesta.)
Ahora debemos incluir nuestro archivo css
de fuente en el documento y añadir el tipo de fuente a la hoja de estilos principal:
styles.css:
.rubik-light {
font-face: "Rubik Light";
}
Por último la cabecera de nuestro archivo html
debe incorporar, en orden, los estilos. Un ejemplo con la implementación anterior sería:
...
<head>
...
<link rel="stylesheet" href="/css/rubik-light.css">
<link rel="stylesheet" href="/css/styles.css" type="text/css">
...
</head>
Ahora, para usar la fuente en nuestros elementos de forma selectiva, podríamos hacer lo siguiente:
<!-- Párrafo con fuente predeterminada por el navegador -->
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro optio asperiores praesentium voluptates odio natus accusamus dignissimos facere sunt, consequatur non vel possimus. Magni totam eum earum? Placeat, alias distinctio.
</p>
<!-- Párrafo que usa la fuente "Ribik Light" -->
<p class="rubik-light">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur dolorum quaerat unde soluta non explicabo sint, molestiae exercitationem saepe illum consequuntur numquam, vel, praesentium facere debitis dolores adipisci nisi? Sunt.
</p>
Sirviendo nuestras propias fuentes
El proceso anterior es muy similar en caso en que deseemos servir las fuentes desde nuestro servidor. En este caso debemos tener disponibles los archivos de fuentes. Como puedes observar en el código ya mostrado, se utilizan hasta 5 tipos de archivos:
La forma en que está dispuesto el código CSS permite la adaptabilidad de uso según el navegador. La mayoría de navegadores actuales reconocen el tipo de fuente: Web Open Format, sin embargo, siempre es buena idea, por razones de compatibilidad, mantener la implementación para los otros tipos de fuente aceptadas. Al hacerlo de esta forma, poniendo el formato más actual de primero, nos aseguramos que los navegadores modernos usen dicho formato, y los navegadores más antiguos van descartando en cascada hasta conseguir un formato que entiendan.
Suponiendo que los archivos de fuentes los almacenamos en una subcarpeta de nuestro archivo de estilos, podemos hacer lo siguiente con el archivo de definición de fuente:
rubik-light.css:
/* Estilo normal */
@font-face {
font-family: "Rubik Light";
font-style: normal;
font-weight: 300;
src:
url("./fonts/Rubik_300.woff2") format("woff2"),
url("./fonts/Rubik_300.woff") format("woff"),
url("./fonts/Rubik_300.eot#iefix") format("embedded-opentype"),
url("./fonts/Rubik_300.svg#Rubik") format("svg"),
url("./fonts/Rubik_300.ttf") format("truetype");
}
/* Estilo italic/oblicua/inclinada/cursiva */
@font-face {
font-family: "Rubik Light";
font-style: italic;
font-weight: 300;
src:
url("./fonts/Rubik_300_italic.woff2") format("woff2"),
url("./fonts/Rubik_300_italic.woff") format("woff"),
url("./fonts/Rubik_300_italic.eot#iefix") format("embedded-opentype"),
url("./fonts/Rubik_300_italic.svg#Rubik") format("svg"),
url("./fonts/Rubik_300_italic.ttf") format("truetype");
}
Como puedes observar, hay una diferencia entre el archivo de fuente normal y el de fuente cursiva (itálica). Por otro lado, el archivo .css
hace la búsqueda de los archivos de fuente en un subdirectorio llamado fonts
. En el ámbito de tu aplicación Express, tendrías que tener una carpeta llamada css
dentro de la carpeta pública, y dentro de esta carpeta css
irían tus estilos. Además, dentro de la carpeta css
deberías tener una carpeta fonts
donde se alojan los archivos de fuentes.
En cuanto a la forma de servir los archivos desde Express, ese es otro asunto. Sin embargo, en esta respuesta hago la aclaratoria sobre como servir correctamente archivos estáticos (los que se envían desde la carpeta public
) usando Express y/o NodeJS.
Espero que esto te ayude a resolver el problema.
woff
,woff2
,svg
,ttf
? Si ese fuera el caso podría ayudarte. Saludos