Refresh: update brand fonts globally [fix #15088]

mozilla · Sep 13, 2024 · 54235b9 · 54235b9
1 parent a8f69d1
commit 54235b9
Show file tree

Hide file tree

Showing 37 changed files with 247 additions and 82 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/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/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 {
@@ -64,5 +74,7 @@ $m24-font-path: '/media/fonts/m24/';
         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;

diff --git a/media/css/mozorg/account.scss b/media/css/mozorg/account.scss
@@ -60,7 +60,7 @@ $image-path: '/media/protocol/img';
 .accounts-products {
     h2 {
         @include text-title-xs;
-        @include font-base;
+        font-family: var(--body-font-family);
     }
 
     h4 {

diff --git a/media/css/mozorg/antiharassment-tool.scss b/media/css/mozorg/antiharassment-tool.scss
@@ -198,8 +198,8 @@ $aht-color-secondary: #FDA1DE;
     }
 
     .mzp-c-picto-heading {
-        @include font-base;
         @include font-size(18px);
+        font-family: var(--body-font-family);
         margin-bottom: $spacing-lg;
     }
 }
diff --git a/media/css/mozorg/home/home-new.scss b/media/css/mozorg/home/home-new.scss
@@ -47,8 +47,8 @@ header {
         }
 
         p {
-            @include font-mozilla;
             @include font-size(18px);
+            font-family: var(--title-font-family);
             margin: 0 auto;
             max-width: 780px;
             line-height: 1.4;
@@ -68,7 +68,6 @@ header {
 
 .c-homepage {
     h2 {
-        @include font-mozilla;
         text-align: center;
 
         @media #{$mq-xs} {
@@ -98,7 +97,7 @@ header {
 
         blockquote,
         cite {
-            @include font-base;
+            font-family: var(--body-font-family);
             text-align: center;
         }
 
@@ -175,9 +174,9 @@ header {
     }
 
     h3 {
-        @include font-base;
         @include text-body-md;
-        font-weight: bold;
+        font-family: var(--body-font-family);
+        font-weight: 600;
         line-height: 1.2;
     }
 

diff --git a/media/css/mozorg/home/includes/featured-vpn.scss b/media/css/mozorg/home/includes/featured-vpn.scss
@@ -10,7 +10,7 @@ $image-path: '/media/protocol/img';
 @import '~@mozilla-protocol/core/protocol/css/includes/lib';
 
 .vpn-feature {
-    @include font-base;
+    font-family: var(--body-font-family);
     padding-top: 0;
 
     .feature-wrapper {
@@ -38,8 +38,8 @@ $image-path: '/media/protocol/img';
     }
 
     h2 {
-        @include font-base;
         @include text-title-xs;
+        font-family: var(--body-font-family);
         font-weight: bold;
         text-align: center;
         margin: $spacing-lg 0;

diff --git a/media/css/mozorg/home/includes/mofo-donate-promo.scss b/media/css/mozorg/home/includes/mofo-donate-promo.scss
@@ -10,7 +10,7 @@ $image-path: '/media/protocol/img';
 @import '~@mozilla-protocol/core/protocol/css/includes/lib';
 
 .mofo-donate-promo {
-    @include font-base;
+    font-family: var(--body-font-family);
     padding-top: 0;
 
     .feature-wrapper {
@@ -38,8 +38,8 @@ $image-path: '/media/protocol/img';
     }
 
     h2 {
-        @include font-base;
         @include text-title-xs;
+        font-family: var(--body-font-family);
         font-weight: bold;
         text-align: center;
         margin: $spacing-lg 0;