garrick
/
xaringanthemer
ミラー元 https://github.com/gadenbuie/xaringanthemer.git


			
							<!DOCTYPE html>
<!-- Generated by pkgdown: do not edit by hand --><html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Xaringan CSS Theme Generator • xaringanthemer</title>
<!-- jquery --><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script><!-- Bootstrap --><link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/yeti/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha256-U5ZEeKfGNOja007MMD3YBI0A3OSZOQbeG6z2f2Y0hu8=" crossorigin="anonymous"></script><!-- Font Awesome icons --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous">
<!-- clipboard.js --><script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js" integrity="sha256-FiZwavyI2V6+EXO1U+xzLG3IKldpiTFf3153ea9zikQ=" crossorigin="anonymous"></script><!-- sticky kit --><script src="https://cdnjs.cloudflare.com/ajax/libs/sticky-kit/1.1.3/sticky-kit.min.js" integrity="sha256-c4Rlo1ZozqTPE2RLuvbusY3+SU1pQaJC0TjuhygMipw=" crossorigin="anonymous"></script><!-- pkgdown --><link href="../pkgdown.css" rel="stylesheet">
<script src="../pkgdown.js"></script><meta property="og:title" content="Xaringan CSS Theme Generator">
<meta property="og:description" content="">
<meta name="twitter:card" content="summary">
<!-- mathjax --><script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js" integrity="sha256-nvJJv9wWKEm88qvoQl9ekL2J+k/RWIsaSScxxlsrv8k=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/config/TeX-AMS-MML_HTMLorMML.js" integrity="sha256-84DKXVJXs0/F8OTMzX4UR909+jtl4G7SPypPavF+GfA=" crossorigin="anonymous"></script><!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
    <div class="container template-article">
      <header><div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand">
        <a class="navbar-link" href="../index.html">xaringanthemer</a>
        <span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.2.0.9000</span>
      </span>
    </div>

    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
<li>
  <a href="../index.html">
    <span class="fa fa-home fa-lg"></span>
     
  </a>
</li>
<li>
  <a href="../articles/xaringanthemer.html">Get started</a>
</li>
<li>
  <a href="../articles/singles/themes.html">Themes</a>
</li>
<li>
  <a href="../articles/singles/fonts.html">Fonts</a>
</li>
<li>
  <a href="../articles/template-variables.html">Template Variables</a>
</li>
<li>
  <a href="../articles/css-help.html">CSS Help</a>
</li>
<li>
  <a href="../reference/index.html">Reference</a>
</li>
      </ul>
<ul class="nav navbar-nav navbar-right">
<li>
  <a href="https://github.com/gadenbuie/xaringanthemer">
    <span class="fa fa-github fa-lg"></span>
     
  </a>
</li>
<li>
  <a href="https://twitter.com/grrrck">
    <span class="fa fa-twitter fa-lg"></span>
     
  </a>
</li>
      </ul>
</div>
<!--/.nav-collapse -->
  </div>
<!--/.container -->
</div>
<!--/.navbar -->

      
      </header><div class="row">
  <div class="col-md-9 contents">
    <div class="page-header toc-ignore">
      <h1>Xaringan CSS Theme Generator</h1>
            
      
      <small class="dont-index">Source: <a href="https://github.com/gadenbuie/xaringanthemer/blob/master/vignettes/xaringanthemer.Rmd"><code>vignettes/xaringanthemer.Rmd</code></a></small>
      <div class="hidden name"><code>xaringanthemer.Rmd</code></div>

    </div>

    
<!-- This vignette was automatically created from README.Rmd

Please consider removing installation instructions, badges, and
any other README-specific material.
                            
You can include short independent documents in README.Rmd using
the following chunk argument syntax:
child='vignettes/rmdhunks/example1.Rmd'
                            
