nextjs tailwind googlefonts selfhost starter
1.0.0
¡La tipografía puede hacer que sus aplicaciones sean Zing!
Agregar fuentes de Google le permite usar fuentes personalizadas en sus aplicaciones. Se anuncian como gratis y hay más de 900 familias de fuentes para elegir. Desde 2018, Google ha recomendado el auto-anfitrión como una forma de agregar sus fuentes.
Hay una cantidad de fuentes seguras web , que son gratuitas y integradas en varias plataformas. Sin embargo, a veces necesitamos algo más personalizado, para servir a nuestros fines de diseño.
Así que "sin mucho más" ...
Este repo se dirige específicamente al autohospedado de Google Fonts, en lugar de usar un enlace a su CDN y cómo integrarlas en una aplicación Next.js que usa CSS de viento de cola.
Hay una cantidad de pros y contras para el autohospedaje, que se han discutido en muchos artículos y blogs, no los detallaré aquí. He proporcionado algunos enlaces al final de este archivo ReadMe, para una lectura adicional.
Google Fonts se anuncia como código abierto y gratis para usar ...
Pero no tomes mi palabra por ello (no soy laywer y esto no es un consejo legal)
Todas las fuentes utilizadas en este ejemplo se obtienen de Google Fonts bajo la licencia SIL Open Font (OFL) v1.1. He tenido cuidado de incorporar las licencias en las carpetas de autohospedación dentro del repositorio, que se solicita en la OFL.
Nota: Siempre debe leer la información de la licencia de fuente ya que es responsable de seguirla. En este momento, el uso de Google Fonts OFL V1.1, algunos usan la licencia Apache 2. Las fuentes de Ubuntu usan la licencia de fuentes de Ubuntu v1.0
Debe buscar asesoramiento legal antes de autohospedar o usar las fuentes personalizadas.
Vea la demostración del código aquí
Puede obtener Foots Fonts de Google de varias maneras (esta no es una lista exhalada), utilizando las siguientes herramientas:
Las fuentes también se pueden encontrar en Googles Github Repo.
Una vez, los ha descargado, puede agregarlos a su proyecto a sí mismo.
La forma más fácil de alojarlos es debajo de una carpeta public , en una subpoleta llamada fonts .
He estructurado las ubicaciones de los recursos de fuentes de la siguiente manera, no tiene que seguir esto, demuestra flexibilidad y que todas las fuentes se pueden organizar en lugar de solo ser colocadas debajo de la subpoleta
fonts.
├── public
| └── fonts
| └── google
│ ├── font(s) by name
│ │ │ ├── .woff / .ttf (etc)
│ │ │ ├── .css
│ │ │ ├── licence.txt
├── styles
| └── global.css (app-base.css)
├── .gitignore
├── jsconfig.json
├── postcss.config.js
├── tailwind.config.js
Las fuentes serán servidores desde esta ubicación hasta nuestra aplicación Next.js.
Una vez que hayamos descargado los archivos de fuentes, licencias, hojas de estilo, etc. y estructurado las carpetas, necesitamos realizar la carga de fuentes.
Podemos usar @font-face para cargar las fuentes. Vea los archivos CSS colocados junto con los recursos de fuentes en la carpeta font anterior.
Eventualmente podemos importarlos al archivo CSS de Styles de viento de cola. Normalmente, esto se llama global.css , estoy usando 3 archivos que se importan al archivo Next.js _App.js.
Por ejemplo:
@font-face {
font-family : 'Oswald Variable' ; /*Ive added a prefix to let me know its a variable font*/
font-style : normal;
font-weight : 200 700 ;
src : local ( 'Oswald' ) ,
url (/fonts/google/oswald/Oswald-VariableFont_wght.ttf) format ( 'truetype' );
font-display : swap;
} A continuación, realizamos algunas optimizaciones pequeñas para la carga (s) de fuente utilizando el atributo font-display .
Al usar @font-face en combinación con atributos font-display podemos prevenir Fout y FOIT.
Hay una serie de estrategias disponibles para implementar esto:
| Estrategia | Descripción |
|---|---|
1. block | No represente nada al usuario hasta que se carguen las fuentes. |
2. swap | Recomendado para Google Fonts. Se cambiará una vez que se cargue la fuente. |
3. fallback | no recomendado. Todavía muestra texto invisible como bloqueo por un corto tiempo, pero eventualmente se retirará a una fuente segura. |
4. optional | Una buena opción cuando la fuente no es importante, más enfoque en la marca y el contenido. Es como el respaldo con conexión lenta que podría no cargar una fuente. |
Esta es una nueva regla que puede agregar a su declaración de cara de fuente que le indica al navegador que use la fuente segura del sistema respaldo que ha enumerado (por ejemplo, sans serif), luego cambia a la fuente deseada cuando se ha descargado.
Es una buena mejora del rendimiento, ya que muestra contenido sin esperar a que las descargas terminen.
font-display: swap; tiene el inconveniente de flashear este texto sin estilo si la fuente aún no se ha cargado. Pero podemos remediar eso con precarga.
Podemos precargar nuestras fuentes en la aplicación <head> de nuestra página. Esto es especialmente útil para esos bits críticos de tipografía que queremos mostrar sin parpadear.
TODO ESTO, podemos agregar <preload> al jefe de nuestras páginas.
En Next.js lo agregamos al personalizado _document.js de la siguiente manera:
< Head >
< link
rel =" preload "
href =" /fonts/google/grandstander/Grandstander-VariableFont_wght.ttf "
as =" font "
type =" font/ttf "
crossOrigin =" anonymous "
/>
</ Head > Nota: Tenga cuidado al usar precarga, ya que puede tener un efecto negativo, si se usa en exceso. Entonces lo usamos sabiamente. Es una forma de establecer la importancia de un recurso, también podemos hacer lo mismo para nuestros recursos script si es necesario.
A continuación, creamos un archivo Fonts.css en la carpeta publicfonts . Aquí es donde importamos los diversos archivos CCS para los recursos de Google Font cargados usando @font-face anterior, es decir,
@import './google/oswald/Oswald-Variable.css' ;Esto se importa al archivo de estilo de viento de cola a continuación.
A continuación, agregamos lo siguiente al archivo app-base.css en la carpeta ./styles .
Utilizamos la directiva @layer para decirle a Tailwind qué "cubo" también estamos agregando los estilos de fuentes.
Las directivas de capa válidas son una base, componentes y utilidades.
Por ejemplo:
@layer base {
@import "../public/fonts/fonts.css";
}
Luego importamos los estilos al archivo _app.js :
import '@/styles/app-base.css';
import '@/styles/app-components.css';
import '@/styles/app-utilities.css';
Finalmente, configuramos el archivo tailwind.config.js para agregar las familias de fuentes a nuestra aplicación. Los agregamos a los temas de fuente base o extendemos los temas (o ambos).
Por ejemplo:
const { fontFamily } = require('tailwindcss/defaultTheme');
module.exports = {
fontFamily: {
sans: ['Oswald Variable, Arial', fontFamily.serif],
serif: ['Merriweather Sans, Georgia', fontFamily.serif],
},
extend: {
fontFamily: {
'Grandstander-VariableFont': ['Grandstander Variable'],
},
},
},
;
Eso es todo. Hemos terminado, vea el código para obtener más detalles.
Gracias por leer. ? ?
Por favor, establezca, si lo encontraste útil.
Aquí sigue, más información para aquellos que pueden encontrarla útil. ?
Recuerde que puede usar Lighthouse para probar el rendimiento de su página, esto también buscará optimización de fuentes y scripts e incluirá recomendaciones, incluidos problemas de Fout y FOIT.
Una vez construido, me complace decir que esta demostración obtiene lo siguiente cuando se ejecuta localmente.
Las principales razones por las que elijo a sí mismo anfitriona son las siguientes:
| 1. Google lo recomienda | Ahora es recomendado por Google. Desde 2018, Google ha recomendado auto alojamiento, para el pisos óptimo a través de la precarga. El auto-anfitrión es gratuito y se alienta, vea este video: Google Chrome Developers: Rendimiento web hecho fácil. |
| 2. Mejor para la privacidad | Los CDN de terceros pueden usar cookies y algoritmos de seguimiento que no conoce necesariamente. Esto puede ser un problema en los países donde necesita consentimiento de los usuarios (es decir, privacidad de datos y GDPR, consulte: GDPR-COMPLIMIENT de Google Fonts. |
| 3. Mejor para la seguridad | más control en su propio servidor). En realidad, llamas al menos 2 dominios cuando usa el CDN. |
| 4. Más rápido y más guarnición | Google Fonts agregan recursos que puede que no necesite. Puede elegir estilos de fuentes, etc. y paquete y minificar sus propias reglas/archivos CSS relacionados con la fuente, dando menos solicitudes HTTP. Puede hacer esto sirviendo de manera propia las fuentes y unicodios específicos que necesita para la tipografía de sus sitios. Especificar partes de las familias de fuentes en lugar de familias enteras. Puede elegir estilos de fuentes, etc. y paquete y minificar sus propias reglas/archivos CSS relacionados con la fuente, dando menos solicitudes HTTP. |
| 5. Disponibilidad fuera de línea | para aplicaciones móviles y de escritorio a las que se accede fuera de línea. |
Prueba esto por ti mismo.
Le animo a que pruebe con su sitio/aplicación específica y use las herramientas de desarrollo combinadas con "Desactivar caché" y la capacidad incorporada para cambiar las velocidades de conexión.
No he cubierto el uso de npm packages para agregar fuentes. Hay varios sabores disponibles en línea si esta es su preferencia.
Algunas alternativas son intentar usar FontSource o Next-Google-Fonts .
