# Usando tipografías personalizadas en aplicaciones Shiny

> En este post aprenderás a personalizar las tipografías de tus aplicaciones Shiny. Veremos cómo cargar tipografías de Google Fonts y cómo descargarlas localmente para que funcionen sin conexión.

- URL: https://bastianolea.rbind.io/blog/shiny_tipografias/
- Fecha: 2026-05-11
- Autor: Bastián Olea Herrera
- Etiquetas: shiny

---

Las tipografías son el aspecto principal de la apariencia de una aplicación, [junto a su paleta de colores.](https://bastianolea.rbind.io/blog/shiny_temas/). 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.

**Publicación relacionada:** [Tutorial: Crea aplicaciones web interactivas en R con Shiny](https://bastianolea.rbind.io/blog/shiny/index.md): Shiny es un paquete para desarrollar aplicaciones web interactivas con R, generalmente centradas en el análisis y visualización de datos. Shiny le da vida a todo lo que hayas desarrollado con R sin…

En este tutorial veremos cómo personalizar las tipografías de tus aplicaciones Shiny usando el [paquete `{bslib}`](https://rstudio.github.io/bslib/), y cómo descargarlas localmente para que funcionen sin necesidad de conectarse a servidores de Google.

**Publicación relacionada:** [Temas de colores personalizados en apps Shiny](https://bastianolea.rbind.io/blog/shiny_temas/index.md): En este post muestro lo básico para personalizar la apariencia de tus aplicaciones Shiny con temas de colores personalizados usando el paquete {bslib}, y además cómo hacer que los gráficos {ggplot2}…

## 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.](https://bastianolea.rbind.io/blog/shiny_temas/)

La función `font_google()` permite cargar cualquier tipografía desde [Google Fonts](https://fonts.google.com/) y aplicarla a toda la aplicación:

```r {hl_lines=["1-7"]}
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:

```r {hl_lines=["5-8"]}
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)
```

![](https://bastianolea.rbind.io/blog/shiny_tipografias/shiny_tipografia_featured.png)

> **Nota:** Puedes explorar las tipografías disponibles en [fonts.google.com](https://fonts.google.com/)

### 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()`:

```r
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:

``` r
install.packages("gfonts")
```

Con `setup_font()` vamos a **descargar** los archivos de la tipografía a la carpeta `www/` de nuestra app:

``` r
gfonts::setup_font("manrope", "www/")
```

> **Nota:** La carpeta `www/` es una carpeta de las apps Shiny: todo lo que esté dentro estará accesible para el navegador, como las tipografías!

### 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()`:

```r {hl_lines=["4-5", "7-9"]}
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!

#### Ejemplo

Para usar localmente la tipografía de Google [Hedvig Letters Sans](https://fonts.google.com/specimen/Hedvig+Letters+Sans?preview.script=Latn), descargarla con:

```r
gfonts::setup_font("hedvig-letters-sans", "www/")
```

Luego en UI:

```r
gfonts::use_font(
    id = "hedvig-letters-sans",
    css_path = "www/css/hedvig-letters-sans.css",
    css = "font-family: 'Hedvig Letters Sans';"
  ),
```

Y en el tema:

```r
theme = bs_theme(
    # ...
    base_font = "hedvig-letters-sans",
    heading_font = "Hedvig Letters Sans",
  ),
```

**Publicación relacionada:** [Tipografías personalizadas en gráficos {ggplot2}](https://bastianolea.rbind.io/blog/ggplot_tipografias/index.md): ¿Quieres darle un toque personalizado a tus gráficos? O tal vez alinearlos mejor al mensaje que quieres entregar, o a los lineamientos estéticos de tu organización. En esta breve guía te explico cómo…

**Publicaciones sobre shiny:**

- [Probando visores de mapas interactivos en R con {mapgl}](https://bastianolea.rbind.io/blog/2026-07-29/index.md)
- [Crea un chatbot de inteligencia artificial con R](https://bastianolea.rbind.io/blog/shinychat/index.md)
- [Tutorial: Crea aplicaciones web interactivas en R con Shiny](https://bastianolea.rbind.io/blog/shiny/index.md)
- [Medir el ancho de una aplicación Shiny como una variable reactiva y usarla para adaptar los contenidos de la app](https://bastianolea.rbind.io/blog/shiny_ancho/index.md)
- [Plataforma de análisis: Índice de Brechas de Género](https://bastianolea.rbind.io/blog/indice_brechas_genero/index.md)