feat(fonts): add Lyon font

The Roboto font is stored in **/projects/canopy/src/assets/fonts/roboto** as normal and is included in the distributed Canopy package.

The Lyon font files are stored in **/assets/fonts** and ommitted from the distributed package via the Webpack config. The `css-loader` options prevent it from transforming any URL referencing the Lyon font. This means the path will stay as relative to the base URL of the consuming application (/assets/fonts), therefore looking in the assets directory of consuming app.

docs/CONTRIBUTING.md

@@ -123,3 +123,12 @@ To add a new SVG icon to Canopy simply add the file to either the `icons` or `br
 When committing the new icons [lint-staged](https://github.com/okonet/lint-staged) will run and generate all the `ts` files automatically.
 
 After that remember to add the new icons to the story, as they are not automatically added at present.
+
+
+## Fonts
+
+The Roboto font is stored in **/projects/canopy/src/assets/fonts/roboto** as normal and is included in the distributed Canopy package.
+
+The Lyon font files are stored in **/assets/fonts** and ommitted from the distributed package via the Webpack config. The `css-loader` options prevent it from transforming any URL referencing the Lyon font. This means the path will stay as relative to the base URL of the consuming application (/assets/fonts), therefore looking in the assets directory of consuming app.
+
+For more info, see the fonts section in USAGE.md.

docs/USAGE.md

@@ -111,6 +111,32 @@ You can find the scss files here:
 - dist/styles/variables - containing all the variables for colors, typography, etc
 - dist/lib - containing all the components styles
 
+### Canopy Fonts
+
+Canopy consists of two fonts; Roboto and Lyon. Roboto is included in the distributed Canopy package, and will load automatically when you have installed Canopy correctly.
+
+Due to commercial licensing agreements the Lyon font is not included in the distributed package. You will need to manually add it to the **assets** directory of your application. Canopy does provide the css to work with the font and no additional code should be required. You will  need to ensure the font is in the directory specified by Canopy.
+
+Canopy's path for Lyon is **/assets/fonts/lyon/**, therefore you need to put the font files in the following location:
+
+```bash
+my-app/
+  src/
+    assets/
+      fonts/
+        lyon/
+          lyon-display-regular.woff
+          lyon-display-regular.woff2
+          lyon-display-bold.woff
+          lyon-display-bold.woff2
+```
+
+> This will result in the font being served in your app like this: <br>http://my-app.landg.com/assets/fonts/lyon/LyonDisplay-Regular-Web.woff2
+
+When you include the canopy.css file in your project, it will try to load the font from that exact path. If your font files are in the wrong location, or have a typo in the filename, the Lyon font won't load correctly.
+
+Please ensure you have the correct licensing agreement in place before using the Lyon font in your application.
+
 ### Supporting IE11
 
 Canopy uses css variables which are not supported by IE11. One way of adding support is to use [css-vars-ponyfill](https://www.npmjs.com/package/css-vars-ponyfill) in the following way.

projects/canopy-test-app/src/app/app.component.html

@@ -95,15 +95,12 @@
                 <lg-tab-item-heading>Tab 1</lg-tab-item-heading>
                 <lg-tab-item-content>
                   <div class="lg-tabs__content-section">
+
                     <p>
                       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi posuere
                       nec leo nec hendrerit. Pellentesque eu lacinia tortor. Donec urna
                       felis, dictum et faucibus et, interdum ut urna. Nam eleifend eleifend
-                      mi vel blandit. Morbi rutrum a odio in pharetra. Quisque vitae lacus
-                      efficitur, elementum mauris in, porta nisl. Praesent porttitor
-                      accumsan ante, sed efficitur nunc placerat in. Etiam non lorem leo.
-                      Aenean magna lacus, iaculis at velit non, congue commodo dui.
-                      Pellentesque tempus elementum tempor.
+                      mi vel blandit. Morbi rutrum a odio in pharetra.
                     </p>
                   </div>
                 </lg-tab-item-content>
@@ -116,13 +113,7 @@
                       Maecenas laoreet tristique ligula, mollis ullamcorper est faucibus
                       eget. Aenean quis placerat arcu. Sed efficitur odio nunc, id facilisis
                       orci accumsan eget. Nunc feugiat elit eget imperdiet faucibus.
-                      Maecenas faucibus sit amet nisi a ultricies. Donec id scelerisque
-                      ante, eget tempus dui. Fusce semper ex eu lorem pellentesque
-                      tristique. Proin non augue quis orci lobortis rhoncus. Aliquam quis
-                      luctus ipsum. Maecenas vulputate porta mauris, id lacinia turpis
-                      feugiat sed. Aenean et commodo elit, a dignissim massa. Fusce
-                      facilisis laoreet orci quis vehicula. Curabitur eu lacus vitae libero
-                      laoreet hendrerit at quis magna.
+                      Maecenas faucibus sit amet nisi a ultricies.
                     </p>
                   </div>
                 </lg-tab-item-content>
@@ -138,11 +129,7 @@
                       tincidunt pretium. Nulla vehicula sem lectus, ac eleifend velit
                       pellentesque a. Proin et varius ante, nec venenatis nulla.
                       Pellentesque pharetra risus lorem, et congue ligula interdum volutpat.
-                      Donec ut iaculis metus. Nunc rutrum vestibulum ex nec condimentum.
-                      Pellentesque nec volutpat quam. Etiam tortor arcu, eleifend ut ante
-                      id, ullamcorper tristique libero. Praesent imperdiet, orci in
-                      tincidunt aliquet, quam sapien convallis nunc, non maximus dui lacus
-                      sed lacus. Suspendisse ut tortor dui.
+                      Donec ut iaculis metus.
                     </p>
                   </div>
                 </lg-tab-item-content>
@@ -156,17 +143,20 @@
                       efficitur posuere, urna ipsum vehicula dui, in placerat risus felis et
                       lectus. Vivamus imperdiet nulla nisi, eget varius mi cursus nec.
                       Suspendisse quis risus eleifend, pretium lectus eget, condimentum leo.
-                      Aliquam faucibus at mi sit amet volutpat. Nunc nec orci sapien. Duis
-                      augue quam, bibendum in enim a, ultricies luctus mi. Aliquam eleifend
-                      magna est, eget sagittis massa malesuada quis. Maecenas mattis tortor
-                      sit amet mi sagittis, vitae aliquam dui rhoncus. Aenean sed erat eu
-                      ante ornare sollicitudin in et est.
+                      Aliquam faucibus at mi sit amet volutpat.
                     </p>
                   </div>
                 </lg-tab-item-content>
               </lg-tab-item>
             </lg-tabs>
 
+            <lg-heading level="3">Fonts</lg-heading>
+
+            <p class="lg-font-size-2"><strong>Roboto:</strong> The quick brown fox jumps over a lazy dog</p>
+            <p class="lg-font-size-2 lg-font--expressive"><strong>Lyon:</strong> The quick brown fox jumps over a lazy dog</p>
+
+            <lg-separator></lg-separator>
+
             <lg-heading level="3">Tabs</lg-heading>
 
             <lg-tab-nav-bar label="Test nav tabs">

projects/canopy/src/styles/typography.notes.ts

@@ -2,12 +2,45 @@ export const notes = `
 # Typography
 
 ## Purpose
