Branding and Typography

For your Quarto website

Published

August 2, 2025

Modified

October 18, 2026

1 Setting up R Packages

library(tidyverse)
library(ggformula)
library(sysfonts) ## use custom fonts (need to be installed on your OS)
library(systemfonts) # Thomas Pederson's recent font management package
library(showtext) ## add google fonts to plots
library(ggtext) ## add improved text rendering to ggplot2
##
library(ggrepel) ## Text-repelled labels
library(marquee) ## Annotations with fonts in ggplot

We have just seen how to use different fonts and themes to make our plots look more polished and professional.

Now, we may also want to to add custom colours, styles, and fonts to our websites. For instance you may want your website to look this: Project Peasants !!

We will use a simple and effective way in Quarto to achieve this sort of branding and typographic identity.

2 Selecting a Bootswatch Theme

When you created your R Project using Quarto, you would have noticed a _quarto.yml file at the . It may look like this:

_quarto.yml
project:
  type: website

website:
  title: "My Wall"
  navbar:
    left:
      - href: index.qmd
        text: Home
      - about.qmd

format:
  html:
    theme:
      - cosmo
      - brand
    css: styles.css
    toc: true

The theme shows that we are using the cosmo Bootswatch theme, and also a brand theme. ( We will discuss brand shortly ).

Bootswatch themes are built in to Quarto, and you can select from a variety of themes. You can see the list of available themes here. Choose one that suits your taste; for instance our course website uses the flatly theme. Check if the chosen theme looks good to you in both light and dark versions.

Play with the setting in theme in _quarto.yml to see the website change when you render and preview it again.

3 Branding and Typography: _brand.yml

Sometimes the Bootswatch themes are exactly what you want. In some other cases, one may need change a few default colors and fonts for the website.

So, exactly in a like manner to how we set up a _setup.qmd file to set up Chart related themes and fonts, we can also set up a _brand.yml file to set up our fonts and colors for the website.

Let us cut to the chase and look at a sample _brand.yml file, pasted below:

_brand.yml
meta:
  name:
    full: Project Peasants
    short: Project Peasants
  link:
    home: https://project-peasants.netlify.app
    docs: https://project-peasants.netlify.app
    github: https://github.com/arvindvenkatadri/NewQuartoBlog
    bluesky: 
    twitter: 
    linkedin: 
    facebook: 
  description: 
    Project Peasants is a highly inspirational website for the use and guidance of SMI Peasants.
  founded: 1947
  
color:
  palette:
    dark-grey: "#222222"
    blue: "#ddeaf1"
  background: blue
  foreground: dark-grey
  primary: black

logo: 
  medium: logo.png

typography:
  fonts:
    - family: Open Sans
      source: google
      
    - family: Jura
      source: google

    - family: Roboto Condensed
      source: google

    - family: Fira Code
      source: google

  base: Open Sans
  headings: Jura
  monospace: 
    family: Roboto Condensed
    
  monospace-block: 
    family: Fira Code
    weight: "bold"
    
  link: 
    decoration: underline

This file needs to be simply saved as the <project root>/_brand.yml of your Quarto R Project, and referred in the theme section of your _quarto.yml.

Note that there care colour and font specifications within _brand.yml, AND that it is referenced after the Bootswatch theme in the _quarto.yml. Hence it supersedes the default colours and fonts used by the chosen Bootswatch theme and superimposes its own. Which is exactly what we want.

Try not go overboard with the_brand.yml !!! Just a few changes that are necessary and that is all you need.

4 Does it all work?

Let us take a look at the Project Peasant website to see how the fonts and colors are applied.)

View webpage in full screen

5 Wait, but Why?

  • Using appropriate fonts on our websites can make them more readable and visually appealing.
  • They may be mandated by clients, as part of their corporate identity

6 Conclusions

In this module, we have learned how to use custom fonts on our websites using the _brand.yml feature of Quarto.

ImportantOur OWN fonts using _brand.yml

It is possible to use locally sourced, or purchased fonts also in a _brand.yml!

7 References

  1. Posit. Unified Branding with _brand.yml. https://posit-dev.github.io/brand-yml/
  2. Thomas Lin Pedersen. https://www.tidyverse.org/blog/2025/05/fonts-in-r/
  3. Winston Chang. R Cookbook (2nd Edition). O’Reilly Media, 2019. http://www.cookbook-r.com/Graphs/Fonts/
R Package Citations
Package Version Citation
scico 1.5.0 Pedersen and Crameri (2023)
showtext 0.9.8 Qiu (2026)
sysfonts 0.8.9 Qiu and See file AUTHORS for details. (2024)
Pedersen, Thomas Lin, and Fabio Crameri. 2023. scico: Colour Palettes Based on the Scientific Colour-Maps. https://doi.org/10.32614/CRAN.package.scico.
Qiu, Yixuan. 2026. showtext: Using Fonts More Easily in r Graphs. https://doi.org/10.32614/CRAN.package.showtext.
Qiu, Yixuan, and authors/contributors of the included fonts. See file AUTHORS for details. 2024. sysfonts: Loading Fonts into r. https://doi.org/10.32614/CRAN.package.sysfonts.
NoteNew Package systemfonts

There is also a more recent, and comprehensive package called systemfonts We will postpone this for a later presentation (mainly because I am still figuring it out. 😅 )

ImportantGDPR Compliance

Using fonts that are already installed on your computer, or hosted on your webserver, is GDPR compliant. Using fonts directly from Google may not be, as it may involve sending data to Google servers every time your website is loaded by a visitor.

Back to top