Introduces v2 font as GOV.UK Transport

By default v2 font will been used unless the service is running in compatibility
mode.

Some services still need to use govuk template/elements. In the current
state, the user would end up downloading two versions of the font.

To avoid this issue we have created another flag to check if the the service
is running in compatiblity mode by having any of these flags set:
- $govuk-compatibility-govukfrontendtoolkit
- $govuk-compatibility-govuktemplate
- $govuk-compatibility-govukelements

The new flag '$govuk-use-legacy-font' can also be overriden by setting its
value to "true" just before importing govuk-frontend.

src/helpers/_font-faces.scss

@@ -7,40 +7,39 @@
 
 @import "../tools/exports";
 
-/// Font Face - NTA
+/// Font Face - GOV.UK Transport
 ///
-/// Outputs the font-face declaration for NTA at the root of the CSS document
+/// Outputs the font-face declaration for GOV.UK Transport at the root of the CSS document
 /// the first time it is called.
 ///
 /// @access private
 
-@mixin _govuk-font-face-nta {
-  @include govuk-exports("govuk/helpers/font-face") {
+@mixin _govuk-font-face-govuk-transport {
+  @include govuk-exports("govuk/helpers/font-faces") {
     @at-root {
       /*! Copyright (c) 2011 by Margaret Calvert & Henrik Kubel. All rights reserved. The font has been customised for exclusive use on gov.uk. This cut is not commercially available. */
 
       @font-face {
-        font-family: "nta";
+        font-family: "GOVUKTransport";
         src: govuk-font-url("light-df2b968d71-v2.eot");
         src: govuk-font-url("light-df2b968d71-v2.eot?#iefix") format("embedded-opentype"),
-             govuk-font-url("light-68f0c84f0e-v2.woff2") format("woff2"),
-             govuk-font-url("light-222368e53d-v2.woff") format("woff");
+            govuk-font-url("light-68f0c84f0e-v2.woff2") format("woff2"),
+            govuk-font-url("light-222368e53d-v2.woff") format("woff");
         font-weight: normal;
         font-style: normal;
         font-display: fallback;
       }
 
       @font-face {
-        font-family: "nta";
+        font-family: "GOVUKTransport";
         src: govuk-font-url("bold-a7fa10839b-v2.eot");
         src: govuk-font-url("bold-a7fa10839b-v2.eot?#iefix") format("embedded-opentype"),
-             govuk-font-url("bold-9561e2d007-v2.woff2") format("woff2"),
-             govuk-font-url("bold-5d3836b441-v2.woff") format("woff");
+            govuk-font-url("bold-9561e2d007-v2.woff2") format("woff2"),
+            govuk-font-url("bold-5d3836b441-v2.woff") format("woff");
         font-weight: bold;
         font-style: normal;
         font-display: fallback;
       }
-
     }
   }
 }

src/helpers/_typography.scss

@@ -17,10 +17,10 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 
-  // If the user is using the default NTA font we need to include the font-face declarations.
-  // We do not need to include the NTA font-face declarations if alphagov/govuk_template is being used since they will already be included.
+  // If the user is using the default GOV.UK Transport font we need to include the font-face declarations.
+  // We do not need to include the GOV.UK Transport font-face declarations if alphagov/govuk_template is being used since nta will already be included by default
   @if ($govuk-include-default-font-face) {
-    @include _govuk-font-face-nta;
+    @include _govuk-font-face-govuk-transport;
   }
 
   @include govuk-media-query($media-type: print) {

src/helpers/typography.test.js

@@ -63,7 +63,7 @@ describe('@mixin govuk-typography-common', () => {
     const resultsString = results.css.toString()
 
     expect(resultsString).toContain(`@font-face`)
-    expect(resultsString).toContain(`font-family: "nta"`)
+    expect(resultsString).toContain(`font-family: "GOVUKTransport"`)
     expect(resultsString).toContain(`font-family: "ntatabularnumbers"`)
   })
   it('should not output a @font-face declaration when the user has changed their font', async () => {
@@ -85,7 +85,7 @@ describe('@mixin govuk-typography-common', () => {
     const resultsString = results.css.toString()
 
     expect(resultsString).not.toContain(`@font-face`)
-    expect(resultsString).not.toContain(`font-family: "nta"`)
+    expect(resultsString).not.toContain(`font-family: "GOVUKTransport"`)
     expect(resultsString).not.toContain(`font-family: "ntatabularnumbers"`)
   })
   it('should not output a @font-face declaration when the user wants compatibility with GOV.UK Template', async () => {
@@ -127,7 +127,7 @@ describe('@mixin govuk-typography-common', () => {
     const resultsString = results.css.toString()
 
     expect(resultsString).not.toContain(`@font-face`)
-    expect(resultsString).toContain(`font-family: "nta"`)
+    expect(resultsString).toContain(`font-family: "GOVUKTransport"`)
     expect(resultsString).toContain(`font-family: "ntatabularnumbers"`)
   })
 })

src/settings/_typography-font-families.scss

@@ -2,12 +2,21 @@
 /// @group settings/typography
 ////
 
-/// List of font families to use if using NTA (the default font 'stack' for
+/// List of font families to use if using GOV.UK Transport (the default font 'stack' for
 /// GOV.UK)
 ///
 /// @type List
 /// @access public
 
+$govuk-font-family-govuk-transport: "GOVUKTransport", Arial, sans-serif;
+
+/// List of font families to use if using NTA (old font 'stack' for
+/// GOV.UK)
+///
+/// @type List
+/// @access public
+/// @deprecated Will be removed once support for govuk template/elements is dropped
+
 $govuk-font-family-nta: "nta", Arial, sans-serif;
 
 /// List of font families to use if using the 'tabular numbers' subset of NTA
@@ -18,5 +27,6 @@ $govuk-font-family-nta: "nta", Arial, sans-serif;
 ///
 /// @type List
 /// @access public
+/// @deprecated Will be removed once support for govuk template/elements is dropped
 
 $govuk-font-family-nta-tabular: "ntatabularnumbers", $govuk-font-family-nta;

src/settings/_typography-font.scss

@@ -5,7 +5,20 @@
 /// @group settings/typography
 ////
 
+/// Use 'legacy' fonts
+///
+/// Whether or not to use v1 nta font from GOV.UK Elements / Frontend
+/// Toolkit, for teams that are migrating to GOV.UK Frontend and may be using
+/// components from both places in a single application.
+///
+/// @type Boolean
+/// @access public
 
+$govuk-use-legacy-font: if((
+    $govuk-compatibility-govukfrontendtoolkit or
+    $govuk-compatibility-govuktemplate or
+    $govuk-compatibility-govukelements
+  ), true, false) !default;
 
 // =========================================================
 // Font families
@@ -16,7 +29,10 @@
 /// @type List
 /// @access public
 
-$govuk-font-family: $govuk-font-family-nta !default;
+$govuk-font-family: if($govuk-use-legacy-font,
+  $govuk-font-family-nta,
+  $govuk-font-family-govuk-transport
+) !default;
 
 /// Font families to use when displaying tabular numbers
 ///
@@ -34,16 +50,13 @@ $govuk-font-family-print: sans-serif !default;
 
 /// Include the default @font-face declarations
 ///
-/// If you have set $govuk-font-family to something other than $govuk-font-family-nta this option is disabled by default.
-///
-/// If you are using $govuk-compatibility-govuktemplate this option is disabled by default.
+/// If you have set $govuk-font-family to something other than $govuk-font-family-govuk-transport this option is disabled by default.
 ///
 /// @type Boolean
 /// @access public
 
 $govuk-include-default-font-face: (
-  $govuk-font-family == $govuk-font-family-nta and
-  not($govuk-compatibility-govuktemplate)
+  $govuk-font-family == $govuk-font-family-govuk-transport
  ) !default;
 
 // =========================================================