GH-171: Major: Change standard font family for CMS

- Use "Benton Sans" as standard CMS font. - Use "Roboto" as backup CMS font. - Preserve "Roboto" as search form font (to match Portal). - Add two sets of font weight variables (consistent naming & shorthand). SEE: [Shared UI - Constants - Font](https://confluence.tacc.utexas.edu/x/cYAZCg)
TACC · Mar 31, 2021 · 1cfbb59 · 1cfbb59
1 parent 5976828
commit 1cfbb59
Show file tree

Hide file tree

Showing 10 changed files with 125 additions and 35 deletions.
diff --git a/taccsite_cms/static/site_cms/css/src/_imports/elements/html-elements.css b/taccsite_cms/static/site_cms/css/src/_imports/elements/html-elements.css
@@ -18,7 +18,7 @@ Styleguide Elements.MainSectioningRoots
 html {
   /* Set base font but support user-defined browser font size */
   /* SEE: https://snook.ca/archives/html_and_css/font-size-with-rem */
-  font-size: 100%; /* 16px */
+  font-size: 100%;
 }
 
 /* The webpage must be at least as tall as the viewport */

diff --git a/taccsite_cms/static/site_cms/css/src/_imports/elements/tacc-search-bar.css b/taccsite_cms/static/site_cms/css/src/_imports/elements/tacc-search-bar.css
@@ -18,6 +18,8 @@ Styleguide Elements.TACC.SearchBar
 
 /* tacc-search-bar.s-search-bar::part(form) { */
 [part="form"] {
+  font-family: "Roboto";
+
   /* Copied from `.container` from Portal */
   /* SEE: https://github.com/TACC/Frontera-Portal/blob/master/client/src/components/DataFiles/DataFilesSearchbar/DataFilesSearchbar.module.css */
   display: flex;

diff --git a/taccsite_cms/static/site_cms/css/src/_imports/generics/fonts.css b/taccsite_cms/static/site_cms/css/src/_imports/generics/fonts.css
@@ -0,0 +1,54 @@
+/*
+Fonts
+
+Load standard fonts for a TACC website.
+
+Usage:
+  ```
+  .something {
+    // BentonSans-MediumItalic
+    font-family: 'Benton Sans';
+    font-weight: 500;
+    font-style: italic;
+  }
+  ```
+
+Reference:
+- [Keep Font CSS Simple](https://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/)
+- [font-weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight)
+- [Shared UI - Constants - Font](https://confluence.tacc.utexas.edu/x/cYAZCg)
+
+Styleguide Generics.Fonts
+*/
+
+@font-face {
+  font-family: 'Benton Sans';
+  src: url("/static/frontera-cms/fonts/archive/BentonSans-Regular.otf") format("opentype");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Benton Sans';
+  src: url("/static/frontera-cms/fonts/archive/BentonSans-Bold.otf") format("opentype");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Benton Sans';
+  src: url("/static/frontera-cms/fonts/archive/BentonSans-Medium.otf") format("opentype");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Benton Sans';
+  src: url("/static/frontera-cms/fonts/archive/BentonSans-MediumItalic.otf") format("opentype");
+  font-weight: 500;
+  font-style: italic;
+  font-display: swap;
+}
diff --git a/...shared/css/src/_imports/settings/font.css → ...te_cms/css/src/_imports/settings/font.css b/...shared/css/src/_imports/settings/font.css → ...te_cms/css/src/_imports/settings/font.css
@@ -1,9 +1,16 @@
 /*
-Fonts
+Font
 
-These are standard fonts for an application.
+Define standard fonts for a TACC website.
 
-Usage: `var(--global-font-size--normal)`
+Usage: `font-size: var(--global-font-size--normal)`
+  ```
+  .something {
+    font-family: var(--global-font-family--serif);
+    font-size: var(--global-font-size--normal);
+    font-weight: var(--global-font-weight--bold); /* or `var(--bold)` *\/
+  }
+  ```
 
 Reference:
 - https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
@@ -13,32 +20,50 @@ Styleguide Settings.CustomProperties.Font
 */
 
 :root {
-  /* stylelint-disable value-keyword-case */
-  --global-font-family--sans: "Roboto", sans-serif;
+
+
+
+  /* Family */
+
+  --global-font-family--sans: "Benton Sans", "Roboto", sans-serif;
   --global-font-family--serif: Times, sans-serif;
   --global-font-family--mono: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
-  /* stylelint-enable value-keyword-case */
 
   --global-font-family: var(--global-font-family--sans);
-}
-/* Update Bootstrap values (not effectual for code, kbd, pre, samp in 4.0) */
-:root {
+
+  /* Family: Overwrite Boostrap */
+
   --font-family-sans-serif: var(--global-font-family--sans);
+  /* CAVEAT: Ineffectual for <code>, <kbd>, <pre>, <samp> */
   --font-family-monospace: var(--global-font-family--mono);
-}
 
-/* Modifers
-    --normal:   standard value
-    --(…)small: smaller value
-    --(…)large: larger value
-*/
-:root {
-  --global-font-size--xx-small: 0.625rem;  /* 10px (if base is 16px) */
-  --global-font-size--x-small: 0.8125rem;  /* 13px (if base is 16px) */
-  --global-font-size--small: 1.0rem;       /* 16px (if base is 16px) */
-  --global-font-size--normal: 1.25rem;     /* 20px (if base is 16px) */
-  --global-font-size--large: 1.5rem;       /* 24px (if base is 16px) */
-  --global-font-size--x-large: 2.0rem;     /* 32px (if base is 16px) */
-  --global-font-size--xx-large: 2.5rem;    /* 40px (if base is 16px) */
-  --global-font-size--xxx-large: 3.0rem;   /* 48px (if base is 16px) */
+
+
+  /* Size */
+  /* NOTE: Defined with Design in 2020, but not yet used for 2021 UI work */
+  /*
+  --global-font-size--xx-small: 0.625rem;  /* 10px (if base is 16px) *\/
+  --global-font-size--x-small: 0.8125rem;  /* 13px (if base is 16px) *\/
+  --global-font-size--small: 1.0rem;       /* 16px (if base is 16px) *\/
+  --global-font-size--normal: 1.25rem;     /* 20px (if base is 16px) *\/
+  --global-font-size--large: 1.5rem;       /* 24px (if base is 16px) *\/
+  --global-font-size--x-large: 2.0rem;     /* 32px (if base is 16px) *\/
+  --global-font-size--xx-large: 2.5rem;    /* 40px (if base is 16px) *\/
+  --global-font-size--xxx-large: 3.0rem;   /* 48px (if base is 16px) *\/
+  */
+
+
+
+  /* Weight */
+  /* SEE: https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */
+
+  /* NOTE: Long names to be consistent (opinions welcome) */
+  --global-font-weight--regular: 400;
+  --global-font-weight--medium: 500;
+  --global-font-weight--bold: 700;
+
+  /* NOTE: Short names to increase adoption (opinions welcome) */
+  --regular: 400;
+  --medium: 500;
+  --bold: 700;
 }
diff --git a/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-article-list.css b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-article-list.css
@@ -44,7 +44,7 @@ Styleguide Trumps.Scopes.ArticleList
   color: var(--global-color-accent--normal);
 
   font-size: 1.6rem;
-  font-family: BentonSansBold;
+  font-weight: var(--bold);
   text-transform: uppercase;
 }
 /* Add a fake short border above title */
@@ -86,7 +86,7 @@ Styleguide Trumps.Scopes.ArticleList
 
   /* Text */
   font-size: 1.2rem;
-  font-family: BentonSansBold;
+  font-weight: var(--bold);
 }
 
 /* Icon */

