Fonts

How do I add on-brand fonts to the project and get Boostrap to use some of them?

Quick Overview

This covers hooking up only TypeKit, Adobe Fonts.

In brief we use DNN skin objects (usually in _preheader.ascx) to tell DNN's page build to get the CSS item on the page and then just wire things up in to Bootstrap in src/styles/theme/_variables.scss in the Typography section.

Temporary example of a simple Intranet with on-brand fonts defined in Adobe Fonts (TypeKit).

Get the TypeKit CSS "on the page" using DnnCssInclude

<%-- Adobe Fonts (TypeKit)
- https://fonts.adobe.com/my_fonts#web_projects-section
- kit includes font1, font2a, font2b (so far)
--%>
<dnn:DnnCssInclude
  FilePath="https://use.typekit.net/ggg8eee.css"
  Priority="1"
  runat="server"
/>

Note: should priority be 1?

DnnCssInclude - docs and more examples.

Brand-define the fonts for self-documentation and get them used everywhere by Bootstrap, in this case we are setting Lato as the used-everywhere sans-serif font and then also added roboto-monospace for any pre/code needs

src/styles/theme/_variables.scss