diff --git a/packages/web-components/assets/css/roboto_mono_all.css b/packages/web-components/assets/css/roboto_mono_all.css
new file mode 100644
index 00000000..02d40680
--- /dev/null
+++ b/packages/web-components/assets/css/roboto_mono_all.css
@@ -0,0 +1,112 @@
+/* roboto-mono-100 - latin_latin-ext */
+@font-face {
+  font-display: swap;
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  font-weight: 100;
+  src: url('../fonts/roboto-mono/roboto-mono-v23-latin_latin-ext-100.woff2') format('woff2');
+}
+/* roboto-mono-100italic - latin_latin-ext */
+@font-face {
+  font-display: swap;
+  font-family: 'Roboto Mono';
+  font-style: italic;
+  font-weight: 100;
+  src: url('../fonts/roboto-mono/roboto-mono-v23-latin_latin-ext-100italic.woff2') format('woff2');
+}
+/* roboto-mono-200 - latin_latin-ext */
+@font-face {
+  font-display: swap;
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  font-weight: 200;
+  src: url('../fonts/roboto-mono/roboto-mono-v23-latin_latin-ext-200.woff2') format('woff2');
+}
+/* roboto-mono-200italic - latin_latin-ext */
+@font-face {
+  font-display: swap;
+  font-family: 'Roboto Mono';
+  font-style: italic;
+  font-weight: 200;
+  src: url('../fonts/roboto-mono/roboto-mono-v23-latin_latin-ext-200italic.woff2') format('woff2');
+}
+/* roboto-mono-300 - latin_latin-ext */
+@font-face {
+  font-display: swap;
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  font-weight: 300;
+  src: url('../fonts/roboto-mono/roboto-mono-v23-latin_latin-ext-300.woff2') format('woff2');
+}
+/* roboto-mono-300italic - latin_latin-ext */
+@font-face {
+  font-display: swap;
+  font-family: 'Roboto Mono';
+  font-style: italic;
+  font-weight: 300;
+  src: url('../fonts/roboto-mono/roboto-mono-v23-latin_latin-ext-300italic.woff2') format('woff2');
+}
+/* roboto-mono-regular - latin_latin-ext */
+@font-face {
+  font-display: swap; 
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  font-weight: 400;
+  src: url('../fonts/roboto-mono/roboto-mono-v23-latin_latin-ext-regular.woff2') format('woff2');
+}
+/* roboto-mono-italic - latin_latin-ext */
+@font-face {
+  font-display: swap;
+  font-family: 'Roboto Mono';
+  font-style: italic;
+  font-weight: 400;
+  src: url('../fonts/roboto-mono/roboto-mono-v23-latin_latin-ext-italic.woff2') format('woff2');
+}
+/* roboto-mono-500 - latin_latin-ext */
+@font-face {
+  font-display: swap;
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  font-weight: 500;
+  src: url('../fonts/roboto-mono/roboto-mono-v23-latin_latin-ext-500.woff2') format('woff2');
+}
+/* roboto-mono-500italic - latin_latin-ext */
+@font-face {
+  font-display: swap;
+  font-family: 'Roboto Mono';
+  font-style: italic;
+  font-weight: 500;
+  src: url('../fonts/roboto-mono/roboto-mono-v23-latin_latin-ext-500italic.woff2') format('woff2');
+}
+/* roboto-mono-600 - latin_latin-ext */
+@font-face {
+  font-display: swap;
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  font-weight: 600;
+  src: url('../fonts/roboto-mono/roboto-mono-v23-latin_latin-ext-600.woff2') format('woff2');
+}
+/* roboto-mono-600italic - latin_latin-ext */
+@font-face {
+  font-display: swap;
+  font-family: 'Roboto Mono';
+  font-style: italic;
+  font-weight: 600;
+  src: url('../fonts/roboto-mono/roboto-mono-v23-latin_latin-ext-600italic.woff2') format('woff2');
+}
+/* roboto-mono-700 - latin_latin-ext */
+@font-face {
+  font-display: swap;
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  font-weight: 700;
+  src: url('../fonts/roboto-mono/roboto-mono-v23-latin_latin-ext-700.woff2') format('woff2');
+}
+/* roboto-mono-700italic - latin_latin-ext */
+@font-face {
+  font-display: swap;
+  font-family: 'Roboto Mono';
+  font-style: italic;
+  font-weight: 700;
+  src: url('../fonts/roboto-mono/roboto-mono-v23-latin_latin-ext-700italic.woff2') format('woff2');
+}
\ No newline at end of file