EVOLUTION-MANAGER
Edit File: font_face.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>R: Helpers for importing web fonts</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="R.css" /> </head><body> <table width="100%" summary="page for font_google {sass}"><tr><td>font_google {sass}</td><td style="text-align: right;">R Documentation</td></tr></table> <h2>Helpers for importing web fonts</h2> <h3>Description</h3> <p>Include font file(s) when defining a Sass variable that represents a CSS <code>font-family</code> property. </p> <h3>Usage</h3> <pre> font_google( family, local = TRUE, cache = sass_file_cache(sass_cache_context_dir()), wght = NULL, ital = NULL, display = c("swap", "auto", "block", "fallback", "optional") ) font_link(family, href) font_face( family, src, weight = NULL, style = NULL, display = c("swap", "auto", "block", "fallback", "optional"), stretch = NULL, variant = NULL, unicode_range = NULL ) font_collection(..., default_flag = TRUE, quote = TRUE) is_font_collection(x) </pre> <h3>Arguments</h3> <table summary="R argblock"> <tr valign="top"><td><code>family</code></td> <td> <p>A character string with a <em>single</em> font family name.</p> </td></tr> <tr valign="top"><td><code>local</code></td> <td> <p>Whether or not download and bundle local (woff) font files.</p> </td></tr> <tr valign="top"><td><code>cache</code></td> <td> <p>A <code><a href="sass_file_cache.html">sass_file_cache()</a></code> object (or, more generally, a file caching class with <code style="white-space: pre;">$get_file()</code> and <code style="white-space: pre;">$set_file()</code> methods). Set this argument to <code>FALSE</code> or <code>NULL</code> to disable caching.</p> </td></tr> <tr valign="top"><td><code>wght</code></td> <td> <p>One of the following: </p> <ul> <li> <p><code>NULL</code>, the default weight for the <code>family</code>. </p> </li> <li><p> A character string defining an <a href="https://developers.google.com/fonts/docs/css2#axis_ranges">axis range</a> </p> </li> <li><p> A numeric vector of desired font weight(s). </p> </li></ul> </td></tr> <tr valign="top"><td><code>ital</code></td> <td> <p>One of the following: </p> <ul> <li> <p><code>NULL</code>, the default <code>font-style</code> for the <code>family</code>. </p> </li> <li> <p><code>0</code>, meaning <code>font-style: normal</code> </p> </li> <li> <p><code>1</code>, meaning <code>font-style: italic</code> </p> </li> <li> <p><code>c(0, 1)</code>, meaning both <code>normal</code> and <code>italic</code> </p> </li></ul> </td></tr> <tr valign="top"><td><code>display</code></td> <td> <p>A character vector for the <code>font-display</code> <code style="white-space: pre;">@font-face</code> property.</p> </td></tr> <tr valign="top"><td><code>href</code></td> <td> <p>A URL resource pointing to the font data.</p> </td></tr> <tr valign="top"><td><code>src</code></td> <td> <p>A character vector for the <code>src</code> <code style="white-space: pre;">@font-face</code> property. Beware that is character strings are taken verbatim, so careful quoting and/or URL encoding may be required.</p> </td></tr> <tr valign="top"><td><code>weight</code></td> <td> <p>A character (or numeric) vector for the <code>font-weight</code> <code style="white-space: pre;">@font-face</code> property.</p> </td></tr> <tr valign="top"><td><code>style</code></td> <td> <p>A character vector for the <code>font-style</code> <code style="white-space: pre;">@font-face</code> property.</p> </td></tr> <tr valign="top"><td><code>stretch</code></td> <td> <p>A character vector for the <code>font-stretch</code> <code style="white-space: pre;">@font-face</code> property.</p> </td></tr> <tr valign="top"><td><code>variant</code></td> <td> <p>A character vector for the <code>font-variant</code> <code style="white-space: pre;">@font-face</code> property.</p> </td></tr> <tr valign="top"><td><code>unicode_range</code></td> <td> <p>A character vector for <code>unicode-range</code> <code style="white-space: pre;">@font-face</code> property.</p> </td></tr> <tr valign="top"><td><code>...</code></td> <td> <p>a collection of <code>font_google()</code>, <code>font_link()</code>, <code>font_face()</code>, and/or character vector(s) (i.e., family names to include in the CSS <code>font-family</code> properly). Family names are automatically quoted as necessary.</p> </td></tr> <tr valign="top"><td><code>default_flag</code></td> <td> <p>whether or not to include a <code>!default</code> when converted to a Sass variable with <code><a href="as_sass.html">as_sass()</a></code>.</p> </td></tr> <tr valign="top"><td><code>quote</code></td> <td> <p>whether or not to attempt automatic quoting of family names.</p> </td></tr> <tr valign="top"><td><code>x</code></td> <td> <p>test whether <code>x</code> is a <code>font_collection()</code>, <code>font_google()</code>, <code>font_link()</code>, or <code>font_face()</code> object.</p> </td></tr> </table> <h3>Details</h3> <p>These helpers <strong>must be used the named list approach to variable definitions</strong>, for example: </p> <div class="sourceCode"><pre>list( list("font-variable" = font_google("Pacifico")), list("body{font-family: $font-variable}") ) </pre></div> <h3>Value</h3> <p>a <code><a href="sass_layer.html">sass_layer()</a></code> holding an <code><a href="../../htmltools/html/htmlDependency.html">htmltools::htmlDependency()</a></code> which points to the font files. </p> <h3>Font fallbacks</h3> <p>By default, <code>font_google()</code> downloads, caches, and serves the relevant font file(s) locally. By locally serving files, there's a guarantee that the font can render in any client browser, even when the client doesn't have internet access. However, when importing font files remotely (i.e., <code>font_google(..., local = FALSE)</code> or <code>font_link()</code>), it's a good idea to provide fallback font(s) in case the remote link isn't working (e.g., maybe the end user doesn't have an internet connection). To provide fallback fonts, use <code><a href="font_face.html">font_collection()</a></code>, for example: </p> <div class="sourceCode"><pre>pacifico <- font_google("Pacifico", local = FALSE) as_sass(list( list("font-variable" = font_collection(pacifico, "system-ui")), list("body{font-family: $font-variable}") )) </pre></div> <h3>Default flags</h3> <p>These font helpers encourage best practice of adding a <code>!default</code> to Sass variable definitions, but the flag may be removed via <code>font_collection()</code> if desired. </p> <div class="sourceCode"><pre>as_sass(list("font-variable" = pacifico)) #> $font-variable: Pacifico !default; as_sass(list("font-variable" = font_collection(pacifico, default_flag = F))) #> $font-variable: Pacifico; </pre></div> <h3>Serving non-Google fonts locally</h3> <p>Non-Google fonts may also be served locally with <code>font_face()</code>, but it requires downloading font file(s) and pointing <code>src</code> to the right location on disk. If you want <code>src</code> to be a relative file path (you almost certainly do), then you'll need to mount that resource path using something like <code><a href="../../shiny/html/resourcePaths.html">shiny::addResourcePath()</a></code> (for a shiny app) or <code>servr::httd()</code> (for static HTML). </p> <h3>References</h3> <p><a href="https://developers.google.com/fonts/docs/css2">https://developers.google.com/fonts/docs/css2</a> </p> <p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face">https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face</a> </p> <p><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts">https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts</a> </p> <h3>Examples</h3> <pre> library(htmltools) my_font <- list("my-font" = font_google("Pacifico")) hello <- tags$body( "Hello", tags$style( sass( list( my_font, list("body {font-family: $my-font}") ) ) ) ) if (interactive()) { browsable(hello) } # Three different yet equivalent ways of importing a remotely-hosted Google Font a <- font_google("Crimson Pro", wght = "200..900", local = FALSE) b <- font_link( "Crimson Pro", href = "https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@200..900" ) url <- "https://fonts.gstatic.com/s/crimsonpro/v13/q5uDsoa5M_tv7IihmnkabARboYF6CsKj.woff2" c <- font_face( family = "Crimson Pro", style = "normal", weight = "200 900", src = paste0("url(", url, ") format('woff2')") ) </pre> <hr /><div style="text-align: center;">[Package <em>sass</em> version 0.4.2 <a href="00Index.html">Index</a>]</div> </body></html>