gfonts

library(gfonts)

{gfonts} allow you to use a Google font to use it offline in a Shiny application or a R Markdown document. You can download a font via google-webfonts-helper and generate appropriate CSS to use it.

Setup a font to use in your project

In your project directory, use setup_font once to download a font and generate CSS code. For example to use the Roboto font, you can do :

setup_font(
  id = "roboto",
  output_dir = "www",
  variants = "regular"
)

In a Shiny application you can use www/ folder, for R Markdown, create a sub-folder at the same level as your .Rmd file.

setup_font() will create two sub-folders, containing the following files :

www
+-- css
|   \-- roboto.css
\-- fonts
    +-- roboto-v20-latin-regular.eot
    +-- roboto-v20-latin-regular.svg
    +-- roboto-v20-latin-regular.ttf
    +-- roboto-v20-latin-regular.woff
    \-- roboto-v20-latin-regular.woff2

To know all fonts and their ids, you can use get_all_fonts() :

head(get_all_fonts())
#>             id       family
#> 1       roboto       Roboto
#> 2    open-sans    Open Sans
#> 3 noto-sans-jp Noto Sans JP
#> 4   montserrat   Montserrat
#> 5      poppins      Poppins
#> 6         lato         Lato
#>                                                                                                                                          variants
#> 1                                                 100, 100italic, 300, 300italic, regular, italic, 500, 500italic, 700, 700italic, 900, 900italic
#> 2                                                 300, regular, 500, 600, 700, 800, 300italic, italic, 500italic, 600italic, 700italic, 800italic
#> 3                                                                                                 100, 200, 300, regular, 500, 600, 700, 800, 900
#> 4 100, 200, 300, regular, 500, 600, 700, 800, 900, 100italic, 200italic, 300italic, italic, 500italic, 600italic, 700italic, 800italic, 900italic
#> 5 100, 100italic, 200, 200italic, 300, 300italic, regular, italic, 500, 500italic, 600, 600italic, 700, 700italic, 800, 800italic, 900, 900italic
#> 6                                                                 100, 100italic, 300, 300italic, regular, italic, 700, 700italic, 900, 900italic
#>                                                                                         subsets
#> 1                        cyrillic, cyrillic-ext, greek, greek-ext, latin, latin-ext, vietnamese
#> 2 cyrillic, cyrillic-ext, greek, greek-ext, hebrew, latin, latin-ext, math, symbols, vietnamese
#> 3                                              cyrillic, japanese, latin, latin-ext, vietnamese
#> 4                                          cyrillic, cyrillic-ext, latin, latin-ext, vietnamese
#> 5                                                                              latin, latin-ext
#> 6                                                                              latin, latin-ext
#>     category version lastModified popularity defSubset defVariant
#> 1 sans-serif     v32   2024-09-04          1     latin    regular
#> 2 sans-serif     v40   2024-09-04          2     latin    regular
#> 3 sans-serif     v53   2024-08-07          3     latin    regular
#> 4 sans-serif     v26   2024-09-04          4     latin    regular
#> 5 sans-serif     v21   2024-09-04          5     latin    regular
#> 6 sans-serif     v24   2024-09-04          6     latin    regular

Use a font

To use a downloaded font, you can use in your UI or in a chunk :

use_font("roboto", "www/css/roboto.css")

First argument is the id of font downloaded, second is path to CSS file generated.

An other solution in Shiny application is to import the CSS file in a link tag and add a style tag:

fluidPage(
  
  tags$link(rel = "stylesheet", type = "text/css", href = "css/roboto.css"),
  tags$style("body {font-family: 'Roboto', sans-serif;}")
  
)

In Markdown, import CSS file in yaml header, and add a CSS chunk :

---
output: 
  html_document:
    css: assets/css/roboto.css
---


``` css
body {font-family: 'Roboto', sans-serif;}
```

Download a font

If you only want to download a font, you can use:

download_font(
  id = "roboto",
  output_dir = "azerty",
  variants = c("regular", "300italic", "700")
)

Generate CSS

To download CSS code to import a font in HTML, you can use:

generate_css("roboto", "regular", font_dir = "path/to/font")
#> @font-face {
#>   font-family: 'Roboto';
#>   font-style: normal;
#>   font-weight: 400;
#>   src: url('path/to/roboto-v32-latin-regular.eot'); /* IE9 Compat Modes */
#>   src: local(''), local(''),
#>        url('path/to/roboto-v32-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
#>        url('path/to/roboto-v32-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
#>        url('path/to/roboto-v32-latin-regular.woff') format('woff'), /* Modern Browsers */
#>        url('path/to/roboto-v32-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
#>        url('path/to/roboto-v32-latin-regular.svg#\1') format('svg'); /* Legacy iOS */
#> }

The path must be relative to the one were this code is saved.