Merge pull request #16827 from overleaf/mf-change-font-to-dedicated-icon

[website-redesign] Optimize page speed for website redesign pages

GitOrigin-RevId: c4e88b4dd3c44866779f35a0ebc1e808d6df7780

services/web/frontend/fonts/dm-mono.css

@@ -1,30 +1,15 @@
 /* We're using the "ss05" (stylistic set 5) version of the DM Mono, on the font-feature-settings rule */
 /* https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings */
-/* We use the ss05 specifically to remove the "squiggle" below the f letter. */ 
+/* We use the ss05 specifically to remove the "squiggle" below the f letter. */
 /* You can try removing the `font-feature-settings` rule and check what happens to the letter "f", */
 /* as it's quite hard to describe it with sentences alone */
 
-@font-face {
-  font-family: 'DM Mono';
-  font-feature-settings: 'ss05';
-  font-style: normal;
-  font-weight: 300;
-  src: url('dm-mono/DMMono-Light.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'DM Mono';
-  font-feature-settings: 'ss05';
-  font-style: italic;
-  font-weight: 300;
-  src: url('dm-mono/DMMono-LightItalic.woff2') format('woff2');
-}
-
 @font-face {
   font-family: 'DM Mono';
   font-feature-settings: 'ss05';
   font-style: normal;
   font-weight: 400;
+  font-display: fallback;
   src: url('dm-mono/DMMono-Regular.woff2') format('woff2');
 }
 
@@ -33,6 +18,7 @@
   font-feature-settings: 'ss05';
   font-style: italic;
   font-weight: 400;
+  font-display: fallback;
   src: url('dm-mono/DMMono-Italic.woff2') format('woff2');
 }
 
@@ -41,6 +27,7 @@
   font-feature-settings: 'ss05';
   font-style: normal;
   font-weight: 500;
+  font-display: fallback;
   src: url('dm-mono/DMMono-Medium.woff2') format('woff2');
 }
 
@@ -49,5 +36,6 @@
   font-feature-settings: 'ss05';
   font-style: italic;
   font-weight: 500;
+  font-display: fallback;
   src: url('dm-mono/DMMono-MediumItalic.woff2') format('woff2');
 }

services/web/frontend/fonts/noto-sans.css

@@ -1,53 +1,9 @@
-/* Noto Sans - Thin */
-@font-face {
-  font-family: 'Noto Sans';
-  font-style: normal;
-  font-weight: 100;
-  src: url('noto-sans/NotoSans-Thin.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'Noto Sans';
-  font-style: italic;
-  font-weight: 100;
-  src: url('noto-sans/NotoSans-ThinItalic.woff2') format('woff2');
-}
-
-/* Noto Sans - ExtraLight */
-@font-face {
-  font-family: 'Noto Sans';
-  font-style: normal;
-  font-weight: 200;
-  src: url('noto-sans/NotoSans-ExtraLight.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'Noto Sans';
-  font-style: italic;
-  font-weight: 200;
-  src: url('noto-sans/NotoSans-ExtraLightItalic.woff2') format('woff2');
-}
-
-/* Noto Sans - Light */
-@font-face {
-  font-family: 'Noto Sans';
-  font-style: normal;
-  font-weight: 300;
-  src: url('noto-sans/NotoSans-Light.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'Noto Sans';
-  font-style: italic;
-  font-weight: 300;
-  src: url('noto-sans/NotoSans-LightItalic.woff2') format('woff2');
-}
-
 /* Noto Sans - Regular */
 @font-face {
   font-family: 'Noto Sans';
   font-style: normal;
   font-weight: 400;
+  font-display: fallback;
   src: url('noto-sans/NotoSans-Regular.woff2') format('woff2');
 }
 
@@ -55,6 +11,7 @@
   font-family: 'Noto Sans';
   font-style: italic;
   font-weight: 400;
+  font-display: fallback;
   src: url('noto-sans/NotoSans-Italic.woff2') format('woff2');
 }
 
@@ -63,6 +20,7 @@
   font-family: 'Noto Sans';
   font-style: normal;
   font-weight: 500;
+  font-display: fallback;
   src: url('noto-sans/NotoSans-Medium.woff2') format('woff2');
 }
 
@@ -70,6 +28,7 @@
   font-family: 'Noto Sans';
   font-style: italic;
   font-weight: 500;
+  font-display: fallback;
   src: url('noto-sans/NotoSans-MediumItalic.woff2') format('woff2');
 }
 
@@ -78,6 +37,7 @@
   font-family: 'Noto Sans';
   font-style: normal;
   font-weight: 600;
