1

Hola tengo un ejemplo en donde debo utilizar el tipo de fuente "Rubik Light" el codigo es el siguiente, no se lo puedo asignar, disculpen no se mucho de html o css:

<font size=16  face="Rubik Light" align=center color="white">
            ¡Bienvenido!<br>
            </font

de antemano gracias...

7
  • Son problemas del servidor en el cual esta montado, es node ...
    – rrodo1310
    Commented el 26 nov. 2020 a las 14:47
  • ¿Tienes la fuente en tu servidor en algún formato entendible por los navegadores: woff, woff2, svg, ttf? Si ese fuera el caso podría ayudarte. Saludos Commented el 26 nov. 2020 a las 14:49
  • Saludos Don Mauricio, que gusto :), oiga no y honestamente no creo lo temgan, no hay forma de tomarlo online? disculpe pero no manejo este tema..
    – rrodo1310
    Commented el 26 nov. 2020 a las 14:56
  • Has probado con el atributo style, <font style="font-family: nombredelafuente;"> Commented el 26 nov. 2020 a las 15:01
  • Vale, si la fuente es de código abierto o de dominio público, la puedes descargar y servir directamente desde tu aplicación Node. Veré de darte una respuesta. ¿Usas Express en tu Servidor Node? Commented el 26 nov. 2020 a las 15:06

2 respuestas 2

1

Puedes declarar el tipo de fuente que desees en el css con el atributo @font-face y asignarlo a la etiquetas que desees.

@font-face {
    font-family: 'Mystery Quest';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/mysteryquest/v8/-nF6OG414u0E6k0wynSGlujRLwgvDs9Q.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

.nuevaFuente{
    font-family: "Mystery Quest" !important;
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <p class="nuevaFuente">Este parrafo cambiara con la nueva fuente seleccionada</p>
    </body>
</html>

0

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.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.