Add CSS for Tabular numbers inside existing mixin

Thanks goes to Matthew Hobbs (@Nooshu)[https://github.com/Nooshu] for this
recommendation.

An extract of Matt's recommendation can be found below and at this link:
#1012

Version 1 of the font was missing the details required to enable embedded
tabular numbers. Version 2 now allows us to control this tablular number
setting using CSS, thus removing the need for two other fonts
(tabular-light, tabular-bold). This tabular setting can be enabled using
the following example CSS:

```
.tabular {
    font-feature-settings: "tnum" 1;
}

@supports(font-variant-numeric: tabular-nums) {
    .tabular {
        font-feature-settings: normal;
        font-variant-numeric: tabular-nums;
    }
}```

The difference this setting makes can be seen in the screenshot below.
Older browser will fallback to font-feature-settings, where as newer browser
will see the @supports rule and use font-variant-numeric.

src/helpers/_typography.scss

@@ -71,6 +71,7 @@
 /// @return {Number} The line height as either a relative value or unmodified
 ///
 /// @access private
+
 @function _govuk-line-height($line-height, $font-size) {
   @if not unitless($line-height) and unit($line-height) == unit($font-size) {
     $line-height: $line-height / $font-size;
@@ -171,7 +172,18 @@
 
 @mixin govuk-font($size, $weight: regular, $tabular: false, $line-height: false) {
   @if $tabular {
-    @include govuk-typography-common($font-family: $govuk-font-family-tabular);
+    // if govuk-font-family-tabular is set use $govuk-font-family-tabular
+    @if $govuk-font-family-tabular != false {
+      @include govuk-typography-common($font-family: $govuk-font-family-tabular);
+    } @else {
+      @include govuk-typography-common;
+      font-feature-settings: "tnum" 1;
+
+      @supports(font-variant-numeric: tabular-nums) {
+        font-feature-settings: normal;
+        font-variant-numeric: tabular-nums;
+      }
+    }
   } @else {
     @include govuk-typography-common;
   }

src/helpers/typography.test.js

@@ -64,7 +64,7 @@ describe('@mixin govuk-typography-common', () => {
 
     expect(resultsString).toContain(`@font-face`)
     expect(resultsString).toContain(`font-family: "GOVUKTransport"`)
-    expect(resultsString).toContain(`font-family: "ntatabularnumbers"`)
+    expect(resultsString).toContain(`font-family: "GOVUKTransport"`)
   })
   it('should not output a @font-face declaration when the user has changed their font', async () => {
     const sass = `
@@ -128,7 +128,7 @@ describe('@mixin govuk-typography-common', () => {
 
     expect(resultsString).not.toContain(`@font-face`)
     expect(resultsString).toContain(`font-family: "GOVUKTransport"`)
-    expect(resultsString).toContain(`font-family: "ntatabularnumbers"`)
+    expect(resultsString).toContain(`font-family: "GOVUKTransport"`)
   })
 })
 

src/settings/_typography-font.scss

@@ -26,7 +26,10 @@ $govuk-font-family: if($govuk-use-legacy-font,
 /// @type List
 /// @access public
 
-$govuk-font-family-tabular: $govuk-font-family-nta-tabular !default;
+$govuk-font-family-tabular: if($govuk-use-legacy-font,
+  $govuk-font-family-nta-tabular,
+  false
+) !default;
 
 /// Font families to use for print media
 ///