{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            lato            Lato
#> 5      montserrat      Montserrat
#> 6 source-sans-pro Source Sans Pro
#>                                                                                                                                          variants
#> 1                                                 100, 100italic, 300, 300italic, regular, italic, 500, 500italic, 700, 700italic, 900, 900italic
#> 2                                                                 300, 300italic, regular, italic, 600, 600italic, 700, 700italic, 800, 800italic
#> 3                                                                                                                100, 300, regular, 500, 700, 900
#> 4                                                                 100, 100italic, 300, 300italic, regular, italic, 700, 700italic, 900, 900italic
#> 5 100, 100italic, 200, 200italic, 300, 300italic, regular, italic, 500, 500italic, 600, 600italic, 700, 700italic, 800, 800italic, 900, 900italic
#> 6                                                 200, 200italic, 300, 300italic, regular, italic, 600, 600italic, 700, 700italic, 900, 900italic
#>                                                                  subsets
#> 1 cyrillic, cyrillic-ext, greek, greek-ext, latin, latin-ext, vietnamese
#> 2 cyrillic, cyrillic-ext, greek, greek-ext, latin, latin-ext, vietnamese
#> 3                                                        japanese, latin
#> 4                                                       latin, latin-ext
#> 5                   cyrillic, cyrillic-ext, latin, latin-ext, vietnamese
#> 6 cyrillic, cyrillic-ext, greek, greek-ext, latin, latin-ext, vietnamese
#>     category version lastModified popularity defSubset defVariant
#> 1 sans-serif     v20   2019-07-24          1     latin    regular
#> 2 sans-serif     v18   2020-09-15          2     latin    regular
#> 3 sans-serif     v28   2020-11-12          3     latin    regular
#> 4 sans-serif     v17   2020-09-15          4     latin    regular
#> 5 sans-serif     v15   2020-09-15          5     latin    regular
#> 6 sans-serif     v14   2020-09-15          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-v20-latin-regular.eot'); /* IE9 Compat Modes */
#>   src: local('Roboto'), local('Roboto-Regular'),
#>        url('path/to/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
#>        url('path/to/roboto-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
#>        url('path/to/roboto-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
#>        url('path/to/roboto-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
#>        url('path/to/roboto-v20-latin-regular.svg#\1') format('svg'); /* Legacy iOS */
#> }

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