diff --git a/frontend/text-editor/src/fonts.css b/frontend/text-editor/src/fonts.css
new file mode 100644
index 0000000000..7f89a84e13
--- /dev/null
+++ b/frontend/text-editor/src/fonts.css
@@ -0,0 +1,958 @@
+/* cyrillic-ext */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: italic;
+ font-weight: 100;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTjWacfw6zH4dthXcyms1lPpC8I_b0juU057p-xEJZj11l4.woff2) format('woff2');
+ unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: italic;
+ font-weight: 100;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTjWacfw6zH4dthXcyms1lPpC8I_b0juU057p-xEJ9j11l4.woff2) format('woff2');
+ unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* vietnamese */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: italic;
+ font-weight: 100;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTjWacfw6zH4dthXcyms1lPpC8I_b0juU057p-xEJRj11l4.woff2) format('woff2');
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+/* latin-ext */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: italic;
+ font-weight: 100;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTjWacfw6zH4dthXcyms1lPpC8I_b0juU057p-xEJVj11l4.woff2) format('woff2');
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: italic;
+ font-weight: 100;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTjWacfw6zH4dthXcyms1lPpC8I_b0juU057p-xEJtj1w.woff2) format('woff2');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* cyrillic-ext */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: italic;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTkWacfw6zH4dthXcyms1lPpC8I_b0juU057p8dAYxJ8mRBkw.woff2) format('woff2');
+ unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: italic;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTkWacfw6zH4dthXcyms1lPpC8I_b0juU057p8dAYxA8mRBkw.woff2) format('woff2');
+ unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* vietnamese */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: italic;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTkWacfw6zH4dthXcyms1lPpC8I_b0juU057p8dAYxL8mRBkw.woff2) format('woff2');
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+/* latin-ext */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: italic;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTkWacfw6zH4dthXcyms1lPpC8I_b0juU057p8dAYxK8mRBkw.woff2) format('woff2');
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: italic;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTkWacfw6zH4dthXcyms1lPpC8I_b0juU057p8dAYxE8mQ.woff2) format('woff2');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* cyrillic-ext */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: italic;
+ font-weight: 300;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTkWacfw6zH4dthXcyms1lPpC8I_b0juU057p95AoxJ8mRBkw.woff2) format('woff2');
+ unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: italic;
+ font-weight: 300;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTkWacfw6zH4dthXcyms1lPpC8I_b0juU057p95AoxA8mRBkw.woff2) format('woff2');
+ unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* vietnamese */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: italic;
+ font-weight: 300;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTkWacfw6zH4dthXcyms1lPpC8I_b0juU057p95AoxL8mRBkw.woff2) format('woff2');
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+/* latin-ext */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: italic;
+ font-weight: 300;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTkWacfw6zH4dthXcyms1lPpC8I_b0juU057p95AoxK8mRBkw.woff2) format('woff2');
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: italic;
+ font-weight: 300;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTkWacfw6zH4dthXcyms1lPpC8I_b0juU057p95AoxE8mQ.woff2) format('woff2');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* cyrillic-ext */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: italic;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFThWacfw6zH4dthXcyms1lPpC8I_b0juU057pffIJl70w.woff2) format('woff2');
+ unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: italic;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFThWacfw6zH4dthXcyms1lPpC8I_b0juU057pfWIJl70w.woff2) format('woff2');
+ unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* vietnamese */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: italic;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFThWacfw6zH4dthXcyms1lPpC8I_b0juU057pfdIJl70w.woff2) format('woff2');
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+/* latin-ext */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: italic;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFThWacfw6zH4dthXcyms1lPpC8I_b0juU057pfcIJl70w.woff2) format('woff2');
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: italic;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFThWacfw6zH4dthXcyms1lPpC8I_b0juU057pfSIJk.woff2) format('woff2');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* cyrillic-ext */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: italic;
+ font-weight: 500;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTkWacfw6zH4dthXcyms1lPpC8I_b0juU057p8hA4xJ8mRBkw.woff2) format('woff2');
+ unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: italic;
+ font-weight: 500;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTkWacfw6zH4dthXcyms1lPpC8I_b0juU057p8hA4xA8mRBkw.woff2) format('woff2');
+ unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* vietnamese */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: italic;
+ font-weight: 500;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTkWacfw6zH4dthXcyms1lPpC8I_b0juU057p8hA4xL8mRBkw.woff2) format('woff2');
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+/* latin-ext */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: italic;
+ font-weight: 500;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTkWacfw6zH4dthXcyms1lPpC8I_b0juU057p8hA4xK8mRBkw.woff2) format('woff2');
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: italic;
+ font-weight: 500;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTkWacfw6zH4dthXcyms1lPpC8I_b0juU057p8hA4xE8mQ.woff2) format('woff2');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* cyrillic-ext */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: italic;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTkWacfw6zH4dthXcyms1lPpC8I_b0juU057p8NBIxJ8mRBkw.woff2) format('woff2');
+ unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: italic;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTkWacfw6zH4dthXcyms1lPpC8I_b0juU057p8NBIxA8mRBkw.woff2) format('woff2');
+ unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* vietnamese */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: italic;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTkWacfw6zH4dthXcyms1lPpC8I_b0juU057p8NBIxL8mRBkw.woff2) format('woff2');
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+/* latin-ext */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: italic;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTkWacfw6zH4dthXcyms1lPpC8I_b0juU057p8NBIxK8mRBkw.woff2) format('woff2');
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: italic;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTkWacfw6zH4dthXcyms1lPpC8I_b0juU057p8NBIxE8mQ.woff2) format('woff2');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* cyrillic-ext */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: italic;
+ font-weight: 700;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTkWacfw6zH4dthXcyms1lPpC8I_b0juU057p9pBYxJ8mRBkw.woff2) format('woff2');
+ unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: italic;
+ font-weight: 700;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTkWacfw6zH4dthXcyms1lPpC8I_b0juU057p9pBYxA8mRBkw.woff2) format('woff2');
+ unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* vietnamese */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: italic;
+ font-weight: 700;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTkWacfw6zH4dthXcyms1lPpC8I_b0juU057p9pBYxL8mRBkw.woff2) format('woff2');
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+/* latin-ext */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: italic;
+ font-weight: 700;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTkWacfw6zH4dthXcyms1lPpC8I_b0juU057p9pBYxK8mRBkw.woff2) format('woff2');
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: italic;
+ font-weight: 700;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTkWacfw6zH4dthXcyms1lPpC8I_b0juU057p9pBYxE8mQ.woff2) format('woff2');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* cyrillic-ext */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: italic;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTkWacfw6zH4dthXcyms1lPpC8I_b0juU057p91BoxJ8mRBkw.woff2) format('woff2');
+ unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: italic;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTkWacfw6zH4dthXcyms1lPpC8I_b0juU057p91BoxA8mRBkw.woff2) format('woff2');
+ unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* vietnamese */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: italic;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTkWacfw6zH4dthXcyms1lPpC8I_b0juU057p91BoxL8mRBkw.woff2) format('woff2');
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+/* latin-ext */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: italic;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTkWacfw6zH4dthXcyms1lPpC8I_b0juU057p91BoxK8mRBkw.woff2) format('woff2');
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: italic;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTkWacfw6zH4dthXcyms1lPpC8I_b0juU057p91BoxE8mQ.woff2) format('woff2');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* cyrillic-ext */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: italic;
+ font-weight: 900;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTkWacfw6zH4dthXcyms1lPpC8I_b0juU057p9RB4xJ8mRBkw.woff2) format('woff2');
+ unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: italic;
+ font-weight: 900;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTkWacfw6zH4dthXcyms1lPpC8I_b0juU057p9RB4xA8mRBkw.woff2) format('woff2');
+ unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* vietnamese */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: italic;
+ font-weight: 900;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTkWacfw6zH4dthXcyms1lPpC8I_b0juU057p9RB4xL8mRBkw.woff2) format('woff2');
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+/* latin-ext */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: italic;
+ font-weight: 900;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTkWacfw6zH4dthXcyms1lPpC8I_b0juU057p9RB4xK8mRBkw.woff2) format('woff2');
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: italic;
+ font-weight: 900;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTkWacfw6zH4dthXcyms1lPpC8I_b0juU057p9RB4xE8mQ.woff2) format('woff2');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* cyrillic-ext */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: normal;
+ font-weight: 100;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFThWacfw6zH4dthXcyms1lPpC8I_b0juU0xiJffIJl70w.woff2) format('woff2');
+ unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: normal;
+ font-weight: 100;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFThWacfw6zH4dthXcyms1lPpC8I_b0juU0xiJfWIJl70w.woff2) format('woff2');
+ unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* vietnamese */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: normal;
+ font-weight: 100;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFThWacfw6zH4dthXcyms1lPpC8I_b0juU0xiJfdIJl70w.woff2) format('woff2');
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+/* latin-ext */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: normal;
+ font-weight: 100;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFThWacfw6zH4dthXcyms1lPpC8I_b0juU0xiJfcIJl70w.woff2) format('woff2');
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: normal;
+ font-weight: 100;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFThWacfw6zH4dthXcyms1lPpC8I_b0juU0xiJfSIJk.woff2) format('woff2');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* cyrillic-ext */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: normal;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTiWacfw6zH4dthXcyms1lPpC8I_b0juU0xJIbFCrxG6mA.woff2) format('woff2');
+ unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: normal;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTiWacfw6zH4dthXcyms1lPpC8I_b0juU0xJIbFA7xG6mA.woff2) format('woff2');
+ unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* vietnamese */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: normal;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTiWacfw6zH4dthXcyms1lPpC8I_b0juU0xJIbFCLxG6mA.woff2) format('woff2');
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+/* latin-ext */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: normal;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTiWacfw6zH4dthXcyms1lPpC8I_b0juU0xJIbFCbxG6mA.woff2) format('woff2');
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: normal;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTiWacfw6zH4dthXcyms1lPpC8I_b0juU0xJIbFB7xG.woff2) format('woff2');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* cyrillic-ext */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: normal;
+ font-weight: 300;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTiWacfw6zH4dthXcyms1lPpC8I_b0juU0xQIXFCrxG6mA.woff2) format('woff2');
+ unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: normal;
+ font-weight: 300;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTiWacfw6zH4dthXcyms1lPpC8I_b0juU0xQIXFA7xG6mA.woff2) format('woff2');
+ unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* vietnamese */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: normal;
+ font-weight: 300;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTiWacfw6zH4dthXcyms1lPpC8I_b0juU0xQIXFCLxG6mA.woff2) format('woff2');
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+/* latin-ext */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: normal;
+ font-weight: 300;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTiWacfw6zH4dthXcyms1lPpC8I_b0juU0xQIXFCbxG6mA.woff2) format('woff2');
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: normal;
+ font-weight: 300;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTiWacfw6zH4dthXcyms1lPpC8I_b0juU0xQIXFB7xG.woff2) format('woff2');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* cyrillic-ext */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: normal;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTvWacfw6zH4dthXcyms1lPpC8I_b0juU055qfQOJ0.woff2) format('woff2');
+ unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: normal;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTvWacfw6zH4dthXcyms1lPpC8I_b0juU0576fQOJ0.woff2) format('woff2');
+ unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* vietnamese */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: normal;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTvWacfw6zH4dthXcyms1lPpC8I_b0juU055KfQOJ0.woff2) format('woff2');
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+/* latin-ext */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: normal;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTvWacfw6zH4dthXcyms1lPpC8I_b0juU055afQOJ0.woff2) format('woff2');
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: normal;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTvWacfw6zH4dthXcyms1lPpC8I_b0juU0566fQ.woff2) format('woff2');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* cyrillic-ext */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: normal;
+ font-weight: 500;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTiWacfw6zH4dthXcyms1lPpC8I_b0juU0xGITFCrxG6mA.woff2) format('woff2');
+ unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: normal;
+ font-weight: 500;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTiWacfw6zH4dthXcyms1lPpC8I_b0juU0xGITFA7xG6mA.woff2) format('woff2');
+ unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* vietnamese */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: normal;
+ font-weight: 500;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTiWacfw6zH4dthXcyms1lPpC8I_b0juU0xGITFCLxG6mA.woff2) format('woff2');
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+/* latin-ext */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: normal;
+ font-weight: 500;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTiWacfw6zH4dthXcyms1lPpC8I_b0juU0xGITFCbxG6mA.woff2) format('woff2');
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: normal;
+ font-weight: 500;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTiWacfw6zH4dthXcyms1lPpC8I_b0juU0xGITFB7xG.woff2) format('woff2');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* cyrillic-ext */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: normal;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTiWacfw6zH4dthXcyms1lPpC8I_b0juU0xNIPFCrxG6mA.woff2) format('woff2');
+ unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: normal;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTiWacfw6zH4dthXcyms1lPpC8I_b0juU0xNIPFA7xG6mA.woff2) format('woff2');
+ unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* vietnamese */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: normal;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTiWacfw6zH4dthXcyms1lPpC8I_b0juU0xNIPFCLxG6mA.woff2) format('woff2');
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+/* latin-ext */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: normal;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTiWacfw6zH4dthXcyms1lPpC8I_b0juU0xNIPFCbxG6mA.woff2) format('woff2');
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: normal;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTiWacfw6zH4dthXcyms1lPpC8I_b0juU0xNIPFB7xG.woff2) format('woff2');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* cyrillic-ext */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: normal;
+ font-weight: 700;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTiWacfw6zH4dthXcyms1lPpC8I_b0juU0xUILFCrxG6mA.woff2) format('woff2');
+ unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: normal;
+ font-weight: 700;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTiWacfw6zH4dthXcyms1lPpC8I_b0juU0xUILFA7xG6mA.woff2) format('woff2');
+ unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* vietnamese */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: normal;
+ font-weight: 700;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTiWacfw6zH4dthXcyms1lPpC8I_b0juU0xUILFCLxG6mA.woff2) format('woff2');
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+/* latin-ext */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: normal;
+ font-weight: 700;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTiWacfw6zH4dthXcyms1lPpC8I_b0juU0xUILFCbxG6mA.woff2) format('woff2');
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: normal;
+ font-weight: 700;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTiWacfw6zH4dthXcyms1lPpC8I_b0juU0xUILFB7xG.woff2) format('woff2');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* cyrillic-ext */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: normal;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTiWacfw6zH4dthXcyms1lPpC8I_b0juU0xTIHFCrxG6mA.woff2) format('woff2');
+ unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: normal;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTiWacfw6zH4dthXcyms1lPpC8I_b0juU0xTIHFA7xG6mA.woff2) format('woff2');
+ unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* vietnamese */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: normal;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTiWacfw6zH4dthXcyms1lPpC8I_b0juU0xTIHFCLxG6mA.woff2) format('woff2');
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+/* latin-ext */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: normal;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTiWacfw6zH4dthXcyms1lPpC8I_b0juU0xTIHFCbxG6mA.woff2) format('woff2');
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: normal;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTiWacfw6zH4dthXcyms1lPpC8I_b0juU0xTIHFB7xG.woff2) format('woff2');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* cyrillic-ext */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: normal;
+ font-weight: 900;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTiWacfw6zH4dthXcyms1lPpC8I_b0juU0xaIDFCrxG6mA.woff2) format('woff2');
+ unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: normal;
+ font-weight: 900;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTiWacfw6zH4dthXcyms1lPpC8I_b0juU0xaIDFA7xG6mA.woff2) format('woff2');
+ unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* vietnamese */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: normal;
+ font-weight: 900;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTiWacfw6zH4dthXcyms1lPpC8I_b0juU0xaIDFCLxG6mA.woff2) format('woff2');
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+/* latin-ext */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: normal;
+ font-weight: 900;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTiWacfw6zH4dthXcyms1lPpC8I_b0juU0xaIDFCbxG6mA.woff2) format('woff2');
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+ font-family: 'MontserratAlternates';
+ font-style: normal;
+ font-weight: 900;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTiWacfw6zH4dthXcyms1lPpC8I_b0juU0xaIDFB7xG.woff2) format('woff2');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* cyrillic-ext */
+@font-face {
+ font-family: 'Oswald';
+ font-style: normal;
+ font-weight: 200 700;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/oswald/v56/TK3iWkUHHAIjg752FD8Ghe4.woff2) format('woff2');
+ unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+ font-family: 'Oswald';
+ font-style: normal;
+ font-weight: 200 700;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/oswald/v56/TK3iWkUHHAIjg752HT8Ghe4.woff2) format('woff2');
+ unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* vietnamese */
+@font-face {
+ font-family: 'Oswald';
+ font-style: normal;
+ font-weight: 200 700;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/oswald/v56/TK3iWkUHHAIjg752Fj8Ghe4.woff2) format('woff2');
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+/* latin-ext */
+@font-face {
+ font-family: 'Oswald';
+ font-style: normal;
+ font-weight: 200 700;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/oswald/v56/TK3iWkUHHAIjg752Fz8Ghe4.woff2) format('woff2');
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+ font-family: 'Oswald';
+ font-style: normal;
+ font-weight: 200 700;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/oswald/v56/TK3iWkUHHAIjg752GT8G.woff2) format('woff2');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* fallback */
+@font-face {
+ font-family: 'Playwrite MX Guides';
+ font-style: normal;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://fonts.gstatic.com/s/playwritemxguides/v1/k3kMo9ESPe9dzQ1UGbvoZhnhbtfklWqN0qk.woff2) format('woff2');
+}
diff --git a/frontend/text-editor/src/index.html b/frontend/text-editor/src/index.html
index 2410dd7645..b53cd0a7d5 100644
--- a/frontend/text-editor/src/index.html
+++ b/frontend/text-editor/src/index.html
@@ -2,225 +2,551 @@
-
-
-
-
+
Penpot - Text Editor Playground
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
diff --git a/frontend/text-editor/src/main.js b/frontend/text-editor/src/main.js
deleted file mode 100644
index 1f58fc01be..0000000000
--- a/frontend/text-editor/src/main.js
+++ /dev/null
@@ -1,216 +0,0 @@
-/**
- * This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/.
- *
- * Copyright (c) KALEIDOS INC
- */
-
-import "./style.css";
-import "./editor/TextEditor.css";
-import { TextEditor } from "./editor/TextEditor";
-import { SelectionControllerDebug } from "./editor/debug/SelectionControllerDebug";
-
-const searchParams = new URLSearchParams(location.search);
-const debug = searchParams.has("debug")
- ? searchParams.get("debug").split(",")
- : [];
-
-const textEditorSelectionImposterElement = document.getElementById(
- "text-editor-selection-imposter",
-);
-
-const textEditorElement = document.querySelector(".text-editor-content");
-const textEditor = new TextEditor(textEditorElement, {
- styleDefaults: {
- "font-family": "sourcesanspro",
- "font-size": "14",
- "font-weight": "500",
- "font-style": "normal",
- "line-height": "1.2",
- "letter-spacing": "0",
- direction: "ltr",
- "text-align": "left",
- "text-transform": "none",
- "text-decoration": "none",
- "--typography-ref-id": '["~#\'",null]',
- "--typography-ref-file": '["~#\'",null]',
- "--font-id": '["~#\'","sourcesanspro"]',
- "--fills": '[["^ ","~:fill-color","#000000","~:fill-opacity",1]]',
- },
- selectionImposterElement: textEditorSelectionImposterElement,
- debug: new SelectionControllerDebug({
- direction: document.getElementById("direction"),
- multiElement: document.getElementById("multi"),
- multiInlineElement: document.getElementById("multi-inline"),
- multiParagraphElement: document.getElementById("multi-paragraph"),
- isParagraphStart: document.getElementById("is-paragraph-start"),
- isParagraphEnd: document.getElementById("is-paragraph-end"),
- isInlineStart: document.getElementById("is-inline-start"),
- isInlineEnd: document.getElementById("is-inline-end"),
- isTextAnchor: document.getElementById("is-text-anchor"),
- isTextFocus: document.getElementById("is-text-focus"),
- focusNode: document.getElementById("focus-node"),
- focusOffset: document.getElementById("focus-offset"),
- focusInline: document.getElementById("focus-inline"),
- focusParagraph: document.getElementById("focus-paragraph"),
- anchorNode: document.getElementById("anchor-node"),
- anchorOffset: document.getElementById("anchor-offset"),
- anchorInline: document.getElementById("anchor-inline"),
- anchorParagraph: document.getElementById("anchor-paragraph"),
- startContainer: document.getElementById("start-container"),
- startOffset: document.getElementById("start-offset"),
- endContainer: document.getElementById("end-container"),
- endOffset: document.getElementById("end-offset"),
- }),
-});
-
-const fontFamilyElement = document.getElementById("font-family");
-const fontSizeElement = document.getElementById("font-size");
-const fontWeightElement = document.getElementById("font-weight");
-const fontStyleElement = document.getElementById("font-style");
-
-const directionLTRElement = document.getElementById("direction-ltr");
-const directionRTLElement = document.getElementById("direction-rtl");
-
-const lineHeightElement = document.getElementById("line-height");
-const letterSpacingElement = document.getElementById("letter-spacing");
-
-const textAlignLeftElement = document.getElementById("text-align-left");
-const textAlignCenterElement = document.getElementById("text-align-center");
-const textAlignRightElement = document.getElementById("text-align-right");
-const textAlignJustifyElement = document.getElementById("text-align-justify");
-
-function onDirectionChange(e) {
- if (debug.includes("events")) {
- console.log(e);
- }
- if (e.target.checked) {
- textEditor.applyStylesToSelection({
- direction: e.target.value,
- });
- }
-}
-
-directionLTRElement.addEventListener("change", onDirectionChange);
-directionRTLElement.addEventListener("change", onDirectionChange);
-
-function onTextAlignChange(e) {
- if (debug.includes("events")) {
- console.log(e);
- }
- if (e.target.checked) {
- textEditor.applyStylesToSelection({
- "text-align": e.target.value,
- });
- }
-}
-
-textAlignLeftElement.addEventListener("change", onTextAlignChange);
-textAlignCenterElement.addEventListener("change", onTextAlignChange);
-textAlignRightElement.addEventListener("change", onTextAlignChange);
-textAlignJustifyElement.addEventListener("change", onTextAlignChange);
-
-fontFamilyElement.addEventListener("change", (e) => {
- if (debug.includes("events")) {
- console.log(e);
- }
- textEditor.applyStylesToSelection({
- "font-family": e.target.value,
- });
-});
-
-fontWeightElement.addEventListener("change", (e) => {
- if (debug.includes("events")) {
- console.log(e);
- }
- textEditor.applyStylesToSelection({
- "font-weight": e.target.value,
- });
-});
-
-fontSizeElement.addEventListener("change", (e) => {
- if (debug.includes("events")) {
- console.log(e);
- }
- textEditor.applyStylesToSelection({
- "font-size": e.target.value,
- });
-});
-
-lineHeightElement.addEventListener("change", (e) => {
- if (debug.includes("events")) {
- console.log(e);
- }
- textEditor.applyStylesToSelection({
- "line-height": e.target.value,
- });
-});
-
-letterSpacingElement.addEventListener("change", (e) => {
- if (debug.includes("events")) {
- console.log(e);
- }
- textEditor.applyStylesToSelection({
- "letter-spacing": e.target.value,
- });
-});
-
-fontStyleElement.addEventListener("change", (e) => {
- if (debug.includes("events")) {
- console.log(e);
- }
- textEditor.applyStylesToSelection({
- "font-style": e.target.value,
- });
-});
-
-function formatHTML(html, options) {
- const spaces = options?.spaces ?? 4;
- let indent = 0;
- return html.replace(/<\/?(.*?)>/g, (fullMatch) => {
- let str = fullMatch + "\n";
- if (fullMatch.startsWith("") --indent;
- }
- return str;
- });
-}
-
-const outputElement = document.getElementById("output");
-textEditorElement.addEventListener("input", (e) => {
- if (debug.includes("events")) {
- console.log(e);
- }
- outputElement.textContent = formatHTML(textEditor.element.innerHTML);
-});
-
-textEditor.addEventListener("stylechange", (e) => {
- if (debug.includes("events")) {
- console.log(e);
- }
- const fontSize = parseInt(e.detail.getPropertyValue("font-size"), 10);
- const fontWeight = e.detail.getPropertyValue("font-weight");
- const fontStyle = e.detail.getPropertyValue("font-style");
- const fontFamily = e.detail.getPropertyValue("font-family");
-
- fontFamilyElement.value = fontFamily;
- fontSizeElement.value = fontSize;
- fontStyleElement.value = fontStyle;
- fontWeightElement.value = fontWeight;
-
- const textAlign = e.detail.getPropertyValue("text-align");
- textAlignLeftElement.checked = textAlign === "left";
- textAlignCenterElement.checked = textAlign === "center";
- textAlignRightElement.checked = textAlign === "right";
- textAlignJustifyElement.checked = textAlign === "justify";
-
- const direction = e.detail.getPropertyValue("direction");
- directionLTRElement.checked = direction === "ltr";
- directionRTLElement.checked = direction === "rtl";
-});
diff --git a/frontend/text-editor/src/public/fonts/MontserratAlternates-Black.ttf b/frontend/text-editor/src/public/fonts/MontserratAlternates-Black.ttf
new file mode 100644
index 0000000000..6dd5ac6964
Binary files /dev/null and b/frontend/text-editor/src/public/fonts/MontserratAlternates-Black.ttf differ
diff --git a/frontend/text-editor/src/public/fonts/MontserratAlternates-BlackItalic.ttf b/frontend/text-editor/src/public/fonts/MontserratAlternates-BlackItalic.ttf
new file mode 100644
index 0000000000..706c6ff276
Binary files /dev/null and b/frontend/text-editor/src/public/fonts/MontserratAlternates-BlackItalic.ttf differ
diff --git a/frontend/text-editor/src/public/fonts/MontserratAlternates-Bold.ttf b/frontend/text-editor/src/public/fonts/MontserratAlternates-Bold.ttf
new file mode 100644
index 0000000000..6ed08dcc8a
Binary files /dev/null and b/frontend/text-editor/src/public/fonts/MontserratAlternates-Bold.ttf differ
diff --git a/frontend/text-editor/src/public/fonts/MontserratAlternates-BoldItalic.ttf b/frontend/text-editor/src/public/fonts/MontserratAlternates-BoldItalic.ttf
new file mode 100644
index 0000000000..81aa051b8e
Binary files /dev/null and b/frontend/text-editor/src/public/fonts/MontserratAlternates-BoldItalic.ttf differ
diff --git a/frontend/text-editor/src/public/fonts/MontserratAlternates-ExtraBold.ttf b/frontend/text-editor/src/public/fonts/MontserratAlternates-ExtraBold.ttf
new file mode 100644
index 0000000000..eba8cbd205
Binary files /dev/null and b/frontend/text-editor/src/public/fonts/MontserratAlternates-ExtraBold.ttf differ
diff --git a/frontend/text-editor/src/public/fonts/MontserratAlternates-ExtraBoldItalic.ttf b/frontend/text-editor/src/public/fonts/MontserratAlternates-ExtraBoldItalic.ttf
new file mode 100644
index 0000000000..8d26539678
Binary files /dev/null and b/frontend/text-editor/src/public/fonts/MontserratAlternates-ExtraBoldItalic.ttf differ
diff --git a/frontend/text-editor/src/public/fonts/MontserratAlternates-ExtraLight.ttf b/frontend/text-editor/src/public/fonts/MontserratAlternates-ExtraLight.ttf
new file mode 100644
index 0000000000..7f88a1ade3
Binary files /dev/null and b/frontend/text-editor/src/public/fonts/MontserratAlternates-ExtraLight.ttf differ
diff --git a/frontend/text-editor/src/public/fonts/MontserratAlternates-ExtraLightItalic.ttf b/frontend/text-editor/src/public/fonts/MontserratAlternates-ExtraLightItalic.ttf
new file mode 100644
index 0000000000..f4a7af1951
Binary files /dev/null and b/frontend/text-editor/src/public/fonts/MontserratAlternates-ExtraLightItalic.ttf differ
diff --git a/frontend/text-editor/src/public/fonts/MontserratAlternates-Italic.ttf b/frontend/text-editor/src/public/fonts/MontserratAlternates-Italic.ttf
new file mode 100644
index 0000000000..b066edbe55
Binary files /dev/null and b/frontend/text-editor/src/public/fonts/MontserratAlternates-Italic.ttf differ
diff --git a/frontend/text-editor/src/public/fonts/MontserratAlternates-Light.ttf b/frontend/text-editor/src/public/fonts/MontserratAlternates-Light.ttf
new file mode 100644
index 0000000000..cb51843ec7
Binary files /dev/null and b/frontend/text-editor/src/public/fonts/MontserratAlternates-Light.ttf differ
diff --git a/frontend/text-editor/src/public/fonts/MontserratAlternates-LightItalic.ttf b/frontend/text-editor/src/public/fonts/MontserratAlternates-LightItalic.ttf
new file mode 100644
index 0000000000..7437716e39
Binary files /dev/null and b/frontend/text-editor/src/public/fonts/MontserratAlternates-LightItalic.ttf differ
diff --git a/frontend/text-editor/src/public/fonts/MontserratAlternates-Medium.ttf b/frontend/text-editor/src/public/fonts/MontserratAlternates-Medium.ttf
new file mode 100644
index 0000000000..4811cb1373
Binary files /dev/null and b/frontend/text-editor/src/public/fonts/MontserratAlternates-Medium.ttf differ
diff --git a/frontend/text-editor/src/public/fonts/MontserratAlternates-MediumItalic.ttf b/frontend/text-editor/src/public/fonts/MontserratAlternates-MediumItalic.ttf
new file mode 100644
index 0000000000..1f02f88598
Binary files /dev/null and b/frontend/text-editor/src/public/fonts/MontserratAlternates-MediumItalic.ttf differ
diff --git a/frontend/text-editor/src/public/fonts/MontserratAlternates-Regular.ttf b/frontend/text-editor/src/public/fonts/MontserratAlternates-Regular.ttf
new file mode 100644
index 0000000000..9a4588fa20
Binary files /dev/null and b/frontend/text-editor/src/public/fonts/MontserratAlternates-Regular.ttf differ
diff --git a/frontend/text-editor/src/public/fonts/MontserratAlternates-SemiBold.ttf b/frontend/text-editor/src/public/fonts/MontserratAlternates-SemiBold.ttf
new file mode 100644
index 0000000000..eaf9c10779
Binary files /dev/null and b/frontend/text-editor/src/public/fonts/MontserratAlternates-SemiBold.ttf differ
diff --git a/frontend/text-editor/src/public/fonts/MontserratAlternates-SemiBoldItalic.ttf b/frontend/text-editor/src/public/fonts/MontserratAlternates-SemiBoldItalic.ttf
new file mode 100644
index 0000000000..60c0077b85
Binary files /dev/null and b/frontend/text-editor/src/public/fonts/MontserratAlternates-SemiBoldItalic.ttf differ
diff --git a/frontend/text-editor/src/public/fonts/MontserratAlternates-Thin.ttf b/frontend/text-editor/src/public/fonts/MontserratAlternates-Thin.ttf
new file mode 100644
index 0000000000..8aea2031e3
Binary files /dev/null and b/frontend/text-editor/src/public/fonts/MontserratAlternates-Thin.ttf differ
diff --git a/frontend/text-editor/src/public/fonts/MontserratAlternates-ThinItalic.ttf b/frontend/text-editor/src/public/fonts/MontserratAlternates-ThinItalic.ttf
new file mode 100644
index 0000000000..f400ce1c42
Binary files /dev/null and b/frontend/text-editor/src/public/fonts/MontserratAlternates-ThinItalic.ttf differ
diff --git a/frontend/text-editor/src/public/fonts/Oswald-Bold.ttf b/frontend/text-editor/src/public/fonts/Oswald-Bold.ttf
new file mode 100644
index 0000000000..9db5b26cde
Binary files /dev/null and b/frontend/text-editor/src/public/fonts/Oswald-Bold.ttf differ
diff --git a/frontend/text-editor/src/public/fonts/Oswald-ExtraLight.ttf b/frontend/text-editor/src/public/fonts/Oswald-ExtraLight.ttf
new file mode 100644
index 0000000000..66dae94925
Binary files /dev/null and b/frontend/text-editor/src/public/fonts/Oswald-ExtraLight.ttf differ
diff --git a/frontend/text-editor/src/public/fonts/Oswald-Light.ttf b/frontend/text-editor/src/public/fonts/Oswald-Light.ttf
new file mode 100644
index 0000000000..2b4e0b5226
Binary files /dev/null and b/frontend/text-editor/src/public/fonts/Oswald-Light.ttf differ
diff --git a/frontend/text-editor/src/public/fonts/Oswald-Medium.ttf b/frontend/text-editor/src/public/fonts/Oswald-Medium.ttf
new file mode 100644
index 0000000000..822fb4d416
Binary files /dev/null and b/frontend/text-editor/src/public/fonts/Oswald-Medium.ttf differ
diff --git a/frontend/text-editor/src/public/fonts/Oswald-Regular.ttf b/frontend/text-editor/src/public/fonts/Oswald-Regular.ttf
new file mode 100644
index 0000000000..0713045ff9
Binary files /dev/null and b/frontend/text-editor/src/public/fonts/Oswald-Regular.ttf differ
diff --git a/frontend/text-editor/src/public/fonts/Oswald-SemiBold.ttf b/frontend/text-editor/src/public/fonts/Oswald-SemiBold.ttf
new file mode 100644
index 0000000000..f979220dec
Binary files /dev/null and b/frontend/text-editor/src/public/fonts/Oswald-SemiBold.ttf differ
diff --git a/frontend/text-editor/src/public/fonts/Oswald-VariableFont_wght.ttf b/frontend/text-editor/src/public/fonts/Oswald-VariableFont_wght.ttf
new file mode 100644
index 0000000000..42243a368c
Binary files /dev/null and b/frontend/text-editor/src/public/fonts/Oswald-VariableFont_wght.ttf differ
diff --git a/frontend/text-editor/src/public/fonts/PlaywriteMXGuides-Regular.ttf b/frontend/text-editor/src/public/fonts/PlaywriteMXGuides-Regular.ttf
new file mode 100644
index 0000000000..38d5f9c4e7
Binary files /dev/null and b/frontend/text-editor/src/public/fonts/PlaywriteMXGuides-Regular.ttf differ
diff --git a/frontend/text-editor/src/public/fonts/fonts.txt b/frontend/text-editor/src/public/fonts/fonts.txt
new file mode 100644
index 0000000000..4dcee35d3c
--- /dev/null
+++ b/frontend/text-editor/src/public/fonts/fonts.txt
@@ -0,0 +1,26 @@
+MontserratAlternates-BlackItalic.ttf
+MontserratAlternates-Black.ttf
+MontserratAlternates-BoldItalic.ttf
+MontserratAlternates-Bold.ttf
+MontserratAlternates-ExtraBoldItalic.ttf
+MontserratAlternates-ExtraBold.ttf
+MontserratAlternates-ExtraLightItalic.ttf
+MontserratAlternates-ExtraLight.ttf
+MontserratAlternates-Italic.ttf
+MontserratAlternates-LightItalic.ttf
+MontserratAlternates-Light.ttf
+MontserratAlternates-MediumItalic.ttf
+MontserratAlternates-Medium.ttf
+MontserratAlternates-Regular.ttf
+MontserratAlternates-SemiBoldItalic.ttf
+MontserratAlternates-SemiBold.ttf
+MontserratAlternates-ThinItalic.ttf
+MontserratAlternates-Thin.ttf
+Oswald-Bold.ttf
+Oswald-ExtraLight.ttf
+Oswald-Light.ttf
+Oswald-Medium.ttf
+Oswald-Regular.ttf
+Oswald-SemiBold.ttf
+Oswald-VariableFont_wght.ttf
+PlaywriteMXGuides-Regular.ttf
diff --git a/frontend/text-editor/public/javascript.svg b/frontend/text-editor/src/public/javascript.svg
similarity index 100%
rename from frontend/text-editor/public/javascript.svg
rename to frontend/text-editor/src/public/javascript.svg
diff --git a/frontend/text-editor/public/vite.svg b/frontend/text-editor/src/public/vite.svg
similarity index 100%
rename from frontend/text-editor/public/vite.svg
rename to frontend/text-editor/src/public/vite.svg
diff --git a/frontend/text-editor/src/wasm.html b/frontend/text-editor/src/wasm.html
deleted file mode 100644
index cb3d0dafa0..0000000000
--- a/frontend/text-editor/src/wasm.html
+++ /dev/null
@@ -1,482 +0,0 @@
-
-
-
-
-
-
-
-
-
- Penpot - Text Editor Playground
-
-
-
-
-
-
-
diff --git a/frontend/text-editor/src/wasm/lib.js b/frontend/text-editor/src/wasm/lib.js
index b077afda18..76289e1c78 100644
--- a/frontend/text-editor/src/wasm/lib.js
+++ b/frontend/text-editor/src/wasm/lib.js
@@ -182,7 +182,6 @@ export function set_parent(id) {
}
export function render() {
- console.log('render')
Module._set_view(1, 0, 0);
Module._render_from_cache();
debouncedRender();
@@ -284,9 +283,11 @@ function getFontStyle(fontStyle) {
switch (fontStyle) {
default:
case 'normal':
+ case 'regular':
+ return 0;
case 'oblique':
case 'italic':
- return 0;
+ return 1;
}
}
@@ -316,6 +317,7 @@ function setParagraphData(dview, { numLeaves, textAlign, textDirection, textDeco
}
function setLeafData(dview, leafOffset, {
+ fontId,
fontStyle,
fontSize,
fontWeight,
@@ -331,10 +333,10 @@ function setLeafData(dview, leafOffset, {
dview.setFloat32(leafOffset + 4, fontSize, true); // font-size
dview.setFloat32(leafOffset + 8, letterSpacing, true); // letter-spacing
dview.setInt32(leafOffset + 12, fontWeight, true); // font-weight: normal
- dview.setUint32(leafOffset + 16, 0, true); // font-id (UUID part 1)
- dview.setUint32(leafOffset + 20, 0, true); // font-id (UUID part 2)
- dview.setUint32(leafOffset + 24, 0, true); // font-id (UUID part 3)
- dview.setUint32(leafOffset + 28, 0, true); // font-id (UUID part 4)
+ dview.setUint32(leafOffset + 16, fontId[0], true); // font-id (UUID part 1)
+ dview.setUint32(leafOffset + 20, fontId[1], true); // font-id (UUID part 2)
+ dview.setUint32(leafOffset + 24, fontId[2], true); // font-id (UUID part 3)
+ dview.setUint32(leafOffset + 28, fontId[3], true); // font-id (UUID part 4)
dview.setUint32(leafOffset + 32, 0, true); // font-family hash
dview.setUint32(leafOffset + 36, 0, true); // font-variant-id (UUID part 1)
dview.setUint32(leafOffset + 40, 0, true); // font-variant-id (UUID part 2)
@@ -344,7 +346,15 @@ function setLeafData(dview, leafOffset, {
dview.setUint32(leafOffset + 56, totalFills, true); // total fills count
}
-export function updateTextShape(fontSize, root) {
+function getFontFrom(fontFamily, fontWeight, fontStyle, fonts) {
+ const fontList = fonts.get(fontFamily)
+ if (!fontList) {
+ return null
+ }
+ return fontList.find(fontData => fontData.weight === fontWeight && fontStyle === fontData.style)
+}
+
+export function updateTextShape(root, fonts) {
// Calculate fills
const fills = [
{
@@ -358,7 +368,6 @@ export function updateTextShape(fontSize, root) {
const totalFillsSize = totalFills * FILL_SIZE;
const paragraphs = root.children;
- console.log("paragraphs", paragraphs.length);
Module._clear_shape_text();
for (const paragraph of paragraphs) {
@@ -366,19 +375,16 @@ export function updateTextShape(fontSize, root) {
const leaves = paragraph.children;
const numLeaves = leaves.length;
- console.log("leaves", numLeaves);
for (const leaf of leaves) {
const text = leaf.textContent;
const textBuffer = new TextEncoder().encode(text);
const textSize = textBuffer.byteLength;
- console.log("text", text, textSize);
totalSize += LEAF_ATTR_SIZE + totalFillsSize;
}
totalSize += paragraph.textContent.length;
- console.log("Total Size", totalSize);
// Allocate buffer
const bufferPtr = allocBytes(totalSize);
const heap = new Uint8Array(Module.HEAPU8.buffer, bufferPtr, totalSize);
@@ -387,39 +393,21 @@ export function updateTextShape(fontSize, root) {
const textAlign = getTextAlign(
paragraph.style.getPropertyValue("text-align"),
);
- console.log("text-align", textAlign);
const textDirection = getTextDirection(
paragraph.style.getPropertyValue("text-direction"),
);
- console.log("text-direction", textDirection);
const textDecoration = getTextDecoration(
paragraph.style.getPropertyValue("text-decoration"),
);
- console.log("text-decoration", textDecoration);
const textTransform = getTextTransform(
paragraph.style.getPropertyValue("text-transform"),
);
- console.log("text-transform", textTransform);
const lineHeight = parseFloat(
paragraph.style.getPropertyValue("line-height"),
);
- console.log("line-height", lineHeight);
const letterSpacing = parseFloat(
paragraph.style.getPropertyValue("letter-spacing"),
);
- console.log("letter-spacing", letterSpacing);
-
- /*
- num_leaves: u32,
- text_align: u8,
- text_direction: u8,
- text_decoration: u8,
- text_transform: u8,
- line_height: f32,
- letter_spacing: f32,
- typography_ref_file: [u32; 4],
- typography_ref_id: [u32; 4],
- */
setParagraphData(dview, {
numLeaves,
@@ -432,31 +420,25 @@ export function updateTextShape(fontSize, root) {
})
let leafOffset = PARAGRAPH_ATTR_SIZE;
for (const leaf of leaves) {
- console.log(
- "leafOffset",
- leafOffset,
- PARAGRAPH_ATTR_SIZE,
- LEAF_ATTR_SIZE,
- FILL_SIZE,
- totalFills,
- totalFillsSize,
- );
- const fontStyle = getFontStyle(leaf.style.getPropertyValue("font-style"));
+ const fontStyle = leaf.style.getPropertyValue("font-style");
+ const fontStyleSerialized = getFontStyle(fontStyle);
const fontSize = parseFloat(leaf.style.getPropertyValue("font-size"));
const letterSpacing = parseFloat(leaf.style.getPropertyValue("letter-spacing"))
- console.log("font-size", fontSize, "letter-spacing", letterSpacing);
const fontWeight = parseInt(
leaf.style.getPropertyValue("font-weight"),
10,
);
- console.log("font-weight", fontWeight);
const text = leaf.textContent;
const textBuffer = new TextEncoder().encode(text);
const textSize = textBuffer.byteLength;
-
+ const fontFamily = leaf.style.getPropertyValue('font-family');
+ const fontData = getFontFrom(fontFamily, fontWeight, fontStyle, fonts)
+ const defaultFontId = new Uint32Array([0, 0, 0, 0])
+ const fontId = fontData ? getU32(fontData.id) : defaultFontId
setLeafData(dview, leafOffset, {
- fontStyle,
+ fontId,
+ fontStyle: fontStyleSerialized,
textDecoration: 0,
textTransform: 0,
textDirection: 0,
@@ -464,8 +446,8 @@ export function updateTextShape(fontSize, root) {
fontWeight,
letterSpacing,
textSize,
- totalFills
- })
+ totalFills,
+ });
// Serialize fills
let fillOffset = leafOffset + LEAF_ATTR_SIZE;
@@ -485,14 +467,13 @@ export function updateTextShape(fontSize, root) {
// Add text content
const textOffset = leafOffset;
- console.log('textOffset', textOffset);
heap.set(textBuffer, textOffset);
Module._set_shape_text_content();
}
}
-export function addTextShape(fontSize, text) {
+export function addTextShape(text, fonts) {
const numLeaves = 1; // Single text leaf for simplicity
const textBuffer = new TextEncoder().encode(text);
const textSize = textBuffer.byteLength;
@@ -529,13 +510,25 @@ export function addTextShape(fontSize, text) {
// Serialize leaf attributes
const leafOffset = PARAGRAPH_ATTR_SIZE;
+ const fontStyle = getFontStyle('normal');
+ const fontStyleSerialized = getFontStyle(fontStyle);
+ const fontSize = 14;
+ const letterSpacing = 0;
+ const fontWeight = 400;
+ const fontFamily = 'MontserratAlternates';
+ const fontData = getFontFrom(fontFamily, fontWeight, fontStyle, fonts);
+ const defaultFontId = new Uint32Array([0, 0, 0, 0]);
+ const fontId = fontData ? getU32(fontData.id) : defaultFontId;
+
setLeafData(dview, leafOffset, {
+ fontId,
fontSize,
- fontWeight: 400,
+ fontStyle: fontStyleSerialized,
+ fontWeight,
textDecoration: 0,
textDirection: 0,
textTransform: 0,
- letterSpacing: 0,
+ letterSpacing,
textSize,
totalFills,
});
@@ -558,3 +551,44 @@ export function addTextShape(fontSize, text) {
// Call the WebAssembly function
Module._set_shape_text_content();
}
+
+export function storeFonts(fonts) {
+ for (const [fontName, fontStyles] of fonts) {
+ for (const font of fontStyles) {
+ const shapeId = getU32('00000000-0000-0000-0000-000000000000');
+ const fontId = getU32(font.id);
+ const weight = font.weight;
+ const style = getFontStyle(font.style);
+ const size = font.arrayBuffer.byteLength;
+ const ptr = Module._alloc_bytes(size);
+ const heap = Module.HEAPU8;
+ const mem = new Uint8Array(heap.buffer, ptr, size);
+ mem.set(new Uint8Array(font.arrayBuffer));
+ const emoji = false
+ const fallback = false
+ Module._store_font(
+ shapeId[0],
+ shapeId[1],
+ shapeId[2],
+ shapeId[3],
+ fontId[0],
+ fontId[1],
+ fontId[2],
+ fontId[3],
+ weight,
+ style,
+ emoji,
+ fallback,
+ );
+ Module._is_font_uploaded(
+ fontId[0],
+ fontId[1],
+ fontId[2],
+ fontId[3],
+ weight,
+ style,
+ emoji,
+ );
+ }
+ }
+}