feat: added new fonts

src/assets/styles/custom-fonts.scss

@@ -0,0 +1,99 @@
+$font-family-sans-serif: "Helvetica Neue", Helvetica, "Open Sans", Arial, sans-serif;
+
+$font-family-open-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+
+$font-family-trebuchet: 'TrebuchetMS', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+
+$font-family-montserrat: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+
+$font-family-source-sans-pro: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+
+$font-family-noto-kufi-arabic: 'Noto Kufi Arabic', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+
+
+@font-face {
+  font-family: 'Open Sans';
+  src:
+      url('../fonts/OpenSans/OpenSans-Regular-webfont.woff2') format('woff2'),
+      url('../fonts/OpenSans/OpenSans-Regular-webfont.woff') format('woff'),
+      url('../fonts/OpenSans/OpenSans-Regular-webfont.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'TrebuchetMS';
+  src:
+      url('../fonts/TrebuchetMS/TrebuchetMS.eot') format('embedded-opentype'),
+      url('../fonts/TrebuchetMS/TrebuchetMS.woff') format('woff'),
+      url('../fonts/TrebuchetMS/TrebuchetMS.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src:
+      url('../fonts/Montserrat/Montserrat.eot') format('embedded-opentype'),
+      url('../fonts/Montserrat/Montserrat.woff') format('woff'),
+      url('../fonts/Montserrat/Montserrat.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Source Sans Pro';
+  src:
+      url('../fonts/SourceSansPro/SourceSansPro.eot') format('embedded-opentype'),
+      url('../fonts/SourceSansPro/SourceSansPro.woff2') format('woff2'),
+      url('../fonts/SourceSansPro/SourceSansPro.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+    font-family: 'Noto Kufi Arabic';
+    src:
+        url('../fonts/NotoKufiArabic/NotoKufiArabic-Regular.woff2') format('woff2'),
+        url('../fonts/NotoKufiArabic/NotoKufiArabic-Regular.woff') format('woff'),
+        url('../fonts/NotoKufiArabic/NotoKufiArabic-Regular.ttf') format('truetype');
+    font-weight: 400;
+    font-style: normal;
+  }
+
+
+#main-content, #course-content {
+  &.font-open-sans {
+      font-family: $font-family-open-sans !important;
+      &, h1, h2, h3, h4, h5, h6, p, label, select {
+          font-family: $font-family-open-sans !important;
+      }
+  }
+  &.font-trebuchet {
+      font-family: $font-family-trebuchet !important;
+      &, h1, h2, h3, h4, h5, h6, p, label, select {
+          font-family: $font-family-trebuchet !important;
+      };
+      &, .h1, .h2, .h3, .h4, .h5, .h6, .p, .label, .select {
+          font-family: $font-family-trebuchet !important;
+      }
+  }
+  &.font-montserrat {
+      font-family: $font-family-montserrat !important;
+      &, h1, h2, h3, h4, h5, h6, p, label, select {
+          font-family: $font-family-montserrat !important;
+      }
+  }
+  &.font-source-sans-pro {
+      font-family: $font-family-source-sans-pro !important;
+      &, h1, h2, h3, h4, h5, h6, p, label, select {
+          font-family: $font-family-source-sans-pro !important;
+      }
+  }
+  &.font-noto-kufi-arabic {
+    font-family: $font-family-noto-kufi-arabic !important;
+    &, h1, h2, h3, h4, h5, h6, p, label, select {
+        font-family: $font-family-noto-kufi-arabic !important;
+    }
+}
+}

src/course-outline/CourseOutline.jsx

@@ -21,7 +21,9 @@ import {
   SortableContext,
   verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
-import { useLocation } from 'react-router-dom';
+import { useLocation, useParams } from 'react-router-dom';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { getConfig } from '@edx/frontend-platform';
 import { CourseAuthoringOutlineSidebarSlot } from '../plugin-slots/CourseAuthoringOutlineSidebarSlot';
 
 import { LoadingSpinner } from '../generic/Loading';
@@ -121,6 +123,16 @@ const CourseOutline = ({ courseId }) => {
     errors,
   } = useCourseOutline({ courseId });
 
+  const { courseId: courseIdFromUrl } = useParams();
+  const [courseFont, setCourseFont] = useState('');
+
+  useEffect(() => {
+    const url = `${getConfig().LMS_BASE_URL}/wikimedia_general/api/v0/wiki_metadata/${courseIdFromUrl}`;
+    getAuthenticatedHttpClient().get(url).then(({ data }) => {
+      setCourseFont(data.course_font);
+    });
+  }, [courseIdFromUrl]);
+
   // Use `setToastMessage` to show the toast.
   const [toastMessage, setToastMessage] = useState(/** @type{null|string} */ (null));
 
@@ -259,7 +271,7 @@ const CourseOutline = ({ courseId }) => {
         <title>{getPageHeadTitle(courseName, intl.formatMessage(messages.headingTitle))}</title>
       </Helmet>
       <Container size="xl" className="px-4">
-        <section className="course-outline-container mb-4 mt-5">
+        <section id="main-content" className={`course-outline-container mb-4 mt-5 ${courseFont}`}>
           <PageAlerts
             courseId={courseId}
             notificationDismissUrl={notificationDismissUrl}

src/index.scss

@@ -32,6 +32,7 @@
 @import "certificates/scss/Certificates";
 @import "group-configurations/GroupConfigurations";
 @import "optimizer-page/scan-results/ScanResults";
+@import "assets/styles/custom-fonts";
 
 // To apply the glow effect to the selected Section/Subsection, in the Course Outline
 div.row:has(> div > div.highlight) {