-Provides common typographic styles for native elements with additional utility classes
+Provides common typographic styles for native elements with additional utility classes.
+
+Canopy consists of two fonts:
+
+* **Roboto**: Productive font, for general use in self serve apps (default)
+* **Lyon**: Expressive font, for headings in promo material (applied by class modifier)
+
+> **IMPORTANT** - Lyon font files are not included in the Canopy package, you have to serve it yourself, see below for details.
+
+## Serving the Lyon font files
+
+Due to commercial licensing agreements the Lyon font is not included in the distributed package. You will need to manually add it to the **assets** directory of your application. Canopy does provide the css to work with the font and no additional code should be required. You will  need to ensure the font is in the directory specified by Canopy.
+
+Canopy's path for Lyon is **/assets/fonts/lyon/**, therefore you need to put the font files in the following location:
+
+~~~bash
+my-app/
+  src/
+    assets/
+      fonts/
+        lyon/
+          lyon-display-regular.woff
+          lyon-display-regular.woff2
+          lyon-display-bold.woff
+          lyon-display-bold.woff2
+~~~
+
+> This will result in the font being served in your app like this: <br />http://my-app.landg.com/assets/fonts/lyon/LyonDisplay-Regular-Web.woff2
+
+When you include the canopy.css file in your project, it will try to load the font from that exact path. If your font files are in the wrong location, or have a typo in the filename, the Lyon font won't load correctly.
+
+Please ensure you have the correct licensing agreement in place before using the Lyon font in your application.
 
 ## Usage
