diff --git a/docs/app.html b/docs/app.html
index 9abb1af04..b8fd92f8a 100644
--- a/docs/app.html
+++ b/docs/app.html
@@ -2,9 +2,27 @@
-
-
+
+
+
+
+
diff --git a/docs/routes/setup.md b/docs/routes/setup.md
index 80fbc655a..569d9170d 100644
--- a/docs/routes/setup.md
+++ b/docs/routes/setup.md
@@ -142,7 +142,23 @@ Add the `base` class and a theme to the `` tag in `src/app.html`:
```
-## `7.` Using Omorphia
+## `7.` Setup fonts
+
+Copy the the `fonts/` folder from [Omorphia's repository](https://github.com/modrinth/omorphia/blob/main/docs/static/assets/fonts) and place them in the `/assets` folder at the root of your project.
+
+Add the following preload tags to your head in `app.html` to speed up font loading:
+
+
+```html
+
+
+
+
+
+```
+
+
+## `8.` Using Omorphia
### Developing
diff --git a/docs/static/assets/fonts/InterBold.woff2 b/docs/static/assets/fonts/InterBold.woff2
new file mode 100644
index 000000000..8fcc4321c
Binary files /dev/null and b/docs/static/assets/fonts/InterBold.woff2 differ
diff --git a/docs/static/assets/fonts/InterRegular.woff2 b/docs/static/assets/fonts/InterRegular.woff2
new file mode 100644
index 000000000..c659f5e4a
Binary files /dev/null and b/docs/static/assets/fonts/InterRegular.woff2 differ
diff --git a/docs/static/assets/fonts/InterSemiBold.woff2 b/docs/static/assets/fonts/InterSemiBold.woff2
new file mode 100644
index 000000000..bc76d107f
Binary files /dev/null and b/docs/static/assets/fonts/InterSemiBold.woff2 differ
diff --git a/package.json b/package.json
index b6d9d89d5..ba174dd51 100644
--- a/package.json
+++ b/package.json
@@ -43,17 +43,17 @@
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-svelte3": "^3.2.1",
"mdsvex": "^0.10.5",
- "mdsvexamples": "^0.3.0",
+ "mdsvexamples": "^0.3.1",
"merge-dirs": "^0.2.1",
"nodemon": "^2.0.15",
"prettier": "^2.6.2",
"prettier-plugin-svelte": "^2.7.0",
"sveld": "^0.13.4",
"svelte": "^3.48.0",
- "svelte2tsx": "^0.5.11",
"svelte-check": "^2.8.0",
"svelte-intl-precompile": "^0.11.1",
"svelte-preprocess": "^4.10.7",
+ "svelte2tsx": "^0.5.11",
"tslib": "^2.3.1",
"typescript": "~4.7.4",
"vite": "^3.0.0"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8109090c6..d0b2b51f5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -26,7 +26,7 @@ specifiers:
jimp: ^0.16.1
marked: ^4.0.12
mdsvex: ^0.10.5
- mdsvexamples: ^0.3.0
+ mdsvexamples: ^0.3.1
merge-dirs: ^0.2.1
nodemon: ^2.0.15
openapi-typescript: ^5.4.0
@@ -101,7 +101,7 @@ devDependencies:
eslint-config-prettier: 8.5.0_eslint@7.32.0
eslint-plugin-svelte3: 3.4.1_6wevxxng4y4ff26nzlndg2wnpa
mdsvex: 0.10.5_svelte@3.48.0
- mdsvexamples: 0.3.0_vite@3.0.0
+ mdsvexamples: 0.3.1_vite@3.0.0
merge-dirs: 0.2.1
nodemon: 2.0.15
prettier: 2.6.2
@@ -1365,7 +1365,6 @@ packages:
resolution: {integrity: sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==}
engines: {node: '>=0.4.0'}
hasBin: true
- dev: false
/ajv/6.12.6:
resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
@@ -3281,14 +3280,14 @@ packages:
vfile-message: 2.0.4
dev: true
- /mdsvexamples/0.3.0_vite@3.0.0:
- resolution: {integrity: sha512-d662JjeT0Vw+XPwc2u+DAnGq+x8JMNJa17vMQpT+uvHJpkBs5Uszm0oDoU3LHmI1ZVB/Hq17HVrr0N/IUFQUJg==}
+ /mdsvexamples/0.3.1_vite@3.0.0:
+ resolution: {integrity: sha512-bCtJQODJHJIlHT6t+2wHNnZ2TyV4qBqDzhPRcaNj4VUV+q+AVs7fk6v+h890IRNitMUlOlfhpDOa4C/S++zW3Q==}
dependencies:
abstract-syntax-tree: 2.20.5
prism-svelte: 0.5.0
prismjs: 1.27.0
unist-util-visit: 4.1.0
- unplugin: 0.6.2_vite@3.0.0
+ unplugin: 0.7.2_vite@3.0.0
upath: 2.0.1
transitivePeerDependencies:
- esbuild
@@ -5390,29 +5389,6 @@ packages:
- webpack
dev: false
- /unplugin/0.6.2_vite@3.0.0:
- resolution: {integrity: sha512-+QONc2uBFQbeo4x5mlJHjTKjR6pmuchMpGVrWhwdGFFMb4ttFZ4E9KqhOOrNcm3Q8NNyB1vJ4s5e36IZC7UWYw==}
- peerDependencies:
- esbuild: '>=0.13'
- rollup: ^2.50.0
- vite: ^2.3.0 || ^3.0.0
- webpack: 4 || 5
- peerDependenciesMeta:
- esbuild:
- optional: true
- rollup:
- optional: true
- vite:
- optional: true
- webpack:
- optional: true
- dependencies:
- chokidar: 3.5.3
- vite: 3.0.0
- webpack-sources: 3.2.3
- webpack-virtual-modules: 0.4.3
- dev: true
-
/unplugin/0.7.2_vite@3.0.0:
resolution: {integrity: sha512-m7thX4jP8l5sETpLdUASoDOGOcHaOVtgNyrYlToyQUvILUtEzEnngRBrHnAX3IKqooJVmXpoa/CwQ/QqzvGaHQ==}
peerDependencies:
@@ -5435,7 +5411,6 @@ packages:
vite: 3.0.0
webpack-sources: 3.2.3
webpack-virtual-modules: 0.4.4
- dev: false
/upath/2.0.1:
resolution: {integrity: sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==}
@@ -5536,13 +5511,8 @@ packages:
resolution: {integrity: sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==}
engines: {node: '>=10.13.0'}
- /webpack-virtual-modules/0.4.3:
- resolution: {integrity: sha512-5NUqC2JquIL2pBAAo/VfBP6KuGkHIZQXW/lNKupLPfhViwh8wNsu0BObtl09yuKZszeEUfbXz8xhrHvSG16Nqw==}
- dev: true
-
/webpack-virtual-modules/0.4.4:
resolution: {integrity: sha512-h9atBP/bsZohWpHnr+2sic8Iecb60GxftXsWNLLLSqewgIsGzByd2gcIID4nXcG+3tNe4GQG3dLcff3kXupdRA==}
- dev: false
/whatwg-url/5.0.0:
resolution: {integrity: sha1-lmRU6HZUYuN2RNNib2dCzotwll0=}
diff --git a/src/config/svelte.js b/src/config/svelte.js
index 5c879faee..fe1902ccf 100644
--- a/src/config/svelte.js
+++ b/src/config/svelte.js
@@ -1,17 +1,6 @@
import sveltePreprocess from 'svelte-preprocess'
-import Icons from 'unplugin-icons/vite'
-import svelteSvg from '@poppanator/sveltekit-svg'
export const preprocess = sveltePreprocess({
postcss: true,
preserve: ['ld+json'],
})
-
-export const plugins = [
- svelteSvg(),
- Icons({
- compiler: 'svelte',
- defaultClass: 'icon',
- scale: 1,
- }),
-]
diff --git a/src/config/vite.js b/src/config/vite.js
new file mode 100644
index 000000000..6847766b0
--- /dev/null
+++ b/src/config/vite.js
@@ -0,0 +1,11 @@
+import Icons from 'unplugin-icons/vite'
+import svelteSvg from '@poppanator/sveltekit-svg'
+
+export const plugins = [
+ svelteSvg(),
+ Icons({
+ compiler: 'svelte',
+ defaultClass: 'icon',
+ scale: 1,
+ }),
+]
diff --git a/src/styles/classes/base.postcss b/src/styles/classes/base.postcss
index d1451a8b4..4d03ebb01 100644
--- a/src/styles/classes/base.postcss
+++ b/src/styles/classes/base.postcss
@@ -1,7 +1,7 @@
.base {
background-color: var(--color-bg);
color: var(--color-text);
- font-family: var(--font-standard);
+ font-family: var(--body-font);
font-size: var(--font-size);
font-weight: var(--font-weight-regular);
diff --git a/src/styles/variables/typography.postcss b/src/styles/variables/typography.postcss
index 07540ae53..36c4cf6c7 100644
--- a/src/styles/variables/typography.postcss
+++ b/src/styles/variables/typography.postcss
@@ -14,8 +14,36 @@
--font-weight-bold: 700;
/* Font stacks */
- --body-font: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica Neue, Helvetica,
+ --body-font: Inter, Times;
+ /* --body-font: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica Neue, Helvetica,
Oxygen, Ubuntu, Roboto, Cantarell, Fira Sans, Droid Sans, 'Apple Color Emoji', 'Segoe UI Emoji',
- Arial, sans-serif;
+ Arial, sans-serif; */
--mono-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+
+ /* inter-regular - latin */
+ @font-face {
+ font-family: 'Inter';
+ font-style: normal;
+ font-weight: 400;
+ font-display: fallback;
+ src: local(''), url('/assets/fonts/InterRegular.woff2') format('woff2');
+ }
+
+ /* inter-600 - latin */
+ @font-face {
+ font-family: 'Inter';
+ font-style: normal;
+ font-weight: 600;
+ font-display: fallback;
+ src: local(''), url('/assets/fonts/InterSemiBold.woff2') format('woff2');
+ }
+
+ /* inter-700 - latin */
+ @font-face {
+ font-family: 'Inter';
+ font-style: normal;
+ font-weight: 700;
+ font-display: fallback;
+ src: local(''), url('/assets/fonts/InterBold.woff2') format('woff2');
+ }
}
diff --git a/vite.config.js b/vite.config.js
index 0ee5d8b24..42266398b 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,5 +1,5 @@
import { sveltekit } from '@sveltejs/kit/vite'
-import { plugins } from './src/config/svelte.js'
+import { plugins } from './src/config/vite.js'
import examples from 'mdsvexamples/vite'
import sveld from './docs/plugins/sveld.js'
import Generator from './src/plugins/generator/index.js'