1. Adding Cloud-based Fonts to AccuTheme - This covers hooking up cloud-based fonts like Adobe (TypeKit), Google, and others.

2. Using Your Fonts in Bootstrap - This covers getting your fonts assigned early Bootstrap for use site-wide

3. Adjusting Heading Sizes - Retaining accurate control over the intended output sizes for H1-H6

Reminder: if possible, include a comment with link to the home of asset you are including like the examples below. Future you will thank yourself. It is also an excellent practice to (in the comments) include the original code (see Google example below) recommended by the source, before you convert it for use as a Dnn*Include.

Important: DnnJsInclude and DnnCssInclude have options to do more than is obvious. Need crossorigin? Need the asset near the ending </body> tag? Read the docs here.

Instructions at the bottom. See Museum of the Grand Prairie theme for reference on using MyFonts' Manus.

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?

<%-- Google Fonts 
- https://fonts.google.com/specimen/Merriweather+Sans
- <link href="https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300;0,400;0,700;0,800;1,300;1,400&display=swap" rel="stylesheet">
--%>
<link rel="preconnect" href="https://fonts.gstatic.com">
<dnn:DnnCssInclude
  FilePath="https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300;0,400;0,700;0,800;1,300;1,400&display=swap"
  Priority="2"
  HtmlAttributesAsString="async:async,defer:defer"
  runat="server"
/>

font-family: lato, sans-serif; font-weight: 900; font-style: normal;

If anyone knows how to do "Kits" with Google Fonts (so we don't have to do them one at a time), please share.

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

In the above linked example, we define 2 brand-fonts and then insert the new variable in front of the top level $accu- font variables so we retain the fallback fonts. Note that the fallbacks may not be appropriate to your new (brand) font choices and you should consider adding at least one "best" fallback after your brand font and then letting the AccuTheme defaults come in to play.

In _variables.scss you will find $headings-font-family: null;, this means it will just pick up the default from "above in the cascade" (usually the body). Besides headings, Bootstrap variables has an extensive pre-planned cascade of fonts assignments and should be fairly easy to customize for almost any need with only a few edits/changes.

So using headings as our example and assuming the design calls for an additional font, not already covered by your 2 or 3 main brand fonts, we add another $brand variable (in the same place as the others):

$brand--font-family-headings: "Open Sans";   // see $headings-font-family below

The we just assign it instead of null:

$headings-margin-bottom:      $spacer / 2;
$headings-font-family:        $brand--font-family-headings;
$headings-font-weight:        $font-weight-medium;
$headings-line-height:        $line-height-tight;
$headings-color:              null;

Before you proceed, you should use DevTools/Inspect to determine what your project and font end up with when the output is at 1rem. In most cases it falls somewhere near 16px, but this varies. Since most other size settings are relative, its important to know where you are starting from if you expect your H1 to be exactly 1 inch on a normal screen. Also remember that 96px is 1 inch, though this could change over time to a higher DPI as display resolutions increase and DPI changes. This is a complex issue with a lot of blather online. It is recommended you go with the accepted standards, briefly understand it, and move on. Mozilla's MDN Web Docs, Window.devicePixelRatio is probably the safest quick-read to get a sense of how its used, why it matters, and the Apple Retina "wrench."

Here are the AccuTheme defaults for H1-H6 as of Spring 2021:

$accu--font-size-base:      1rem;
...
$accu--h1-font-size:        $accu--font-size-base * 3.25;   // 52px
$accu--h2-font-size:        $accu--font-size-base * 2.875;  // 46px
$accu--h3-font-size:        $accu--font-size-base * 2.375;  // 38px
$accu--h4-font-size:        $accu--font-size-base * 1.875;  // 30px
$accu--h5-font-size:        $accu--font-size-base * 1.5;    // 24px
$accu--h6-font-size:        $accu--font-size-base * 1.125;  // 18px

So the math is simple, let assume you know that in your compiled, deployed AccuTheme project, that the <p>text in a P tag at 1rem </p> results in 15.75px in your (non-retina) browser at 100% zoom. If the design calls for a 3/4 inch H1 (96px * 0.75 = 72px) then you would update your H1 like this:

$accu--h1-font-size:        $accu--font-size-base * 4.5714;   // 72px

1. Download MyFonts Kit from source and place it in Client folder on the A: Drive

2. Right-click folder to extract folder - 7-Zip > Extract to "Folder Name" (Ex:"MyFonts-Kit-Manus--CCFP-MGP")

3. Open VS Code client project, and start a new branch with an appropriate name.

4. Drag and drop the webFonts folder from that download under AccuTheme (files) > dist folder and you will need to right-click and Upload Folder to the server

5. Under AccuTheme (source) locate the _type.scss file and add the code from the file ClientABBV.css (Ex: CCFP-MGP.css) which is located in that folder you extracted. Copy lines 21 to 29 and paste it at the top of _type.scss under the first line comment.

6. Once that is in place you will need to add "dist/" in front of the URLs in the src line. (Ex: url('dist/webFonts/Manus/font.woff2'))

7. Run the Terminal and visit the site in an incognito window to see if your changes got applied.