-The typography styles will provide styling for all native text elements e.g. h1, h2, p, em, b, strong etc.
+The typography styles will provide styling for all native text elements e.g. \`\`h1\`\`, \`\`h2\`\`, \`\`p\`\`, \`\`em\`\`, \`\`b\`\`, \`\`strong\`\` etc.
+
+By default the font used is Roboto.
 
-In addition to the native styling the following utility classes are exposed.
+In addition to the native styling, the following utility classes are exposed, allowing you to change the font size and weight where required.
 
 ~~~html
 .lg-font-size-7
@@ -41,6 +74,24 @@ does the font size up to the largest \`.lg-font-size-7.\` Each of the primary fo
 
 There are two additional styles which are smaller \`.lg-font-size-0-8\`
 and \`.lg-font-size-0-6\`. The utility classes are particularly useful for when you want to decouple the semantics and styling,
-for example making an h1 look like an h3.
+for example making an h1 look like an h3:
 
+~~~html
+<h1 class="lg-font-size-3">H1 that looks like a H3</h1>
+~~~
+<br />
+
+### Using the Lyon font
+
+Lyon can be applied using the modifier class: \`\`lg-font--expressive\`\`. For example:
+
+~~~html
+<h1 class="lg-font--expressive">Heading in Lyon</h1>
+~~~
+
+It can also be used in addition to the above utility classes:
+
+~~~html
+<p class="lg-font-size-5 lg-font--expressive">Paragraph in Lyon and font size 5</p>
+~~~
 `;

projects/canopy/src/styles/typography.scss

@@ -1,5 +1,53 @@
 @import '../styles/mixins.scss';
 $fonts-path: '../assets/fonts' !default;
+$fonts-path-lyon: '/assets/fonts';
+
+/*
+  Lyon - font path is not transformed by the build, see USAGE.md for details
+ */
+@font-face {
+  font-family: 'Lyon';
+  font-style: normal;
+  font-weight: 100;
+  font-display: swap;
+  src: local('Lyon'), local('Lyon-Regular'),
+    url('#{$fonts-path-lyon}/lyon/lyon-display-regular.woff2') format('woff2'),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+      url('#{$fonts-path-lyon}/lyon/lyon-display-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+@font-face {
+  font-family: 'Lyon';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: local('Lyon'), local('Lyon-Regular'),
+    url('#{$fonts-path-lyon}/lyon/lyon-display-regular.woff2') format('woff2'),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+      url('#{$fonts-path-lyon}/lyon/lyon-display-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+@font-face {
+  font-family: 'Lyon';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Lyon Bold'), local('Lyon-Bold'),
+    url('#{$fonts-path-lyon}/lyon/lyon-display-bold.woff2') format('woff2'),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+      url('#{$fonts-path-lyon}/lyon/lyon-display-bold.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+@font-face {
+  font-family: 'Lyon';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: local('Lyon Bold'), local('Lyon-Bold'),
+    url('#{$fonts-path-lyon}/lyon/lyon-display-bold.woff2') format('woff2'),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+      url('#{$fonts-path-lyon}/lyon/lyon-display-bold.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
 
 /*
   Roboto - Restricted to Latin character sets with support back to IE 9
@@ -90,6 +138,10 @@ strong {
   font-weight: var(--font-weight-bold);
 }
 
+.lg-font--expressive {
+  font-family: var(--font-family-expressive);
+}
+
 h1,
 .h1,
 h2,