Al igual que cuando vemos un logotipo que nos induce a consumir su producto a través de sus colores, tipografía… También ocurre en el diseño de aplicaciones. Uno de los principales objetivos de los diseñadores además de aplicar los colores e imágenes correctas en un diseño, es aplicar la psicología de la tipografía, de esta manera aplican tipografías para generar el impacto deseado en los sentimientos, pensamientos y comportamientos del usuario. Por lo tanto, como desarrolladores debemos asegurarnos de traducir estos requisitos del diseño al código. ¡Hoy te mostraré cómo aplicar fuentes en .NET MAUI de una manera súper simple y rápida!
¡Empecemos!
La fuente predeterminada para todas las plataformas disponibles en .NET MAUI es Open Sans. Pero puedes agregar las que necesites, teniendo en cuenta que deben ser Open Type Font (OTF) o True Type Format (TTF).
Para agregar y consumir una fuente, estaremos aplicando un conjunto de pasos simples, que detallaré de la siguiente manera:
🔹 Agregando el archivo de la Fuente al proyecto
🔹 Registro de Fuentes
🔹 Consumo de Fuentes
🔧 Agregando el archivo de la Fuente al proyecto
⚠ Para este ejemplo, descargué la fuente Anstting Kishon que obtuve de Dafont.com.
➖ Dirígete a Recursos (Resources) ➡Fuentes (Fonts) y agrega la fuente que descargaste previamente.
➖ Asegúrate de que tu archivo de fuente tenga la Acción de compilación (Build Action) configurada en MauiFont, para verificarlo puedes realizar los siguientes pasos: Click derecho en el archivo de fuente ➡ Build Action ➡ MauiFont.
📋 Registrando la fuente
Dirígete a la clase MauiProgram, donde ya están agregadas las Fuentes por defecto de .NET MAUI, puedes ver esto específicamente en el método ConfigureFonts. Para agregar la nueva fuente solo tienes que usar el método AddFont del objeto IFontCollection el cual contiene los siguientes parámetros:
🔹Nombre del archivo: Es el nombre de la Fuente que deseas agregar. (Ej: Anstting-Kishon.ttf)
🔹 Alias: Es el alias con el cual quieres identificar tu Fuente y el que puedes utilizar pasar dirigirte a esta al consumirla. (Ej: Anstting-Kishon)
Finalmente, tu código debería verse como el siguiente:
📋 Consumiendo la fuente
Una vez registrada ya puedes empezar a consumirla, para esto solo debes agregar la propiedad FontFamily y puedes referirte a la fuente tanto con el nombre del archivo como con el alias con el que la registraste. Como verás a continuación:
¡Y listo! ¡Nuestra fuente ha sido añadida! 💪
⚠ Si quieres saber más sobre la psicología de las fuentes, te recomiendo este artículo.
¡Espero que este artículo te haya sido útil! 🙋♀️ ¡Hasta la próxima!💚💕
Artículo en inglés: https://askxammy.com/adding-fonts-in-net-maui/
Referencia: https://docs.microsoft.com/en-us/dotnet/maui/user-interface/fonts?WT.mc_id=DT-MVP-50033
