Tailwind/CSS utilizando fuentes personalizadas

Question

Tengo un proyecto donde necesito usar fuentes personalizadas. Pero no tengo ni idea de cómo usar esto en mi HTML. He buscado en línea cómo hacer esto, pero todos los ejemplos utilizan una fuente que está contenida en un archivo. Mi fuente está contenida en múltiples archivos. ¿Cómo especifico qué fuente específica del CircularStd quiero usar en cada elemento? Esta es una captura de pantalla de mi archivo index.scss que contiene las importaciones de la cola y la definición de mi fuente:

syntaxsenseie7e4 · Accepted Answer

Un acercamiento a esto sería crear una clase de fuente personalizada en su tailwindconfig.js y extenderlo a su tema de la cola predeterminada. Por ejemplo, si estás usando Google Fonts y quieres usar la fuente Manrope para un encabezado específico, puede ampliar la fuente Variante familiar así:

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'manrope': 'Manrope',
      }
    }
  }
}

Ahora, para usar esta clase personalizada declarar en su html siguiendo la sintaxis font-{fontFamily}. Así que en este caso, vamos a usar font-manrope.

I'm a header using the font Manrope

Respondida el Dec 17, 2020 a las 08:51 - por syntaxsenseie7e4

rubyrover · Answer

Si usted piensa que su fuente tiene muchos archivos y necesita todos entonces por qué no crear un @fontface para cada uno aunque esta no es la mejor práctica, se supone que por ejemplo para elegir el archivo con la fuente de luz y estándar y crear el @fontface basado en él e incluye el archivo de los otros como el bold and italics se puede hacer eventualmente utilizando CSS pero lo más importante es que usted tiene su fuente implementada. por ejemplo, añadirá su fuente:

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

y si quieres que sea audaz y uso itálico

p{
font-weight:600;
  font-style: italic;
}

¡Espero que eso ayude!

Respondida el Dec 17, 2020 a las 08:59 - por rubyrover

Gpt · Answer

Para utilizar fuentes personalizadas en Tailwind CSS, primero necesitas configurar tu fuente personalizada en tu proyecto. Al ver tu captura de pantalla, parece que tienes definidas las fuentes personalizadas en tu archivo index.scss. Aquí te muestro cómo puedes usar esas fuentes en tu HTML:

Enlazar tu archivo CSS: En tu archivo `index.scss`, asegúrate de exportar tus fuentes personalizadas de la siguiente manera:

scss
@font-face {
  font-family: 'CircularStd-Book';
  src: url('path/to/CircularStd-Book.eot');
  src: local('CircularStd-Book'), url('path/to/CircularStd-Book.woff') format('woff');
  font-weight: 400;
}

@font-face {
  font-family: 'CircularStd-Bold';
  src: url('path/to/CircularStd-Bold.eot');
  src: local('CircularStd-Bold'), url('path/to/CircularStd-Bold.woff') format('woff');
  font-weight: 700;
}

// Resto de tus estilos y configuraciones

Utilizar la fuente en tu proyecto: Una vez que hayas definido tus fuentes personalizadas, puedes usarlas en tu proyecto HTML. Puedes aplicar la fuente directamente en tu elemento HTML o a través de las clases de Tailwind CSS si has configurado tus fuentes personalizadas en su archivo de configuración:

html

Título con CircularStd-Book


Subtítulo con CircularStd-Book

Recuerda reemplazar 'path/to/CircularStd-Book.eot' y 'path/to/CircularStd-Book.woff' con las rutas reales de tus archivos de fuente personalizada.

Espero que esta información te sea útil. ¡Déjame saber si necesitas más ayuda!

Respondida el Dec 18, 2020 a las 08:51 - por Gpt

Gemini · Answer

Importación de fuentes personalizadas en varios archivos Para importar fuentes personalizadas que están contenidas en varios archivos, debes utilizar la regla @font-face en tu archivo CSS. Esta regla define la información de la fuente y cómo se debe cargar. Sintaxis de @font-face: css @font-face { font- family: 'Nombre de la fuente'; src: url('ruta/al/archivo1.ext') format('formato1'), url('ruta/al/archivo2.ext') format('formato2'); font- weight: normal; font-style: normal; } Pasos para usar fuentes personalizadas en Tailwind: Crea un archivo SCSS adicional: Crea un archivo SCSS separado para almacenar tus reglas `@font-face`, por ejemplo, `fonts.scss`. Importa el archivo SCSS de fuentes: Importa este archivo en tu archivo principal de Tailwind, como `index.scss`. Define la regla `@font-face`: Define la regla `@font-face` en el archivo `fonts.scss` para cada fuente que desees utilizar. Específica la ruta a cada archivo de fuente y el formato correspondiente. Utiliza la fuente en tu HTML: Una vez que hayas importado la fuente personalizada, puedes utilizarla en tu HTML especificando el nombre de la fuente en la propiedad `font-family`. Ejemplo: fonts.scss scss @font-face { font-family: 'CircularStd'; src: url('../fonts/CircularStd-Bold.ttf') format('truetype'), url('../fonts/CircularStd-Medium.ttf') format('truetype'), url('../fonts/CircularStd-Regular.ttf') format('truetype'); } index.scss scss // Importar el archivo de fuentes @import  fonts ; HTML html Texto con CircularStd Bold Especificar una fuente específica de CircularStd: Si deseas especificar una fuente específica de CircularStd, como CircularStd-Light, puedes agregar un nombre de estilo después del nombre de la fuente en la propiedad font-family. Ejemplo: html Texto con CircularStd Light Nota: Asegúrate de que los archivos de fuentes estén en la ruta correcta especificada en la regla @font-face. Verifica que el formato de fuente sea compatible con el navegador. * Es posible que debas reiniciar tu navegador después de agregar nuevas fuentes para que se carguen correctamente.

Tailwind/CSS utilizando fuentes personalizadas

4 Respuestas:

I'm a header using the font Manrope

Título con CircularStd-Book

Subtítulo con CircularStd-Book