<h2 class="toc">Custom Fonts</h2>

<p>You can set change the fonts using these Bootstrap variables:</p>

<ul>
  <li><a class="urlfilter" href="?font-family-base=roboto#custom-fonts"><code>?font-family-base=roboto</code></a></li>
  <li><a class="urlfilter" href="?headings-font-family=roboto-condensed#custom-fonts"><code>?headings-font-family=roboto-condensed</code></a></li>
  <li><a href=".#custom-fonts">Reset fonts</a></li>
</ul>

<p>You can pick the font value from the pre-defined fonts defined here:</p>
<ul>
  {% for font_name, font_conf in ui_config.fonts.items() %}
    <li><code>{{ font_name }}</code>: {{ font_conf.stack }}
      {% if 'google' in font_conf %}
        (<a href="https://fonts.google.com/specimen/{{ font_conf.google }}" target="_blank" rel="noopener">Google</a>)
      {% end %}
    </li>
  {% end %}
</ul>

<p>You can also pick your font stack directly:</p>
<ul>
  <li><a href="?font-family-base=Georgia,Times,&quot;Times+New+Roman&quot;,serif">?font-family-base=Georgia,Times,"Times New Roman",serif</a></li>
  <li><a href="?font-family-base=Tahoma,Verdana,Segoe,sans-serif">?font-family-base=Tahoma,Verdana,Segoe,sans-serif</a></li>
  <li><a href="?heading-font-family=&quot;Gill+Sans&quot;,&quot;Gill+Sans+MT&quot;,Calibri,sans-serif">?heading-font-family="Gill Sans","Gill Sans MT",Calibri,sans-serif</a></li>
  <li><a href=".">Reset fonts</a></li>
</ul>

<p>To use a custom font, import it before your import <code>bootstraptheme.css</code>. For example:</p>

{% apply only_source %}
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<link href="ui/bootstraptheme.css?font-family-base=Roboto,sans-serif" rel="stylesheet">
{% end %}

{% apply only_source %}
<link href="https://fonts.googleapis.com/css?family=Architects+Daughter" rel="stylesheet">
<link href="ui/bootstraptheme.css?font-family-base=&quot;Architects Daughter&quot;,cursive" rel="stylesheet">
{% end %}