https://yihui.name/knitr/demo/child/
or read-in chunks stored in an independent R script using knitr::read_chunk()
https://yihui.name/knitr/demo/externalization/ -->
<!-- README.md is generated from README.Rmd. Please edit that file -->
<p>Jump to: <a href="#quick-intro">Quick Intro</a>, <a href="#themes">Themes</a>, <a href="#theme-settings">Theme Settings</a>, <a href="#adding-custom-css">Adding Custom CSS</a>, <a href="#fonts">Fonts</a></p>
<div id="quick-intro" class="section level2">
<h2 class="hasAnchor">
<a href="#quick-intro" class="anchor"></a>Quick Intro</h2>
<!-- Set link to theme-settings, template-variables, theme functions -->
<p>First, add the <code>xaringan-themer.css</code> file to the YAML header of your xaringan slides.</p>
<div class="sourceCode" id="cb1"><pre class="sourceCode yaml"><code class="sourceCode yaml"><a class="sourceLine" id="cb1-1" data-line-number="1"><span class="fu">output:</span></a>
<a class="sourceLine" id="cb1-2" data-line-number="2">  <span class="fu">xaringan:</span><span class="at">:moon_reader:</span></a>
<a class="sourceLine" id="cb1-3" data-line-number="3">    <span class="fu">lib_dir:</span><span class="at"> libs</span></a>
<a class="sourceLine" id="cb1-4" data-line-number="4">    <span class="fu">css:</span><span class="at"> xaringan-themer.css</span></a></code></pre></div>
<p>Then, in a hidden chunk just after the knitr setup chunk, load <strong>xaringanthemer</strong> and try one of the <a href="#themes">theme functions</a>.</p>
<div class="sourceCode" id="cb2"><pre class="sourceCode markdown"><code class="sourceCode markdown"><a class="sourceLine" id="cb2-1" data-line-number="1"><span class="bn">```{r xaringan-themer, include = FALSE}</span></a>
<a class="sourceLine" id="cb2-2" data-line-number="2"><span class="bn">library(xaringanthemer)</span></a>
<a class="sourceLine" id="cb2-3" data-line-number="3"><span class="bn">style_mono_light(</span></a>
<a class="sourceLine" id="cb2-4" data-line-number="4"><span class="bn">  base_color = "#1c5253",</span></a>
<a class="sourceLine" id="cb2-5" data-line-number="5"><span class="bn">  header_font_google = google_font("Josefin Sans"),</span></a>
<a class="sourceLine" id="cb2-6" data-line-number="6"><span class="bn">  text_font_google   = google_font("Montserrat", "300", "300i"),</span></a>
<a class="sourceLine" id="cb2-7" data-line-number="7"><span class="bn">  code_font_google   = google_font("Droid Mono")</span></a>
<a class="sourceLine" id="cb2-8" data-line-number="8"><span class="bn">)</span></a>
<a class="sourceLine" id="cb2-9" data-line-number="9"><span class="bn">```</span></a></code></pre></div>
<p><img src="images/example_mono_light_1c5253.png" width="100%"></p>
<div id="tab-completion" class="section level3">
<h3 class="hasAnchor">
<a href="#tab-completion" class="anchor"></a>Tab Completion</h3>
<p><strong>xaringanthemer</strong> is <kbd>Tab</kbd> friendly – <a href="#theme-settings">use autocomplete to explore</a> the <a href="template-variables.html">template variables</a> that you can adjust in each of the themes!</p>
<p><img src="images/example-rstudio-completion.gif" width="100%"></p>
</div>
<div id="r-markdown-template-in-rstudio" class="section level3">
<h3 class="hasAnchor">
<a href="#r-markdown-template-in-rstudio" class="anchor"></a>R Markdown Template in RStudio</h3>
<p>You can also skip the above and just create a <em>Ninja Themed Presentation</em> from the New R Markdown Document menu in RStudio.</p>
<center>
<img src="images/rmarkdown-template-screenshot.png" width="350px">
</center>
</div>
</div>
<div id="themes" class="section level2">
<h2 class="hasAnchor">
<a href="#themes" class="anchor"></a>Themes</h2>
<div id="monotone" class="section level3">
<h3 class="hasAnchor">
<a href="#monotone" class="anchor"></a>Monotone</h3>
<p>Use these functions to automatically create a consistent color palette for your slides, based around a single color.</p>
<div id="style_mono_light" class="section level4">
<h4 class="hasAnchor">
<a href="#style_mono_light" class="anchor"></a><code><a href="../reference/style_mono_light.html">style_mono_light()</a></code>
</h4>
<p>A light theme based around a single color.</p>
<div class="sourceCode" id="cb3"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb3-1" data-line-number="1"><span class="kw"><a href="../reference/style_mono_light.html">style_mono_light</a></span>(<span class="dt">base_color =</span> <span class="st">"#23395b"</span>)</a></code></pre></div>
<p><img src="images/example_mono_light.png" width="100%"></p>
</div>
<div id="style_mono_dark" class="section level4">
<h4 class="hasAnchor">
<a href="#style_mono_dark" class="anchor"></a><code><a href="../reference/style_mono_dark.html">style_mono_dark()</a></code>
</h4>
<p>A dark theme based around a single color.</p>
<div class="sourceCode" id="cb4"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb4-1" data-line-number="1"><span class="kw"><a href="../reference/style_mono_dark.html">style_mono_dark</a></span>(<span class="dt">base_color =</span> <span class="st">"#cbf7ed"</span>)</a></code></pre></div>
<p><img src="images/example_mono_dark.png" width="100%"></p>
</div>
<div id="style_mono_accent" class="section level4">
<h4 class="hasAnchor">
<a href="#style_mono_accent" class="anchor"></a><code><a href="../reference/style_mono_accent.html">style_mono_accent()</a></code>
</h4>
<p>The default xaringan theme with a single color used for color accents on select elements (headers, bold text, etc.).</p>
<div class="sourceCode" id="cb5"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb5-1" data-line-number="1"><span class="kw"><a href="../reference/style_mono_accent.html">style_mono_accent</a></span>(<span class="dt">base_color =</span> <span class="st">"#43418A"</span>)</a></code></pre></div>
<p><img src="images/example_mono_accent.png" width="100%"></p>
</div>
<div id="style_mono_accent_inverse" class="section level4">
<h4 class="hasAnchor">
<a href="#style_mono_accent_inverse" class="anchor"></a><code><a href="../reference/style_mono_accent_inverse.html">style_mono_accent_inverse()</a></code>
</h4>
<p>An “inverted” default xaringan theme with a single color used for color accents on select elements (headers, bold text, etc.).</p>
<div class="sourceCode" id="cb6"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb6-1" data-line-number="1"><span class="kw"><a href="../reference/style_mono_accent_inverse.html">style_mono_accent_inverse</a></span>(<span class="dt">base_color =</span> <span class="st">"#3C989E"</span>)</a></code></pre></div>
<p><img src="images/example_mono_accent_inverse.png" width="100%"></p>
</div>
</div>
<div id="duotone" class="section level3">
<h3 class="hasAnchor">
<a href="#duotone" class="anchor"></a>Duotone</h3>
<p>These themes build from two (ideally) complementary colors.</p>
<div id="style_duo" class="section level4">
<h4 class="hasAnchor">
<a href="#style_duo" class="anchor"></a><code><a href="../reference/style_duo.html">style_duo()</a></code>
</h4>
<p>A two-colored theme based on a primary and secondary color.</p>
<div class="sourceCode" id="cb7"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb7-1" data-line-number="1"><span class="kw"><a href="../reference/style_duo.html">style_duo</a></span>(<span class="dt">primary_color =</span> <span class="st">"#1F4257"</span>, <span class="dt">secondary_color =</span> <span class="st">"#F97B64"</span>)</a></code></pre></div>
<p><img src="images/example_duo.png" width="100%"></p>
</div>
<div id="style_duo_accent" class="section level4">
<h4 class="hasAnchor">
<a href="#style_duo_accent" class="anchor"></a><code><a href="../reference/style_duo_accent.html">style_duo_accent()</a></code>
</h4>
<p>The default Xaringan theme with two accent colors.</p>
<div class="sourceCode" id="cb8"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb8-1" data-line-number="1"><span class="kw"><a href="../reference/style_duo_accent.html">style_duo_accent</a></span>(<span class="dt">primary_color =</span> <span class="st">"#006747"</span>, <span class="dt">secondary_color =</span> <span class="st">"#CFC493"</span>)</a></code></pre></div>
<p><img src="images/example_duo_accent.png" width="100%"></p>
</div>
<div id="style_duo_accent_inverse" class="section level4">
<h4 class="hasAnchor">
<a href="#style_duo_accent_inverse" class="anchor"></a><code><a href="../reference/style_duo_accent_inverse.html">style_duo_accent_inverse()</a></code>
</h4>
<p>An “inverted” default Xaringan theme with two accent colors.</p>
<div class="sourceCode" id="cb9"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb9-1" data-line-number="1"><span class="kw"><a href="../reference/style_duo_accent_inverse.html">style_duo_accent_inverse</a></span>(<span class="dt">primary_color =</span> <span class="st">"#006747"</span>, <span class="dt">secondary_color =</span> <span class="st">"#CFC493"</span>)</a></code></pre></div>
<p><img src="images/example_duo_accent_inverse.png" width="100%"></p>
</div>
</div>
<div id="solarized" class="section level3">
<h3 class="hasAnchor">
<a href="#solarized" class="anchor"></a>Solarized</h3>
<p>There are also two themes based around the <a href="http://ethanschoonover.com/solarized">solarized color palette</a>, <code><a href="../reference/style_solarized_light.html">style_solarized_light()</a></code> and <code><a href="../reference/style_solarized_dark.html">style_solarized_dark()</a></code>. For both themes, it is advisted to change the syntax highlighting theme to <code>solarized-light</code> or <code>solarized-dark</code> (looks great paired or constrasted).</p>
<div id="style_solarized_light" class="section level4">
<h4 class="hasAnchor">
<a href="#style_solarized_light" class="anchor"></a><code><a href="../reference/style_solarized_light.html">style_solarized_light()</a></code>
</h4>
<div class="sourceCode" id="cb10"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb10-1" data-line-number="1"><span class="kw"><a href="../reference/style_solarized_light.html">style_solarized_light</a></span>()</a></code></pre></div>
<p><img src="images/example_solarized_light.png" width="100%"></p>
</div>
<div id="style_solarized_dark" class="section level4">
<h4 class="hasAnchor">
<a href="#style_solarized_dark" class="anchor"></a><code><a href="../reference/style_solarized_dark.html">style_solarized_dark()</a></code>
</h4>
<div class="sourceCode" id="cb11"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb11-1" data-line-number="1"><span class="kw"><a href="../reference/style_solarized_dark.html">style_solarized_dark</a></span>()</a></code></pre></div>
<p><img src="images/example_solarized_dark.png" width="100%"></p>
<p>To do this, your YAML header should look more-or-less like this:</p>
<div class="sourceCode" id="cb12"><pre class="sourceCode yaml"><code class="sourceCode yaml"><a class="sourceLine" id="cb12-1" data-line-number="1"><span class="fu">output:</span></a>
<a class="sourceLine" id="cb12-2" data-line-number="2">  <span class="fu">xaringan:</span><span class="at">:moon_reader:</span></a>
<a class="sourceLine" id="cb12-3" data-line-number="3">    <span class="fu">lib_dir:</span><span class="at"> libs</span></a>
<a class="sourceLine" id="cb12-4" data-line-number="4">    <span class="fu">css:</span><span class="at"> </span><span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/Extract">[</a></span><span class="st">"xaringan-themer.css"</span><span class="kw">]</span></a>
<a class="sourceLine" id="cb12-5" data-line-number="5">    <span class="fu">nature:</span></a>
<a class="sourceLine" id="cb12-6" data-line-number="6">      <span class="fu">highlightStyle:</span><span class="at"> solarized-dark</span></a>
<a class="sourceLine" id="cb12-7" data-line-number="7">      <span class="fu">highlightLines:</span><span class="at"> true</span></a>
<a class="sourceLine" id="cb12-8" data-line-number="8">      <span class="fu">countIncrementalSlides:</span><span class="at"> false</span></a></code></pre></div>
</div>
</div>
</div>
<div id="theme-settings" class="section level2">
<h2 class="hasAnchor">
<a href="#theme-settings" class="anchor"></a>Theme Settings</h2>
<p>The theme functions listed above are just wrappers around the central function of this package, <code><a href="../reference/style_xaringan.html">style_xaringan()</a></code>. If you want to start from the default <strong>xaringan</strong> theme and make a few modifications, start there.</p>
<p>All of the theme template variables are repeated in each of the theme functions (instead of relying on <code>...</code>) so that you can use autocompletion to find and change the defaults for any theme function. To override the default value of any theme functions, set the appropriate argument in the theme function. A table of all template variables is included in <a href="template-variables.html"><code><a href="../articles/template-variables.html">vignette("template-variables", "xaringanthemer")</a></code></a>.</p>
<p>As an example, try loading <code>xaringanthemer</code>, type out <code>style_duo_theme(</code> and then press <kbd>Tab</kbd> to see all of the theme options.</p>
<p>All of the theme options are named so that you first think of the element you want to change, then the property of that element.</p>
<p>Here are some of the <code>text_</code> theme options:</p>
<ul>
<li><code>text_color</code></li>
<li><code>text_bold_color</code></li>
<li><code>text_slide_number_color</code></li>
<li><code>text_font_size</code></li>
<li><code>text_slide_number_font_size</code></li>
<li><em>and more …</em></li>
</ul>
<p>And here are the title slide theme options:</p>
<ul>
<li><code>title_slide_text_color</code></li>
<li><code>title_slide_background_color</code></li>
<li><code>title_slide_background_image</code></li>
<li><code>title_slide_background_size</code></li>
<li><code>title_slide_background_position</code></li>
</ul>
</div>
<div id="adding-custom-css" class="section level2">
<h2 class="hasAnchor">
<a href="#adding-custom-css" class="anchor"></a>Adding Custom CSS</h2>
<p>You can also add custom CSS classes using the <code>extra_css</code> argument in the theme functions. This argument takes a named list of CSS definitions each containing a named list of CSS property-value pairs.</p>
<div class="sourceCode" id="cb13"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb13-1" data-line-number="1">extra_css &lt;-<span class="st"> </span><span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/list">list</a></span>(</a>
<a class="sourceLine" id="cb13-2" data-line-number="2">  <span class="st">".red"</span>   =<span class="st"> </span><span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/list">list</a></span>(<span class="dt">color =</span> <span class="st">"red"</span>),</a>
<a class="sourceLine" id="cb13-3" data-line-number="3">  <span class="st">".small"</span> =<span class="st"> </span><span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/list">list</a></span>(<span class="st">"font-size"</span> =<span class="st"> "90%"</span>),</a>
<a class="sourceLine" id="cb13-4" data-line-number="4">  <span class="st">".full-width"</span> =<span class="st"> </span><span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/list">list</a></span>(</a>
<a class="sourceLine" id="cb13-5" data-line-number="5">    <span class="dt">display =</span> <span class="st">"flex"</span>,</a>
<a class="sourceLine" id="cb13-6" data-line-number="6">    <span class="dt">width   =</span> <span class="st">"100%"</span>,</a>
<a class="sourceLine" id="cb13-7" data-line-number="7">    <span class="dt">flex    =</span> <span class="st">"1 1 auto"</span></a>
<a class="sourceLine" id="cb13-8" data-line-number="8">  )</a>
<a class="sourceLine" id="cb13-9" data-line-number="9">)</a></code></pre></div>
<p>If you would rather keep your additional css definitions in a separate file, you can call <code><a href="../reference/style_extra_css.html">style_extra_css()</a></code> separately. Just be sure to include your new CSS file in the list of applied files in your YAML header.</p>
<div class="sourceCode" id="cb14"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb14-1" data-line-number="1"><span class="kw"><a href="../reference/style_extra_css.html">style_extra_css</a></span>(<span class="dt">css =</span> extra_css, <span class="dt">outfile =</span> <span class="st">"custom.css"</span>)</a></code></pre></div>
<div class="sourceCode" id="cb15"><pre class="sourceCode css"><code class="sourceCode css"><a class="sourceLine" id="cb15-1" data-line-number="1"><span class="co">/* Extra CSS */</span></a>
<a class="sourceLine" id="cb15-2" data-line-number="2"><span class="fu">.red</span> {</a>
<a class="sourceLine" id="cb15-3" data-line-number="3">  <span class="kw">color</span>: <span class="dv">red</span>;</a>
<a class="sourceLine" id="cb15-4" data-line-number="4">}</a>
<a class="sourceLine" id="cb15-5" data-line-number="5"><span class="fu">.small</span> {</a>
<a class="sourceLine" id="cb15-6" data-line-number="6">  <span class="kw">font-size</span>: <span class="dv">90%</span>;</a>
<a class="sourceLine" id="cb15-7" data-line-number="7">}</a>
<a class="sourceLine" id="cb15-8" data-line-number="8"><span class="fu">.full-width</span> {</a>
<a class="sourceLine" id="cb15-9" data-line-number="9">  <span class="kw">display</span>: flex;</a>
<a class="sourceLine" id="cb15-10" data-line-number="10">  <span class="kw">width</span>: <span class="dv">100%</span>;</a>
<a class="sourceLine" id="cb15-11" data-line-number="11">  <span class="kw">flex</span>: <span class="dv">1</span> <span class="dv">1</span> <span class="dv">auto</span>;</a>
<a class="sourceLine" id="cb15-12" data-line-number="12">}</a></code></pre></div>
<p>This is most helpful when wanting to define helper classes to work with the <a href="https://github.com/gnab/remark">remark.js</a> <code>.class[]</code> syntax. Using the above example, we could color text red <code>.red[like this]</code> or write <code>.small[in smaller font size]</code>.</p>
</div>
<div id="fonts" class="section level2">
<h2 class="hasAnchor">
<a href="#fonts" class="anchor"></a>Fonts</h2>
<!-- Need to set [adding-custom-css] -->
<p>Yihui picked out great fonts for the <a href="https://slides.yihui.name/xaringan/">default xaringan theme</a>, but sometimes you want something new and interesting.</p>
<p><strong>xaringanthemer</strong> makes it easy to use <a href="https://fonts.google.com">Google Fonts</a> in your presentations (well, as long as you have an internet connection) or to fully specify your font files.</p>
<p>To use <a href="https://fonts.google.com">Google Fonts</a>, set the <code>_font_google</code> theme arguments – <code>text_font_google</code>, <code>header_font_google</code>, <code>code_font_google</code> — using the <code><a href="../reference/google_font.html">google_font()</a></code> helper. See <code><a href="../reference/google_font.html">?google_font</a></code> for more info.</p>
<div class="sourceCode" id="cb16"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb16-1" data-line-number="1"><span class="kw"><a href="../reference/style_mono_light.html">style_mono_light</a></span>(</a>
<a class="sourceLine" id="cb16-2" data-line-number="2">  <span class="dt">header_font_google =</span> <span class="kw"><a href="../reference/google_font.html">google_font</a></span>(<span class="st">"Josefin Slab"</span>, <span class="st">"600"</span>),</a>
<a class="sourceLine" id="cb16-3" data-line-number="3">  <span class="dt">text_font_google   =</span> <span class="kw"><a href="../reference/google_font.html">google_font</a></span>(<span class="st">"Work Sans"</span>, <span class="st">"300"</span>, <span class="st">"300i"</span>),</a>
<a class="sourceLine" id="cb16-4" data-line-number="4">  <span class="dt">code_font_google   =</span> <span class="kw"><a href="../reference/google_font.html">google_font</a></span>(<span class="st">"IBM Plex Mono"</span>)</a>
<a class="sourceLine" id="cb16-5" data-line-number="5">)</a></code></pre></div>
<p>If you set an <code>xxx_font_google</code> theme arguments, then <code>xxx_font_family</code>, <code>xxx_font_weight</code> and <code>xxx_font_url</code> are overwritten – where <code>xxx</code> in <code>{header, text, code}</code>. Of course, you can manually set <code>header_font_url</code>, etc., and ignore the <code>header_font_google</code> argument.</p>
<p>For example, suppose you want to use a ligature font for the code font, such as <a href="https://github.com/yihui/xaringan/issues/83">Fira Code</a>. Just set <code>code_font_family</code> and <code>code_font_url</code>!</p>
<div class="sourceCode" id="cb17"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb17-1" data-line-number="1"><span class="kw"><a href="../reference/style_solarized_dark.html">style_solarized_dark</a></span>(</a>
<a class="sourceLine" id="cb17-2" data-line-number="2">  <span class="dt">code_font_family =</span> <span class="st">"Fira Code"</span>,</a>
<a class="sourceLine" id="cb17-3" data-line-number="3">  <span class="dt">code_font_url =</span> <span class="st">"https://cdn.rawgit.com/tonsky/FiraCode/1.204/distr/fira_code.css"</span></a>
<a class="sourceLine" id="cb17-4" data-line-number="4">)</a></code></pre></div>
<p>If you need to import additional fonts for use in <a href="#adding-custom-css">custom CSS definitions</a>, you can use the <code>extra_fonts</code> argument to pass a list of URLs or <code><a href="../reference/google_font.html">google_font()</a></code>s.</p>
<div class="sourceCode" id="cb18"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb18-1" data-line-number="1"><span class="kw"><a href="../reference/style_mono_light.html">style_mono_light</a></span>(</a>
<a class="sourceLine" id="cb18-2" data-line-number="2">  <span class="dt">extra_fonts =</span> <span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/list">list</a></span>(<span class="kw"><a href="../reference/google_font.html">google_font</a></span>(<span class="st">"Sofia"</span>)),</a>
<a class="sourceLine" id="cb18-3" data-line-number="3">  <span class="dt">extra_css =</span> <span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/list">list</a></span>(<span class="st">".title-slide h2"</span> =<span class="st"> </span><span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/list">list</a></span>(<span class="st">"font-family"</span> =<span class="st"> "Sofia"</span>))</a>
<a class="sourceLine" id="cb18-4" data-line-number="4">)</a></code></pre></div>
<hr>
<p><strong>xaringanthemer</strong> was built by <a href="https://www.garrickadenbuie.com">Garrick Aden-Buie</a> (<a href="https://twitter.com/grrrck">@grrrck</a>).</p>
<p>Big thank you to <a href="https://yihui.name">Yihui Xie</a>, especially for <a href="https://github.com/yihui/xaringan">xaringan</a>. Also thanks to <a href="http://gnab.org">Ole Petter Bang</a> for <a href="https://github.com/gnab/remark">remark.js</a>.</p>
<p>Feel free to <a href="https://github.com/gadenbuie/xaringanthemer/issues">file an issue</a> if you find a bug or have a theme suggestion – or better yet, submit a pull request!</p>
</div>
  </div>

  <div class="col-md-3 hidden-xs hidden-sm" id="sidebar">
        <div id="tocnav">
      <h2 class="hasAnchor">
<a href="#tocnav" class="anchor"></a>Contents</h2>
      <ul class="nav nav-pills nav-stacked">
<li><a href="#quick-intro">Quick Intro</a></li>
      <li><a href="#themes">Themes</a></li>
      <li><a href="#theme-settings">Theme Settings</a></li>
      <li><a href="#adding-custom-css">Adding Custom CSS</a></li>
      <li><a href="#fonts">Fonts</a></li>
      </ul>
</div>
      </div>

</div>


      <footer><div class="copyright">
  <p>Developed by <a href="https://www.garrickadenbuie.com">Garrick Aden-Buie</a>.</p>
</div>

<div class="pkgdown">
  <p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.3.0.</p>
</div>
      </footer>
</div>

  
  </body>
</html>