Bundle Inter font for proper font weights [SCI-8646]

app/assets/stylesheets/application.scss

@@ -4,6 +4,7 @@
  *= require rails_bootstrap_forms
  *= require bootstrap-select
  *= require sn-icon-font
+ *= require sn-inter-font
  *= stub reports_pdf
  */
 

app/assets/stylesheets/layouts/print_protocol.scss

@@ -20,7 +20,7 @@
 }
 
 body {
-  font-family: Inter, "Open Sans", Arial, Helvetica, sans-serif;
+  font-family: "SN Inter", "Open Sans", Arial, Helvetica, sans-serif;
   font-size: 16px;
   -webkit-print-color-adjust: exact;
   print-color-adjust: exact;

app/assets/stylesheets/shared_styles/constants/fonts.scss

@@ -1,6 +1,6 @@
 // scss-lint:disable ImportantRule
 
-$font-family-inter: Inter;
+$font-family-inter: "SN Inter";
 $font-family-sans-serif: "Open Sans", Arial, Helvetica, sans-serif;
 $font-family-serif: Georgia, "Times New Roman", Times, serif;
 $font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;

app/javascript/packs/fonts.scss

@@ -1,3 +0,0 @@
-@import "@fontsource/inter/latin.css";
-@import "@fontsource/inter/cyrillic.css";
-@import "@fontsource/inter/greek.css";

app/javascript/packs/tiny_mce.js

@@ -40,7 +40,7 @@ import contentCss from '!!raw-loader!tinymce/skins/content/default/content.min.c
 import contentUiCss from '!!raw-loader!tinymce/skins/ui/tinymce-5/content.min.css';
 
 const contentPStyle = `p { margin: 0; padding: 0;}`;
-const contentBodyStyle = `body { font-family: Inter, "Open Sans", Arial, Helvetica, sans-serif }`;
+const contentBodyStyle = `body { font-family: "SN Inter", "Open Sans", Arial, Helvetica, sans-serif }`;
 const contentStyle = [contentCss, contentUiCss, contentBodyStyle, contentPStyle].map((s) => s.toString()).join('\n');
 
 // Optional pre-initialization method

config/webpack/webpack.config.js

@@ -11,7 +11,6 @@ const mode = process.env.NODE_ENV === 'development' ? 'development' : 'productio
 
 const entryList = {
   application_pack: './app/javascript/packs/application.js',
-  fonts: './app/javascript/packs/fonts.scss',
   emoji_button: './app/javascript/packs/emoji_button.js',
   fontawesome: './app/javascript/packs/fontawesome.scss',
   prism: './app/javascript/packs/prism.js',

package.json

@@ -44,7 +44,6 @@
     "@babel/core": "^7.21.3",
     "@babel/plugin-transform-runtime": "^7.21.0",
     "@babel/preset-env": "^7.20.2",
-    "@fontsource/inter": "^5.0.3",
     "@fortawesome/fontawesome-free": "^5.2.0",
     "@joeattardi/emoji-button": "^4.6.2",
     "ajv": "6.12.6",

vendor/assets/stylesheets/sn-inter-font.css

@@ -0,0 +1,17 @@
+@font-face {
+  font-family: "SN Inter";
+  src: url("fonts/Inter-Regular.ttf") format("truetype");
+  font-weight: normal;
+}
+
+@font-face {
+  font-family: "SN Inter";
+  src: url("fonts/Inter-SemiBold.ttf") format("truetype");
+  font-weight: bold;
+}
+
+@font-face {
+  font-family: "SN Inter";
+  src: url("fonts/Inter-Bold.ttf") format("truetype");
+  font-weight: 900;
+}

yarn.lock

@@ -959,11 +959,6 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.39.0.tgz#58b536bcc843f4cd1e02a7e6171da5c040f4d44b"
   integrity sha512-kf9RB0Fg7NZfap83B3QOqOGg9QmD9yBudqQXzzOtn3i4y7ZUXe5ONeW34Gwi+TxhH4mvj72R1Zc300KUMa9Bng==
 
-"@fontsource/inter@^5.0.3":
-  version "5.0.3"
-  resolved "https://registry.yarnpkg.com/@fontsource/inter/-/inter-5.0.3.tgz#30a1c0b974e29d72eddaec0c45655597ffa0bf80"
-  integrity sha512-JJvh5xht71F6e0E5r2+Ffu8g+CYAxMvnGJm9ZMg5IIjy8UwxLp+8C99TgPJupdEyBpEJv0wuMG2Rd183z/bV8g==
-
 "@fortawesome/fontawesome-common-types@^0.2.36":
   version "0.2.36"
   resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz#b44e52db3b6b20523e0c57ef8c42d315532cb903"