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.
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 roboto-condensed Roboto Condensed
#> 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 300, 300italic, regular, italic, 700, 700italic
#> 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 v27 2021-04-05 1 latin regular
#> 2 sans-serif v23 2021-08-10 2 latin regular
#> 3 sans-serif v36 2021-09-14 3 latin regular
#> 4 sans-serif v20 2021-08-10 4 latin regular
#> 5 sans-serif v18 2021-08-10 5 latin regular
#> 6 sans-serif v19 2020-09-15 6 latin regular
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(
$link(rel = "stylesheet", type = "text/css", href = "css/roboto.css"),
tags$style("body {font-family: 'Roboto', sans-serif;}")
tags
)
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;}
```
If you only want to download a font, you can use:
download_font(
id = "roboto",
output_dir = "azerty",
variants = c("regular", "300italic", "700")
)
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-v27-latin-regular.eot'); /* IE9 Compat Modes */
#> src: local(''), local(''),
#> url('path/to/roboto-v27-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
#> url('path/to/roboto-v27-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
#> url('path/to/roboto-v27-latin-regular.woff') format('woff'), /* Modern Browsers */
#> url('path/to/roboto-v27-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
#> url('path/to/roboto-v27-latin-regular.svg#\1') format('svg'); /* Legacy iOS */
#> }
The path must be relative to the one were this code is saved.