diff --git a/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-article-preview.css b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-article-preview.css
@@ -17,8 +17,6 @@ Styleguide Trumps.Scopes.ArticlePreview
 .s-article-preview {
   display: flex;
   flex-direction: column;
-
-  font-family: BentonSansRegular;
 }
 
 
@@ -81,7 +79,7 @@ Styleguide Trumps.Scopes.ArticlePreview
   margin-bottom: 0.25em; /* overwrite Bootstrap and browser */
 
   font-size: 1.8rem;
-  font-family: BentonSansBold;
+  font-weight: var(--bold);
   line-height: 2.4rem;
 }
 
@@ -119,7 +117,7 @@ Styleguide Trumps.Scopes.ArticlePreview
   order: 2;
 
   font-size: 1.0rem;
-  font-family: BentonSansBold;
+  font-weight: var(--bold);
 }
 
 /* Children: Metadata: Type */
@@ -128,7 +126,7 @@ Styleguide Trumps.Scopes.ArticlePreview
   order: 1;
 
   font-size: 1.2rem;
-  font-family: BentonSansBold;
+  font-weight: var(--bold);
   text-transform: uppercase;
 }
 

diff --git a/taccsite_cms/static/site_cms/css/src/site.css b/taccsite_cms/static/site_cms/css/src/site.css
@@ -4,11 +4,13 @@
 /* SEE: https://confluence.tacc.utexas.edu/x/IAA9Cw */
 
 /* SETTINGS */
+/* Shared with Portal */
 @import url("../../../site_shared/css/src/_imports/settings/border.css");
 @import url("../../../site_shared/css/src/_imports/settings/color.css");
-@import url("../../../site_shared/css/src/_imports/settings/font.css");
 @import url("../../../site_shared/css/src/_imports/settings/breakpoints.css");
+/* Unique to CMS */
 @import url("_imports/settings/props.space.css");
+@import url("_imports/settings/font.css");
 
 /* GENERICS */
 /* Bootstrap performs much of this */

diff --git a/taccsite_cms/static/site_cms/css/src/site.fonts.css b/taccsite_cms/static/site_cms/css/src/site.fonts.css
@@ -0,0 +1,7 @@
+/* DO NOT ADD STYLES HERE; ONLY IMPORT OTHER STYLESHEETS */
+
+/* Organize via ITCSS */
+/* SEE: https://confluence.tacc.utexas.edu/x/IAA9Cw */
+
+/* GENERICS */
+@import url("_imports/generics/fonts.css");
diff --git a/taccsite_cms/static/site_cms/css/src/site.header.css b/taccsite_cms/static/site_cms/css/src/site.header.css
@@ -9,7 +9,7 @@
 
 /* NOTE: This is already imported in `site.css` */
 /* TODO: Find a way to be modular, but not redundant */
-@import url("../../../site_shared/css/src/_imports/settings/font.css");
+@import url("_imports/settings/font.css");
 
 /* TRUMPS */
 

diff --git a/taccsite_cms/templates/assets_font.html b/taccsite_cms/templates/assets_font.html
@@ -1,9 +1,11 @@
 {# Load web fonts early #}
 {# SEE: https://confluence.tacc.utexas.edu/x/B4COCw #}
+{% load staticfiles %}
 
 
 
-<link id="css-site-font" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
+<link id="css-site-font" rel="stylesheet" href="{% static 'site_cms/css/build/site.fonts.css' %}">
+<link id="css-site-font--backup" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />