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         lato         Lato
#> 6      poppins      Poppins
#>                                                                                                                                          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, 300, regular, 500, 700, 900
#> 4 100, 200, 300, regular, 500, 600, 700, 800, 900, 100italic, 200italic, 300italic, italic, 500italic, 600italic, 700italic, 800italic, 900italic
#> 5                                                                 100, 100italic, 300, 300italic, regular, italic, 700, 700italic, 900, 900italic
#> 6 100, 100italic, 200, 200italic, 300, 300italic, regular, italic, 500, 500italic, 600, 600italic, 700, 700italic, 800, 800italic, 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, vietnamese
#> 3                                                                japanese, latin
#> 4                           cyrillic, cyrillic-ext, latin, latin-ext, vietnamese
#> 5                                                               latin, latin-ext
#> 6                                                   devanagari, latin, latin-ext
#>     category version lastModified popularity defSubset defVariant
#> 1 sans-serif     v30   2022-09-22          1     latin    regular
#> 2 sans-serif     v34   2022-09-22          2     latin    regular
#> 3 sans-serif     v42   2022-09-27          3     latin    regular
#> 4 sans-serif     v25   2022-09-22          4     latin    regular
#> 5 sans-serif     v23   2022-09-22          5     latin    regular
#> 6 sans-serif     v20   2022-09-22          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-v30-latin-regular.eot'); /* IE9 Compat Modes */
#>   src: local(''), local(''),
#>        url('path/to/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
#>        url('path/to/roboto-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
#>        url('path/to/roboto-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
#>        url('path/to/roboto-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
#>        url('path/to/roboto-v30-latin-regular.svg#\1') format('svg'); /* Legacy iOS */
#> }

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