Usando tipografías personalizadas en aplicaciones Shiny
11/5/2026
Las tipografías son el aspecto principal de la apariencia de una aplicación, junto a su paleta de colores.. Elegir bien la tipografía de tu app puede hacer que tu app se vea más profesional y atractiva, y que se diferencie del resto.
Publicaciones relacionadas
En este tutorial veremos cómo personalizar las tipografías de tus aplicaciones Shiny usando el
paquete {bslib}, y cómo descargarlas localmente para que funcionen sin necesidad de conectarse a servidores de Google.
Publicaciones relacionadas
Tipografía general de la aplicación
La forma más sencilla de cambiar la tipografía de tu app Shiny es al definir el tema usando bs_theme() del paquete {bslib}, que ya vimos en el
tutorial de temas de colores.
La función font_google() permite cargar cualquier tipografía desde
Google Fonts y aplicarla a toda la aplicación:
library(shiny)
library(bslib)
ui <- page_fluid(
theme = bs_theme(
base_font = font_google("Manrope")
),
h1("Título de la app"),
p("Este texto usa la tipografía Manrope.")
)
server <- function(input, output, session) {
}
shinyApp(ui, server)
Con base_font definimos la tipografía principal que se usará en toda la aplicación, incluyendo párrafos, botones, selectores y otros elementos de la interfaz. También se puede definir por separado una tipografía para titulares, permitiendo usar un par tipográfico que le de aún más personalidad a tu app. Usualmente queda elegante usar tipografías con serifa para títulos, y sans-serif para textos generales:
library(shiny)
library(bslib)
ui <- page_fluid(
theme = bs_theme(
base_font = font_google("Manrope"),
heading_font = font_google("Domine")
),
h1("Título de la app que usa Domine"),
p("Este texto usa la tipografía Manrope.")
)
server <- function(input, output, session) {
}
shinyApp(ui, server)
Tipografías con respaldo
Es buena práctica definir fuentes de respaldo (fallback), por si la tipografía de Google no se puede cargar. Puedes hacerlo con font_collection():
theme = bs_theme(
base_font = font_collection(
font_google("Manrope"),
"Helvetica", "Arial", "sans-serif"
)
)
Si la fuente Manrope no carga por alguna razón, el navegador usará Helvetica, luego Arial, y finalmente cualquier fuente sans-serif disponible.
Tipografías descargadas localmente
Cuando usamos font_google(), la tipografía se carga desde servidores de Google cada vez que alguien abre la app. Esto puede resultar conveniente, pero es poco eficiente. Si descargamos las tipografías podemos hacer que la app se cargue más rápido, y a su vez hacemos que la app tenga un punto menos de fallo.
El paquete {gfonts} nos ayuda a descargar tipografías desde Google Fonts:
install.packages("gfonts")
Con setup_font() vamos a descargar los archivos de la tipografía a la carpeta www/ de nuestra app:
gfonts::setup_font("manrope", "www/")
Usar la tipografía descargada
Luego, en la interfaz de la app (UI), usamos use_font() para cargar el archivo CSS de la tipografía, y la aplicamos al tema con bs_theme():
library(shiny)
library(bslib)
ui <- page_fluid(
gfonts::use_font("manrope", "www/css/manrope.css"),
theme = bs_theme(
base_font = "manrope"
),
h1("Título de la app"),
p("Este texto usa la tipografía Manrope, descargada localmente.")
)
server <- function(input, output, session) {
}
shinyApp(ui, server)
De esta forma la tipografía se carga desde los archivos locales, sin depender de una conexión a internet!
Publicaciones relacionadas
Publicaciones sobre shiny