+  font-display: fallback;
   src: url('noto-sans/NotoSans-SemiBold.woff2') format('woff2');
 }
 
@@ -85,50 +45,6 @@
   font-family: 'Noto Sans';
   font-style: italic;
   font-weight: 600;
+  font-display: fallback;
   src: url('noto-sans/NotoSans-SemiBoldItalic.woff2') format('woff2');
 }
-
-/* Noto Sans - Bold */
-@font-face {
-  font-family: 'Noto Sans';
-  font-style: normal;
-  font-weight: 700;
-  src: url('noto-sans/NotoSans-Bold.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'Noto Sans';
-  font-style: italic;
-  font-weight: 700;
-  src: url('noto-sans/NotoSans-BoldItalic.woff2') format('woff2');
-}
-
-/* Noto Sans - ExtraBold */
-@font-face {
-  font-family: 'Noto Sans';
-  font-style: normal;
-  font-weight: 800;
-  src: url('noto-sans/NotoSans-ExtraBold.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'Noto Sans';
-  font-style: italic;
-  font-weight: 800;
-  src: url('noto-sans/NotoSans-ExtraBoldItalic.woff2') format('woff2');
-}
-
-/* Noto Sans - Black */
-@font-face {
-  font-family: 'Noto Sans';
-  font-style: normal;
-  font-weight: 900;
-  src: url('noto-sans/NotoSans-Black.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'Noto Sans';
-  font-style: italic;
-  font-weight: 900;
-  src: url('noto-sans/NotoSans-BlackItalic.woff2') format('woff2');
-}

services/web/frontend/stylesheets/app/website-redesign.less

@@ -804,7 +804,6 @@
   .green-round-background {
     .round-background;
     background: var(--mint-green);
-    color: var(--dark-jungle-green);
   }
 
   .blue-round-background {

services/web/public/img/website-redesign/book_5.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="41" viewBox="0 0 32 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.35704 40.47C3.89603 40.47 2.63794 39.9749 1.58276 38.9846C0.527587 37.9944 0 36.7688 0 35.3078V8.13296C0 6.89922 0.381486 5.79534 1.14446 4.82134C1.90743 3.84733 2.90579 3.23046 4.13953 2.97072L18.7496 0.0974007C19.9509 -0.162335 21.0223 0.0974007 21.9639 0.876607C22.9054 1.65581 23.3762 2.66229 23.3762 3.89603V27.1261C23.3762 28.0676 23.084 28.9037 22.4996 29.6342C21.9152 30.3647 21.1684 30.8111 20.2593 30.9734L4.91874 34.0416C4.62653 34.1065 4.38303 34.2607 4.18823 34.5042C3.99343 34.7477 3.89603 35.0156 3.89603 35.3078C3.89603 35.6649 4.04213 35.9652 4.33433 36.2087C4.62653 36.4522 4.96744 36.574 5.35704 36.574H27.2722V7.35375C27.2722 6.80182 27.4589 6.33916 27.8323 5.96579C28.2056 5.59242 28.6683 5.40574 29.2202 5.40574C29.7722 5.40574 30.2348 5.59242 30.6082 5.96579C30.9815 6.33916 31.1682 6.80182 31.1682 7.35375V36.574C31.1682 37.6454 30.7867 38.5626 30.0238 39.3255C29.2608 40.0885 28.3436 40.47 27.2722 40.47H5.35704ZM8.18166 29.4637C8.6362 29.3663 9.00957 29.1391 9.30177 28.7819C9.59397 28.4248 9.74007 28.0189 9.74007 27.5644V8.23036C9.74007 7.61349 9.50469 7.11025 9.03392 6.72065C8.56315 6.33105 8.01933 6.20118 7.40245 6.33105C6.94792 6.42845 6.57455 6.65572 6.28235 7.01285C5.99014 7.36999 5.84404 7.77582 5.84404 8.23036V27.5644C5.84404 28.1813 6.07943 28.6845 6.5502 29.0741C7.02097 29.4637 7.56479 29.5936 8.18166 29.4637Z" fill="#4354A3"/>
+</svg>

services/web/public/img/website-redesign/function.svg

@@ -0,0 +1,3 @@
+<svg width="37" height="37" viewBox="0 0 37 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.2917 30.625V26.5417H17.4563L22.8156 20.4167L17.4563 14.2917H14.0875L10.8208 31.85C10.5486 33.3813 9.9191 34.5807 8.93229 35.4484C7.94549 36.3162 6.68646 36.75 5.15521 36.75C3.62396 36.75 2.38194 36.3417 1.42917 35.525C0.476389 34.7083 0 33.6194 0 32.2583C0 31.1694 0.289236 30.2932 0.867708 29.6297C1.44618 28.9661 2.17778 28.6344 3.0625 28.6344C3.91319 28.6344 4.63628 28.9236 5.23177 29.5021C5.82726 30.0806 6.125 30.7781 6.125 31.5948C6.125 31.7649 6.11649 31.9181 6.09948 32.0542C6.08247 32.1903 6.05694 32.3434 6.02292 32.5135C6.19306 32.4795 6.33767 32.3859 6.45677 32.2328C6.57587 32.0797 6.66944 31.867 6.7375 31.5948L9.90208 14.2917H4.08333V10.2083H10.6677L11.7396 4.38958C11.9778 3.09653 12.6158 2.04167 13.6536 1.225C14.6915 0.408333 15.925 0 17.3542 0C18.8514 0 20.0764 0.442361 21.0292 1.32708C21.9819 2.21181 22.4583 3.31771 22.4583 4.64479C22.4583 5.66563 22.1691 6.50781 21.5906 7.17135C21.0122 7.8349 20.2806 8.16667 19.3958 8.16667C18.5451 8.16667 17.8221 7.87743 17.2266 7.29896C16.6311 6.72049 16.3333 6.0059 16.3333 5.15521C16.3333 4.98507 16.3418 4.83194 16.3589 4.69583C16.3759 4.55972 16.4014 4.4066 16.4354 4.23646C16.2313 4.30451 16.0781 4.4066 15.976 4.54271C15.874 4.67882 15.7889 4.88299 15.7208 5.15521L14.8531 10.2083H24.5V14.2917H22.8667L25.5208 17.3031L28.175 14.2917H26.5417V10.2083H36.75V14.2917H33.5854L28.226 20.4167L33.5854 26.5417H36.75V30.625H26.5417V26.5417H28.175L25.5208 23.4792L22.8667 26.5417H24.5V30.625H14.2917Z" fill="#4354A3"/>
+</svg>

services/web/public/img/website-redesign/material-symbols-arrow-outward.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20"><path d="M648-645 268-265q-11 11-25 10.5T218-266q-11-11-11-25.5t11-25.5l379-379H276q-15.3 0-25.65-10.289-10.35-10.29-10.35-25.5Q240-747 250.35-757.5 260.7-768 276-768h408q15.3 0 25.65 10.35Q720-747.3 720-732v408q0 15.3-10.289 25.65-10.29 10.35-25.5 10.35Q669-288 658.5-298.35 648-308.7 648-324v-321Z"/></svg>

services/web/public/img/website-redesign/material-symbols-arrow-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20" fill="#098842"><path d="M630-444H228.049q-15.321 0-25.685-10.289Q192-464.579 192-479.789 192-495 202.364-505.5q10.364-10.5 25.685-10.5H630l-80-80q-11-11-11-25.5t10.522-25.5Q561-658 575.5-658q14.5 0 25.5 11l142.333 142.333Q748-500 750.5-493.7q2.5 6.3 2.5 13.5t-2.5 13.5q-2.5 6.3-7.5 11.7L601-313q-11 11-25 10.5T550.522-314Q540-325 540-339.5t11-25.5l79-79Z"/></svg>

services/web/public/img/website-redesign/material-symbols-check-blue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20" fill="#6597e0"><path d="m395-387 264-263q11-11 25-10.5t25 11.5q11 11 11 25t-11 25L421-311q-11 11-25.5 11T370-311L251-430q-11-11-11-25t11-25q11-11 25-11t25 11l94 93Z"/></svg>

services/web/public/img/website-redesign/material-symbols-check-green.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20" fill="#0f271a"><path d="m395-387 264-263q11-11 25-10.5t25 11.5q11 11 11 25t-11 25L421-311q-11 11-25.5 11T370-311L251-430q-11-11-11-25t11-25q11-11 25-11t25 11l94 93Z"/></svg>

services/web/public/img/website-redesign/preview.svg

@@ -0,0 +1,3 @@
+<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.66667 42C3.38333 42 2.28472 41.5431 1.37083 40.6292C0.456944 39.7153 0 38.6167 0 37.3333V4.66667C0 3.38333 0.456944 2.28472 1.37083 1.37083C2.28472 0.456944 3.38333 0 4.66667 0H37.3333C38.6167 0 39.7153 0.456944 40.6292 1.37083C41.5431 2.28472 42 3.38333 42 4.66667V37.3333C42 38.6167 41.5431 39.7153 40.6292 40.6292C39.7153 41.5431 38.6167 42 37.3333 42H4.66667ZM4.66667 37.3333H37.3333V9.33333H4.66667V37.3333ZM21 32.6667C17.8111 32.6667 14.9625 31.8014 12.4542 30.0708C9.94583 28.3403 8.12778 26.0944 7 23.3333C8.12778 20.5722 9.94583 18.3264 12.4542 16.5958C14.9625 14.8653 17.8111 14 21 14C24.1889 14 27.0375 14.8653 29.5458 16.5958C32.0542 18.3264 33.8722 20.5722 35 23.3333C33.8722 26.0944 32.0542 28.3403 29.5458 30.0708C27.0375 31.8014 24.1889 32.6667 21 32.6667ZM21 26.8333C20.0278 26.8333 19.2014 26.4931 18.5208 25.8125C17.8403 25.1319 17.5 24.3056 17.5 23.3333C17.5 22.3611 17.8403 21.5347 18.5208 20.8542C19.2014 20.1736 20.0278 19.8333 21 19.8333C21.9722 19.8333 22.7986 20.1736 23.4792 20.8542C24.1597 21.5347 24.5 22.3611 24.5 23.3333C24.5 24.3056 24.1597 25.1319 23.4792 25.8125C22.7986 26.4931 21.9722 26.8333 21 26.8333ZM21 29.1667C22.6333 29.1667 24.0139 28.6028 25.1417 27.475C26.2694 26.3472 26.8333 24.9667 26.8333 23.3333C26.8333 21.7 26.2694 20.3194 25.1417 19.1917C24.0139 18.0639 22.6333 17.5 21 17.5C19.3667 17.5 17.9861 18.0639 16.8583 19.1917C15.7306 20.3194 15.1667 21.7 15.1667 23.3333C15.1667 24.9667 15.7306 26.3472 16.8583 27.475C17.9861 28.6028 19.3667 29.1667 21 29.1667Z" fill="#4354A3"/>
+</svg>

services/web/public/img/website-redesign/school.svg

@@ -0,0 +1,3 @@
+<svg width="50" height="42" viewBox="0 0 50 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M45.0004 30.3342V16.5676L26.2171 26.7759C25.5171 27.1648 24.7782 27.3592 24.0004 27.3592C23.2226 27.3592 22.4837 27.1648 21.7837 26.7759L2.06706 16.0426C1.63928 15.8092 1.33789 15.5176 1.16289 15.1676C0.987891 14.8176 0.900391 14.4287 0.900391 14.0009C0.900391 13.5731 0.987891 13.1842 1.16289 12.8342C1.33789 12.4842 1.63928 12.1926 2.06706 11.9592L21.7837 1.22591C22.1337 1.03147 22.4934 0.885634 22.8629 0.788411C23.2323 0.691189 23.6115 0.642578 24.0004 0.642578C24.3893 0.642578 24.7684 0.691189 25.1379 0.788411C25.5073 0.885634 25.8671 1.03147 26.2171 1.22591L48.4421 13.3592C48.8309 13.5537 49.1323 13.8356 49.3462 14.2051C49.5601 14.5745 49.6671 14.9731 49.6671 15.4009V30.3342C49.6671 30.9954 49.4434 31.5495 48.9962 31.9967C48.549 32.444 47.9948 32.6676 47.3337 32.6676C46.6726 32.6676 46.1184 32.444 45.6712 31.9967C45.224 31.5495 45.0004 30.9954 45.0004 30.3342ZM21.7837 40.7759L10.1171 34.4759C9.33928 34.0481 8.7365 33.4648 8.30872 32.7259C7.88095 31.987 7.66706 31.1898 7.66706 30.3342V21.4676L21.7837 29.1092C22.4837 29.4981 23.2226 29.6926 24.0004 29.6926C24.7782 29.6926 25.5171 29.4981 26.2171 29.1092L40.3337 21.4676V30.3342C40.3337 31.1898 40.1198 31.987 39.6921 32.7259C39.2643 33.4648 38.6615 34.0481 37.8837 34.4759L26.2171 40.7759C25.8671 40.9704 25.5073 41.1162 25.1379 41.2134C24.7684 41.3106 24.3893 41.3592 24.0004 41.3592C23.6115 41.3592 23.2323 41.3106 22.8629 41.2134C22.4934 41.1162 22.1337 40.9704 21.7837 40.7759Z" fill="#4354A3"/>
+</svg>