Refresh: update brand fonts globally [fix #15088]

Use text-wrap: balance [fix #15131]
mozilla · Sep 16, 2024 · 7e11e58 · 7e11e58
1 parent 1940447
commit 7e11e58
Show file tree

Hide file tree

Showing 43 changed files with 297 additions and 92 deletions.
diff --git a/bedrock/base/templates/base-protocol-mozilla.html b/bedrock/base/templates/base-protocol-mozilla.html
@@ -9,7 +9,11 @@
 {% block body_class %}mzp-t-mozilla{% endblock %}
 
 {% block site_css %}
-  {{ css_bundle('protocol-mozilla') }}
+  {% if switch('m24-global-styles') %}
+    {{ css_bundle('protocol-mozilla-2024') }}
+  {% else %}
+    {{ css_bundle('protocol-mozilla') }}
+  {% endif %}
   {% if switch('m24-navigation-and-footer') and LANG.startswith('en-') %}
     {{ css_bundle('m24-navigation-and-footer') }}
   {% endif %}

diff --git a/bedrock/base/templates/base-protocol.html b/bedrock/base/templates/base-protocol.html
@@ -72,7 +72,11 @@
     <!--[if !IE]><!-->
     {# Global styles, hidden from IE9 and lower #}
     {% block site_css %}
-      {{ css_bundle('protocol-firefox') }}
+      {% if switch('m24-global-styles') %}
+        {{ css_bundle('protocol-mozilla-2024') }}
+      {% else %}
+        {{ css_bundle('protocol-firefox') }}
+      {% endif %}
       {% if switch('m24-navigation-and-footer') and LANG.startswith('en-') %}
         {{ css_bundle('m24-navigation-and-footer') }}
       {% endif %}

diff --git a/bedrock/base/templates/includes/protocol/footer/footer-refresh.html b/bedrock/base/templates/includes/protocol/footer/footer-refresh.html
@@ -71,7 +71,7 @@ <h2 class="moz24-footer-label" data-testid="footer-heading-resources">
               {{ ftl('footer-refresh-resources') }}
             </h2>
             <ul class="moz24-footer-primary-list" data-testid="footer-list-resources">
-              <li><a href="https://www.mozilla.org/advertising/" data-link-type="footer" data-link-text="Advertise with Mozilla">{{ ftl('footer-refresh-advertise') }}</a></li>
+              <li><a href="{{ url('mozorg.advertising') }}" data-link-type="footer" data-link-text="Advertise with Mozilla">{{ ftl('footer-refresh-advertise') }}</a></li>
               <li><a href="https://mozilla.design/?{{ utm_params }}&utm_content=resources" data-link-type="footer" data-link-text="Brand Standards">{{ ftl('footer-refresh-brand-standards') }}</a></li>
               <li><a href="/firefox/{{ latest_firefox_version }}/releasenotes/" data-link-type="footer" data-link-text="Firefox Release Notes">{{ ftl('footer-refresh-firefox-release-notes') }}</a></li>
             </ul>

diff --git a/bedrock/firefox/templates/firefox/new/basic/base.html b/bedrock/firefox/templates/firefox/new/basic/base.html
@@ -31,7 +31,11 @@
 
 {# All stylesheets are loaded in extrahead to serve legacy IE basic styles #}
 {% block extrahead %}
-  {{ css_bundle('protocol-firefox') }}
+  {% if switch('m24-global-styles') %}
+    {{ css_bundle('protocol-mozilla-2024') }}
+  {% else %}
+    {{ css_bundle('protocol-firefox') }}
+  {% endif %}
   {% if switch('m24-navigation-and-footer') and LANG.startswith('en-') %}
     {{ css_bundle('m24-navigation-and-footer') }}
   {% endif %}

diff --git a/bedrock/firefox/templates/firefox/new/desktop/base.html b/bedrock/firefox/templates/firefox/new/desktop/base.html
@@ -31,7 +31,11 @@
 
 {# All stylesheets are loaded in extrahead to serve legacy IE basic styles #}
 {% block extrahead %}
-  {{ css_bundle('protocol-firefox') }}
+  {% if switch('m24-global-styles') %}
+    {{ css_bundle('protocol-mozilla-2024') }}
+  {% else %}
+    {{ css_bundle('protocol-firefox') }}
+  {% endif %}
   {% if switch('m24-navigation-and-footer') and LANG.startswith('en-') %}
     {{ css_bundle('m24-navigation-and-footer') }}
   {% endif %}

diff --git a/bedrock/newsletter/templates/newsletter/security-privacy-news.html b/bedrock/newsletter/templates/newsletter/security-privacy-news.html
@@ -4,7 +4,7 @@
  file, You can obtain one at https://mozilla.org/MPL/2.0/.
 #}
 
-{% extends 'base-protocol.html' %}
+{% extends 'base-protocol-mozilla.html' %}
 
 {% block page_title %}{{ ftl('newsletters-subscribe-to-the-newsletter') }}{% endblock page_title %}
 

diff --git a/media/css/careers/components/diversity.scss b/media/css/careers/components/diversity.scss
@@ -10,8 +10,8 @@ $image-path: '/media/protocol/img';
 
 .c-careers-diversity-numbers {
     .mzp-c-picto-heading {
-        @include font-base;
         margin-bottom: $spacing-md;
+        font-family: var(--body-font-family);
         font-weight: 400;
     }
 }
@@ -87,8 +87,8 @@ $image-path: '/media/protocol/img';
 
                 p {
                     @include text-body-sm;
-                    @include font-base;
                     color: $color-dark-gray-20;
+                    font-family: var(--body-font-family);
                     font-weight: 700;
                     margin-bottom: 0;
                 }

diff --git a/media/css/careers/components/locations.scss b/media/css/careers/components/locations.scss
@@ -18,7 +18,6 @@
 
         a,
         span {
-            @include font-mozilla;
             @include text-body-xl;
             font-weight: bold;
         }

diff --git a/media/css/careers/components/position.scss b/media/css/careers/components/position.scss
@@ -40,7 +40,7 @@
     margin-bottom: $spacing-lg;
 
     .mzp-c-menu-list-title {
-        @include font-base;
+        font-family: var(--body-font-family);
     }
 
     ul {

diff --git a/media/css/careers/components/testimonials.scss b/media/css/careers/components/testimonials.scss
@@ -87,9 +87,9 @@ $image-path: '/media/protocol/img';
             }
 
             q {
-                @include font-mozilla;
                 @include font-size(28px);
                 color: $color-black;
+                font-family: var(--title-font-family);
                 font-weight: bold;
                 margin-bottom: $spacing-md;
                 position: relative;
@@ -210,8 +210,9 @@ $image-path: '/media/protocol/img';
 
         blockquote {
             @include text-title-2xs;
-            font-weight: 400;
             border: 0;
+            color: $color-black;
+            font-weight: 400;
 
             .c-careers-testimonial-quote {
                 position: relative;
@@ -261,8 +262,8 @@ $image-path: '/media/protocol/img';
 
     p {
         @include text-body-sm;
-        @include font-base;
         color: $color-dark-gray-20;
+        font-family: var(--body-font-family);
         font-weight: 700;
         margin-bottom: 0;
     }

diff --git a/media/css/firefox/releasenotes.scss b/media/css/firefox/releasenotes.scss
@@ -172,8 +172,8 @@ $image-path: '/media/protocol/img';
 }
 
 .c-release-version {
-    @include font-base;
     @include text-title-xl;
+    font-family: var(--body-font-family);
     display: block;
 }
 
@@ -184,20 +184,20 @@ $image-path: '/media/protocol/img';
 
 .mzp-l-content {
     .c-release-product {
-        @include font-base;
         @include text-title-2xs;
+        font-family: var(--body-font-family);
         display: block;
     }
 
     .c-release-date {
-        @include font-base;
         @include text-title-2xs;
+        font-family: var(--body-font-family);
     }
 
     .c-release-first-title,
     .c-release-draft-title {
-        @include font-base;
         @include text-title-2xs;
+        font-family: var(--body-font-family);
         font-weight: bold;
 
         // pushes the text down after the big release-version text

diff --git a/media/css/foundation/annual-report-2019-2020.scss b/media/css/foundation/annual-report-2019-2020.scss
@@ -118,9 +118,8 @@ $image-path: '/media/protocol/img';
 // Content sections
 .c-intro-section {
     p {
-        @include font-mozilla;
         @include text-title-sm;
-        font-style: italic;
+        font-family: var(--title-font-family);
         margin-bottom: 0;
     }
 }
@@ -333,8 +332,8 @@ $image-path: '/media/protocol/img';
     }
 
     li {
-        @include font-mozilla;
         @include text-title-sm;
+        font-family: var(--title-font-family);
         margin-left: $spacing-md;
         margin-bottom: $spacing-lg;
         padding-left: $spacing-sm;
@@ -537,8 +536,8 @@ $image-path: '/media/protocol/img';
     }
 
     span {
-        @include font-mozilla;
         @include text-title-xs;
+        font-family: var(--title-font-family);
         font-weight: bold;
         display: block;
         margin-bottom: $spacing-md;
@@ -587,8 +586,8 @@ $image-path: '/media/protocol/img';
     margin-bottom: $spacing-2xl;
 
     .highlight {
-        @include font-mozilla;
         @include text-title-xs;
+        font-family: var(--title-font-family);
         font-weight: bold;
     }
 

diff --git a/media/css/foundation/annual-report-2021.scss b/media/css/foundation/annual-report-2021.scss
@@ -56,7 +56,6 @@ main {
     text-align: center;
 
     h1 {
-        @include font-base;
         @include text-title-xl;
         color: $color-white;
         font-weight: normal;
@@ -277,8 +276,8 @@ main {
     }
 
     span {
-        @include font-mozilla;
         @include text-title-xs;
+        font-family: var(--title-font-family);
         display: block;
         font-weight: bold;
         margin-bottom: $spacing-md;

diff --git a/media/css/foundation/annual-report.scss b/media/css/foundation/annual-report.scss
@@ -187,9 +187,8 @@ $image-path: '/media/protocol/img';
 
 .c-intro-section {
     p {
-        @include font-mozilla;
         @include text-title-sm;
-        font-style: italic;
+        font-family: var(--title-font-family);
         margin-bottom: 0;
     }
 }

diff --git a/media/css/m24/base.scss b/media/css/m24/base.scss
@@ -28,16 +28,17 @@
 body {
     background-color: $m24-color-white;
     color: $m24-color-black;
-    font-family: 'Mozilla Sans Text', sans-serif;
+    font-family: var(--body-font-family);
     font-variant-ligatures: none;
-    line-height: 1.2;
+    line-height: var(--body-line-height);
 }
 
 h1, h2, h3, h4, h5 {
     color: $m24-color-black;
-    font-family: 'Mozilla SemiSlab', serif;
+    font-family: var(--title-font-family);
     font-variant-ligatures: none;
     font-weight: bold;
+    line-height: 1.1;
 }
 
 strong {
@@ -88,7 +89,7 @@ a:link {
 .m24-c-cta {
     color: $m24-color-black;
     display: inline-block;
-    font-family: 'Mozilla SemiSlab', serif;
+    font-family: var(--title-font-family);
     font-size: $text-button-lg;
 
     &:hover {
@@ -104,7 +105,7 @@ a:link {
     }
 
     &.m24-t-small {
-        font-family: 'Mozilla Sans Text', sans-serif;
+        font-family: var(--body-font-family);
         font-size: $text-button-sm;
     }
 }
diff --git a/media/css/m24/copy.scss b/media/css/m24/copy.scss
@@ -10,7 +10,9 @@
     max-width: $content-max;
 
     p {
+        font-weight: 600;
         margin-bottom: 0;
+        text-wrap: balance;
         text-wrap-style: balance;
     }
 }
@@ -19,6 +21,7 @@
     font-size: $alias-text-title-h2;
     margin-bottom: 0;
     padding-bottom: $spacer-sm;
+    text-wrap: balance;
     text-wrap-style: balance;
 
     &.m24-t-2xl {

diff --git a/media/css/m24/vars/fonts.scss b/media/css/m24/vars/fonts.scss
@@ -2,13 +2,23 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-$m24-font-path: '/media/fonts/m24/';
+$m24-font-path: '/media/fonts/m24';
 
 @font-face {
     font-display: swap;
     font-family: 'Mozilla Sans Text';
     font-style: normal;
     font-weight: normal;
+    src:
+        url('#{$m24-font-path}/mozilla-sans-text/MozillaSansTextBETA-Regular.woff2') format('woff2'),
+        url('#{$m24-font-path}/mozilla-sans-text/MozillaSansTextBETA-Regular.woff') format('woff');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Mozilla Sans Text';
+    font-style: normal;
+    font-weight: 600;
     src:
         url('#{$m24-font-path}/mozilla-sans-text/MozillaSansTextBETA-SemiBold.woff2') format('woff2'),
         url('#{$m24-font-path}/mozilla-sans-text/MozillaSansTextBETA-SemiBold.woff') format('woff');
@@ -30,8 +40,8 @@ $m24-font-path: '/media/fonts/m24/';
     font-style: italic;
     font-weight: normal;
     src:
-        url('#{$m24-font-path}/mozilla-sans-text/MozillaSansTextBETA-SemiBoldIt.woff2') format('woff2'),
-        url('#{$m24-font-path}/mozilla-sans-text/MozillaSansTextBETA-SemiBoldIt.woff') format('woff');
+        url('#{$m24-font-path}/mozilla-sans-text/MozillaSansTextBETA-Italic.woff2') format('woff2'),
+        url('#{$m24-font-path}/mozilla-sans-text/MozillaSansTextBETA-Italic.woff') format('woff');
 }
 
 @font-face {
@@ -50,8 +60,8 @@ $m24-font-path: '/media/fonts/m24/';
     font-style: normal;
     font-weight: normal;
     src:
-        url('#{$m24-font-path}/mozilla-semi-slab/MozillaSemiSlab-SemiBold.woff2') format('woff2'),
-        url('#{$m24-font-path}mozilla-semi-slab/MozillaSemiSlab-SemiBold.woff') format('woff');
+        url('#{$m24-font-path}/mozilla-semi-slab/MozillaSemiSlab-Regular.woff2') format('woff2'),
+        url('#{$m24-font-path}/mozilla-semi-slab/MozillaSemiSlab-Regular.woff') format('woff');
 }
 
 @font-face {
@@ -61,8 +71,10 @@ $m24-font-path: '/media/fonts/m24/';
     font-weight: bold;
     src:
         url('#{$m24-font-path}/mozilla-semi-slab/MozillaSemiSlab-Bold.woff2') format('woff2'),
-        url('#{$m24-font-path}mozilla-semi-slab/MozillaSemiSlab-Bold.woff') format('woff');
+        url('#{$m24-font-path}/mozilla-semi-slab/MozillaSemiSlab-Bold.woff') format('woff');
 }
 
-$primary-font: "Mozilla Sans Text", inter, x-localespecific, sans-serif;
-$secondary-font: "Mozilla SemiSlab", "Zilla Slab", inter, x-localespecific;
+/* stylelint-disable value-keyword-case  */
+$primary-font: "Mozilla Sans Text", Inter, Arial, "X-LocaleSpecific", sans-serif;
+$secondary-font: "Mozilla SemiSlab", Rockwell, "Roboto Slab", "X-LocaleSpecific", serif;
+/* stylelint-enable */
diff --git a/media/css/mozorg/about-forums.scss b/media/css/mozorg/about-forums.scss
@@ -66,12 +66,10 @@ $image-path: '/media/protocol/img';
     }
 
     h4 {
-        position: relative;
-        letter-spacing: 0;
-        margin: 0 0.5em 0 0;
-        @include font-base;
         @include text-body-md;
         font-weight: bold;
+        margin: 0 0.5em 0 0;
+        position: relative;
 
         a {
             position: absolute;

diff --git a/media/css/mozorg/about-patents.scss b/media/css/mozorg/about-patents.scss
@@ -27,7 +27,8 @@ ol li ol {
 
     h3 {
         @include text-title-xs;
-        @include font-base;
+        font-family: var(--body-font-family);
+        font-weight: 600;
     }
 
     details {

diff --git a/media/css/mozorg/about.scss b/media/css/mozorg/about.scss
@@ -143,7 +143,7 @@ $city-image-size: 106px;
 
     strong {
         @include font-size(50px);
-        @include font-mozilla;
+        font-family: var(--title-font-family);
         display: block;
         font-weight: bold;
         margin-bottom: $spacing-sm;