closes #124

.storybook/preview.scss

@@ -1,5 +1,5 @@
 body {
-  font-family: "Nunito Sans", Helvetica, Arial, sans-serif;
+  font-family: 'Nunito Sans', Helvetica, Arial, sans-serif;
 }
 
 table.docblock-argstable {
@@ -17,11 +17,12 @@ div.sbdocs :where(p:not(.sb-anchor, .sb-unstyled, .sb-unstyled p)) {
   font-size: 16px;
 }
 
-div.sbdocs-content  {
-  h1 {
+div.sbdocs-content {
+  h1:not(.sbdocs-preview *) {
     font-family: 'Knowledge', sans-serif;
   }
-  & > h2, & > div > div > h2 {
+  & > h2,
+  & > div > div > h2 {
     margin-top: 4rem;
     margin-bottom: 2rem;
     &:first-of-type {
@@ -39,7 +40,7 @@ div.sbdocs-content  {
     font-size: 18px;
     line-height: 29px;
     font-family: 'Knowledge', sans-serif;
-  
+
     .highlight {
       background-color: rgb(254, 254, 160);
       padding: 0 4px;
@@ -59,7 +60,7 @@ div.sbdocs-content  {
   }
 }
 
-.sbdocs-content  {
+.sbdocs-content {
   blockquote:not(.sb-unstyled *) {
     background-color: #ededed;
     padding: 15px 20px;
@@ -79,11 +80,13 @@ div.sbdocs-content  {
   h1 {
     font-family: 'Knowledge', sans-serif;
   }
-  p, ul, li {
+  p,
+  ul,
+  li {
     font-size: 18px;
     line-height: 29px;
     font-family: 'Knowledge', sans-serif;
-  
+
     .highlight {
       background-color: rgb(254, 254, 160);
       padding: 0 4px;
@@ -110,7 +113,7 @@ div.sbdocs-content  {
       background-color: #efefef;
       padding: 2px 4px;
     }
-  
+
     img {
       display: block;
       margin-top: 1rem;

src/components/Theme/Theme.stories.svelte

@@ -6,6 +6,8 @@
   // @ts-ignore
   import customiseDocs from './stories/docs/customise.md?raw';
   // @ts-ignore
+  import customiseFontDocs from './stories/docs/customise-font.md?raw';
+  // @ts-ignore
   import patternDocs from './stories/docs/pattern.md?raw';
   // @ts-ignore
   import inheritanceDocs from './stories/docs/inheritance.md?raw';
@@ -15,6 +17,8 @@
 
   import Theme, { themes } from './Theme.svelte';
 
+  import Headline from '../Headline/Headline.svelte';
+
   import {
     withComponentDocs,
     withStoryDocs,
@@ -54,14 +58,31 @@
   <Theme
     base="dark"
     theme="{{
-      colour: { accent: 'yellow' },
-      font: { family: { hed: 'freight-book' } },
+      colour: { accent: 'var(--tr-light-orange)' },
+      font: { family: { hed: 'FreightText, serif' } },
     }}"
   >
     <ThemedPage />
   </Theme>
 </Story>
 
+<Story name="Custom Google font" {...withStoryDocs(customiseFontDocs)}>
+  <Theme
+    base="light"
+    theme="{{
+      font: { family: { hed: 'Bebas Neue, sans-serif' } },
+    }}"
+  >
+    <div class="gfont">
+      <Headline
+        hed="{'Reuters Graphics Interactive'}"
+        dek="{'The beginning of a beautiful page'}"
+        section="{'Global news'}"
+      />
+    </div>
+  </Theme>
+</Story>
+
 <Story name="Background patterns" {...withStoryDocs(patternDocs)}>
   <div id="pattern-bg">
     <Theme
@@ -91,7 +112,7 @@
           <Theme
             theme="{{
               colour: { background: 'steelblue', 'text-primary': '#fff' },
-              font: { family: { note: 'freight-book' } },
+              font: { family: { note: 'FreightText, serif' } },
             }}"
             base="dark"
           >
@@ -106,6 +127,8 @@
 </Story>
 
 <style lang="scss">
+  @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
+
   div.themed {
     background-color: var(--theme-colour-background);
     padding: 2rem;

src/components/Theme/stories/ThemedPage.svelte

@@ -10,16 +10,9 @@
     hed="{'Reuters Graphics Interactive'}"
     dek="{'The beginning of a beautiful page'}"
     section="{'Global news'}"
-  >
-    <!-- Use named slots to add a byline... -->
-    <span slot="byline">By <strong>Peppa Pig</strong></span>
-    <!-- ...and a dateline. -->
-    <span slot="dateline"
-      >Published <time datetime="{new Date('2020-01-01').toISOString()}"
-        >Jan. 1, 2020</time
-      ></span
-    >
-  </Headline>
+    authors="{['Jon McClure', 'Prasanta Kumar Dutta']}"
+    publishTime="{new Date('2021-09-12').toISOString()}"
+  />
   <BodyText
     text="{`Bacon ipsum dolor amet cupim porchetta chuck buffalo sirloin beef. Biltong ham brisket tenderloin hamburger doner.
 
@@ -45,6 +38,6 @@ Shank strip steak turkey shoulder shankle leberkas pork chop, t-bone picanha buf
 <style>
   div.fake-graphic {
     height: 200px;
-    border: 1px solid var(--theme-colour-text-primary);
+    border: 1px solid var(--theme-colour-accent);
   }
 </style>

src/components/Theme/stories/docs/customise-font.md

@@ -0,0 +1,52 @@
+For some projects, you may need to use typefaces other than the defaults provided by the GraphicsKit.
+
+You will need to:
+
+- Import the fonts in your code.
+- Declare the `font-family` in the corresponding CSS variables in the Theme.
+
+There are many ways to load fonts, but care should be taken that the font files load first before page render, to avoid layout shifts during font swapping after the font is downloaded. For this reason, we will use `<link>` method in the page `head` instead of CSS imports.
+
+> ##### Importing custom fonts
+
+> In this sample from [Google Fonts](https://fonts.google.com/specimen/Bebas+Neue), once we have selected the font family, copy the `<link>` code.
+
+> ```html
+> <link rel="preconnect" href="https://fonts.googleapis.com" />
+> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+> <link
+>   href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap"
+>   rel="stylesheet"
+> />
+> ```
+
+> In your project, navigate to `src` > `template.html` and add the copied code in `head` section :
+
+> ```svelte
+> <head>
+>   <!-- HTML meta -->
+>   <link rel="preconnect" href="https://fonts.googleapis.com" />
+>   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+>   <link
+>     href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap"
+>     rel="stylesheet"
+>   />
+>
+>   %sveltekit.head%
+> </head>
+> ```
+
+> Similarly, you can add fonts from [Adobe Typekit](https://fonts.adobe.com/) or custom local fonts with the correct paths to the URL.
+
+You can customise one or more of the pre-defined font families in the Theme. Do not directly apply the font family in your CSS. Always use the CSS variables defined in the Theme so that it configures and reflects across the page design.
+
+```svelte
+<Theme
+  base="light"
+  theme="{{
+    font: { family: { hed: 'Bebas Neue, sans-serif' } },
+  }}"
+>
+  <!-- Page content -->
+</Theme>
+```

src/components/Theme/stories/docs/customise.md

@@ -11,7 +11,7 @@ Check out the "Control" column for `theme` in the properties table above to see
 > ```scss
 > // global.scss
 > body {
->   background-color: #333;
+>   background-color: #2e3440;
 > }
 > ```
 
@@ -19,8 +19,8 @@ Check out the "Control" column for `theme` in the properties table above to see
 <Theme
   base="dark"
   theme="{{
-    colour: { accent: 'yellow' },
-    font: { family: { hed: 'freight-book' } },
+    colour: { accent: 'var(--tr-light-orange)' },
+    font: { family: { hed: 'FreightText, serif' } },
   }}"
 >
   <!-- Page content -->