Puede personalizar Tailwind si se instaló como una dependencia de su proyecto usando npm install tailwindcss

Pasos:

• copie la fuente descargada y colóquela dentro de una carpeta de fonts dentro de su proyecto.

• ejecute npx tailwind init , para generar un tailwind.config.js vacío

• Dentro fontFamily tailwind.config.js de extend y especifique la familia de fuentes para anular (la familia predeterminada de Tailwind es sans ). Coloque la familia de fuentes recién agregada al principio (el orden es importante )

 module.exports = { theme: { extend: { fontFamily: { 'sans': ['Roboto', 'Helvetica', 'Arial', 'sans-serif'] } }, }, variants: {}, plugins: [] }

Importante : el uso de extend agregará las familias de fuentes recién especificadas sin anular toda la pila de fuentes de Tailwind.

Luego, en el archivo principal tailwind.css (donde importa todas las funciones de viento de cola), puede importar su familia de fuentes local. Me gusta esto:

 @tailwind base; @tailwind components; @font-face { font-family: 'Roboto'; src: local('Roboto'), url(./fonts/Roboto-Regular.ttf) format('ttf'); } @tailwind utilities;

Ahora vuelve a compilar el CSS. Si está siguiendo la documentación de Tailwind , esto generalmente se hace usando postcss :

 postcss css/tailwind.css -o public/tailwind.css

Si no está utilizando postcss, puede ejecutar:

 npx tailwindcss build css/tailwind.css -o public/tailwind.css

Su familia de fuentes recién agregada ahora debería estar procesada.

1 - extraiga la fuente descargada en un archivo ex './fonts 2 - cree una hoja de estilo en la misma carpeta y agregue este código:

 @font-face { font-family: 'x-font-name'; src: local('x-font-name'), local('x-font-name'), url('x-font-name.woff2') format('woff2'), url('x-font-name.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap;

}

3: importe la hoja de estilo en input.css donde ya tiene la base, los componentes y las utilidades, por ejemplo:

 @import url('./assets/fonts/stylesheet.css'); @tailwind base; @tailwind components; @tailwind utilities;

4 - Vaya a tailwind.config agregue su fuente al tema extend ex :

 theme: { extend: { fontFamily: { 'FontName': ['x-font-name','Roboto'], 'FontName-2': ['x-name-2','Roboto'] } }, },

5 - utilícelo en HTML, por ejemplo: class="font-FontName"

Paso 1: Descargue la fuente y guárdela localmente Vaya al botón Descargar familia en la parte superior derecha y obtendrá un zip o carpeta con diferentes pesos de fuente. De lo que descargamos, movemos el archivo ​static/​Oswald-Bold.ttf​ ​a una ​nueva carpeta /dist/fonts/Oswald,​ la cual creamos.

Paso 2​: importa la fuente localmente En ​tailwind.css ​dentro de ​@layer base​ y arriba de los encabezados agregamos:

 @font-face { font-family: Oswald; src: url(/dist/fonts/Oswald/Oswald-Bold.ttf) format("​truetype​") or ttf;

Si ahora ejecutamos ​npm run watch​, la familia de fuentes se compila inmediatamente en styles.css, y si buscamos "Oswald" obtenemos: Consejo: ​Si algo no funciona, puede hacer clic en el enlace en la URL mientras mantiene presionada la tecla "CTRL" para ver si la ruta es correcta.

**Paso 3:**​ Ampliar el tema Tailwindcss En el ​tailwind.config.js ​agregamos bajo "​theme​" y "​extend":

 theme: { extend: { fontFamily: { headline: ['Oswald'] } },

¡El nombre "titular" se puede elegir libremente aquí!

Podemos agregar una familia de fuentes personalizada en Tailwind en 2 pasos:

1. Agregar fuente personalizada

Podemos importar fuentes desde fonts.googleapis.com y agregarlas a index.html head o podemos usar @import , @font-face :

 <link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">

2. Ampliar la familia de fuentes Tailwind

A continuación, extenderé tailwind font-family sans en tailwind.config.js :

 const defaultTheme = require('tailwindcss/defaultTheme') module.exports = { purge: [], theme: { extend: { fontFamily: { sans: ['Raleway', ...defaultTheme.fontFamily.sans], }, }, }, variants: {}, plugins: [], }

A mi manera, estilo de complemento completo, una fuente local, una fuente https, sin necesidad de @import, sin necesidad de <link> :

 // tailwind.config.js const plugin = require('tailwindcss/plugin'); const defaultTheme = require('tailwindcss/defaultTheme'); module.exports = { purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'], darkMode: false, // or 'media' or 'class' theme: { extend: { fontFamily: { 'sans': ['Red Hat Display', ...defaultTheme.fontFamily.sans], 'damion': ['Damion'], } } }, variants: { extend: {}, }, plugins: [ plugin(function ({ addBase }) { addBase({ '@font-face': { fontFamily: 'Red Hat Display', fontWheight: '300', src: 'url(/src/common/assets/fonts/RedHatDisplay-VariableFont_wght.ttf)' } }) }), plugin(function ({ addBase }) { addBase({ '@font-face': { fontFamily: 'Damion', fontWheight: '400', src: 'url(https://fonts.gstatic.com/s/damion/v10/hv-XlzJ3KEUe_YZkamw2.woff2) format(\'woff2\')' } }) }), ], }

Sé que esto es para JavaScript, pero si alguien lo está usando para Flask y Tailwind CSS (como yo), esto es lo que tenía que hacer. Puse la fuente en un archivo CSS separado en mi carpeta estática. En mis plantillas HTML, simplemente vinculé la hoja de estilo después de vincular mi archivo CSS de Tailwind.

 <link rel="stylesheet" href="{{ url_for('static', filename='gameStyles.css') }}"/> <link rel="stylesheet" href="{{ url_for('static', filename='styles2.css') }}"/>

Y solo como referencia, esto es lo que puse en mi styles2.css:

 @font-face { font-family: 'reg'; src: url(../static/ObjectSans-Regular.otf); } @font-face { font-family: 'bol'; src: url(../static/ObjectSans-Heavy.otf); } body { font-family: 'reg'; } h1 { font-family: 'bol'; }

Sería bueno si hubiera una mejor manera de hacer esto, pero esta era la única forma en que podía hacer que funcionara. ¡Ojalá esto ayude!

La respuesta de @Juan Marcos es correcta pero ligeramente obsoleta. A partir de v2.1.0, Tailwind recomienda en sus documentos usar la directiva @layer para cargar fuentes locales:

 @tailwind base; @tailwind components; @tailwind utilities; @layer base { @font-face { font-family: Proxima Nova; font-weight: 400; src: url(/fonts/proxima-nova/400-regular.woff) format("woff"); } @font-face { font-family: Proxima Nova; font-weight: 500; src: url(/fonts/proxima-nova/500-medium.woff) format("woff"); } }

Al usar la directiva @layer, Tailwind moverá automáticamente esos estilos al mismo lugar que la base @tailwind para evitar problemas de especificidad no deseados.

El uso de la directiva @layer también indicará a Tailwind que considere esos estilos para purgar al purgar la capa base. Lea nuestra documentación sobre la optimización para la producción para obtener más detalles.

Consulte: https://tailwindcss.com/docs/functions-and-directives#layer

simplemente agrego esta @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;500&display=swap'); dentro de index.css y actualice tailwind.config.js con lo siguiente:

 theme: { fontFamily: { sans: ['Roboto', 'Helvetica', 'Arial', 'sans-serif'], serif: ['Merriweather', 'serif'], },