chore(deps): upgrade dependencies

.github/workflows/commitlint.yml

@@ -8,7 +8,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           fetch-depth: 0
       - name: Lint commit messages

.github/workflows/lint.yml

@@ -8,12 +8,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: Setup Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
-          node-version-file: '.nvmrc'
-          cache: 'yarn'
+          node-version-file: ".nvmrc"
+          cache: "yarn"
       - name: Install dependencies
         run: yarn install --frozen-lockfile
       - name: Lint Scripts

.github/workflows/release.yml

@@ -11,22 +11,22 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: Setup Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
-          node-version-file: '.nvmrc'
-          cache: 'yarn'
+          node-version-file: ".nvmrc"
+          cache: "yarn"
       - name: Install dependencies
         run: yarn install --frozen-lockfile
       - name: Cache Next.js build cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: ${{ github.workspace }}/.next/cache
           key: ${{ runner.os }}-nextjs-${{ hashFiles('**/yarn.lock') }}
       - name: Build static assets
         run: yarn build
       - name: Semantic Release
-        uses: cycjimmy/semantic-release-action@v2
+        uses: cycjimmy/semantic-release-action@v3
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/tests.yml

@@ -7,19 +7,19 @@ jobs:
     name: Run Cypress
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
       - name: Setup Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
-          node-version-file: '.nvmrc'
-          cache: 'yarn'
+          node-version-file: ".nvmrc"
+          cache: "yarn"
 
       - name: Install dependencies
         run: yarn install --frozen-lockfile
 
       - name: Cache Next.js build cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: ${{ github.workspace }}/.next/cache
           key: ${{ runner.os }}-nextjs-${{ hashFiles('**/yarn.lock') }}
@@ -28,7 +28,7 @@ jobs:
         run: yarn build
 
       - name: Run Cypress
-        uses: cypress-io/github-action@v2
+        uses: cypress-io/github-action@v4
         with:
           start: npm start
           wait-on: http://localhost:3000
@@ -36,13 +36,13 @@ jobs:
       # store videos and any screenshots
       # NOTE: screenshots will be generated only if E2E test failed
       # thus we store screenshots only on failures
-      - uses: actions/upload-artifact@v2
+      - uses: actions/upload-artifact@v3
         if: failure()
         with:
           name: cypress-screenshots
           path: cypress/screenshots
       # Test run video was always captured, so this action uses "always()" condition
-      - uses: actions/upload-artifact@v2
+      - uses: actions/upload-artifact@v3
         if: always()
         with:
           name: cypress-videos

.nvmrc

@@ -1 +1 @@
-14.18
+16.15

.prettierrc

@@ -1,8 +1,7 @@
 {
-  "useTabs": true,
+	"useTabs": true,
 	"printWidth": 120,
 	"singleQuote": true,
 	"trailingComma": "es5",
-	"jsxBracketSameLine": true,
 	"semi": false
 }

.vscode/settings.json

@@ -9,5 +9,5 @@
 	"css.validate": false,
 	"less.validate": false,
 	"scss.validate": false,
-	"cssModules.camelCase": true
+	"typescript.tsdk": "node_modules/typescript/lib"
 }

components/button/index.module.scss

@@ -2,7 +2,7 @@
 
 .base {
 	padding: 5px 12px;
-	font-family: Manrope, Arial, '"Helvetica Neue"', Helvetica, sans-serif;
+	font-family: 'Manrope', Arial, '"Helvetica Neue"', Helvetica, sans-serif;
 	font-size: $font-size-title;
 	line-height: $line-height-title;
 	color: $black;

components/drag-and-drop/index.tsx

@@ -208,6 +208,7 @@ const DragAndDrop = ({ onFile, onGenerate, onError }: DragAndDropProps) => {
 	}
 
 	const { getRootProps, getInputProps, isDragActive } = useDropzone({
+		// eslint-disable-next-line @typescript-eslint/no-misused-promises
 		onDrop,
 		accept: Object.keys(ACCEPT_MIME_TYPES),
 		maxSize: ONE_MB,
@@ -230,13 +231,15 @@ const DragAndDrop = ({ onFile, onGenerate, onError }: DragAndDropProps) => {
 				className={classnames(styles.container, {
 					[styles.loading]: isLoading,
 					[styles.transparent]: !image,
-				})}>
+				})}
+			>
 				{!image && !zipData && (
 					<>
 						<div
 							className={styles.dropZoneWrapper}
 							onMouseEnter={() => setIsHover(true)}
-							onMouseLeave={() => setIsHover(false)}>
+							onMouseLeave={() => setIsHover(false)}
+						>
 							<SvgDropZone className={classnames(styles.dashed, { [styles.dragActive]: isDragActive })} />
 							<div {...getRootProps()} className={styles.dropZone} data-cy="drag-and-drop">
 								<input {...getInputProps()} />
@@ -249,7 +252,8 @@ const DragAndDrop = ({ onFile, onGenerate, onError }: DragAndDropProps) => {
 									className={classnames(styles.imageUploadText, styles.mobileUploadText, {
 										[styles.dragActive]: isDragActive,
 									})}
-									data-cy="drag-and-drop-text">
+									data-cy="drag-and-drop-text"
+								>
 									<span>
 										Generate all the sizes for your
 										<br />
@@ -262,7 +266,8 @@ const DragAndDrop = ({ onFile, onGenerate, onError }: DragAndDropProps) => {
 									className={classnames(styles.imageUploadText, styles.desktopUploadText, {
 										[styles.dragActive]: isDragActive,
 									})}
-									data-cy="drag-and-drop-text">
+									data-cy="drag-and-drop-text"
+								>
 									<CSSTransition in={!isDragActive} timeout={200} classNames="collapse" unmountOnExit>
 										<span>Drag &amp;&nbsp;</span>
 									</CSSTransition>
@@ -313,7 +318,8 @@ const DragAndDrop = ({ onFile, onGenerate, onError }: DragAndDropProps) => {
 									weight="semiBold"
 									color="gray"
 									tag="div"
-									className={styles.filenameWrapper}>
+									className={styles.filenameWrapper}
+								>
 									<span className={styles.filename} data-cy="preview-filename">
 										{imageData.name}
 										{imageData.extension}
@@ -357,7 +363,8 @@ const DragAndDrop = ({ onFile, onGenerate, onError }: DragAndDropProps) => {
 										id="pwa"
 										disabled={PWADisabled}
 										onChange={togglePwa}
-										data-cy="preview-pwa-compatible">
+										data-cy="preview-pwa-compatible"
+									>
 										<Typography variant="regularBody" weight="semiBold" muted={PWADisabled}>
 											PWA compatible
 										</Typography>
@@ -373,7 +380,8 @@ const DragAndDrop = ({ onFile, onGenerate, onError }: DragAndDropProps) => {
 										id="dark"
 										disabled
 										onChange={toggleDarkMode}
-										data-cy="preview-dark-mode-version">
+										data-cy="preview-dark-mode-version"
+									>
 										<Typography variant="regularBody" weight="semiBold" muted>
 											Dark Mode version
 										</Typography>
@@ -392,14 +400,18 @@ const DragAndDrop = ({ onFile, onGenerate, onError }: DragAndDropProps) => {
 								onClick={() => {
 									splitbee.track('Re-upload')
 									resetImage()
-								}}>
+								}}
+							>
 								Re-upload
 							</Button>
 							<Button
 								color="white"
 								background="bgLink"
 								className={styles.imageGenerate}
-								onClick={() => generateFavicon(image)}>
+								onClick={() => {
+									generateFavicon(image)
+								}}
+							>
 								Generate Favicon
 							</Button>
 						</div>
@@ -442,7 +454,8 @@ const DragAndDrop = ({ onFile, onGenerate, onError }: DragAndDropProps) => {
 									className={styles.showCode}
 									variant="regularTransparent"
 									color="gray"
-									onClick={() => setIsModalOpen(true)}>
+									onClick={() => setIsModalOpen(true)}
+								>
 									Show
 								</Button>
 							</div>
@@ -455,14 +468,16 @@ const DragAndDrop = ({ onFile, onGenerate, onError }: DragAndDropProps) => {
 								onClick={() => {
 									splitbee.track('Make a new one')
 									resetImage()
-								}}>
+								}}
+							>
 								Make a new one
 							</Button>
 							<Button
 								color="white"
 								background="bgGreen"
 								className={styles.imageGenerate}
-								onClick={() => onDownload(zipData)}>
+								onClick={() => onDownload(zipData)}
+							>
 								Download Favicon
 							</Button>
 						</div>
@@ -475,7 +490,8 @@ const DragAndDrop = ({ onFile, onGenerate, onError }: DragAndDropProps) => {
 					className={styles.content}
 					overlayClassName={styles.overlay}
 					closeTimeoutMS={200}
-					contentLabel="Code generated">
+					contentLabel="Code generated"
+				>
 					<div className={styles.modalContainer} {...bind()}>
 						<div className={classnames(styles.modalHeader, styles.modalHeaderMobile)}>
 							<Typography variant="extraLargeTitle" weight="extraBold" color="white" colorImmutable>

components/favycon-error/index.tsx

@@ -38,7 +38,8 @@ const FavyconError = ({ error, clearError }: FavyconErrorProps) => {
 					variant="regularBody"
 					color="white"
 					colorImmutable={true}
-					weight="semiBold">
+					weight="semiBold"
+				>
 					{error}
 				</Typography>
 				<svg height={20} width={20}>

components/favycon-info/index.tsx

@@ -102,7 +102,8 @@ const FavyconInfo = ({
 				className={styles.content}
 				overlayClassName={styles.overlay}
 				closeTimeoutMS={200}
-				contentLabel="About Us">
+				contentLabel="About Us"
+			>
 				<div className={styles.modalContainer} {...bind()}>
 					<div className={styles.modalHeaderMobile}>
 						<div className={styles.modalHeaderTop}>
@@ -166,7 +167,8 @@ const FavyconInfo = ({
 												href={`https://twitter.com/${person.screenName}`}
 												className={styles.personTwitter}
 												target="_blank"
-												rel="noopener noreferrer">
+												rel="noopener noreferrer"
+											>
 												<Typography variant="footer" weight="semiBold">
 													<SvgTwitter /> {person.screenName}
 												</Typography>
@@ -176,7 +178,8 @@ const FavyconInfo = ({
 												href={`https://github.com/${person.screenName}`}
 												className={classnames(styles.personTwitter, styles.personGithub)}
 												target="_blank"
-												rel="noopener noreferrer">
+												rel="noopener noreferrer"
+											>
 												<Typography variant="footer" weight="semiBold">
 													<SvgGithub /> {person.screenName}
 												</Typography>
@@ -194,7 +197,8 @@ const FavyconInfo = ({
 									className={styles.repo}
 									href="https://github.com/ruisaraiva19/favycon"
 									target="_blank"
-									rel="noopener noreferrer">
+									rel="noopener noreferrer"
+								>
 									GitHub
 								</a>
 								. Have feedback? Send it to{' '}

components/typography/index.module.scss

@@ -1,7 +1,7 @@
 @import '../../styles/variables.scss';
 
 .root {
-	font-family: Manrope, Arial, Helvetica Neue, Helvetica, sans-serif;
+	font-family: 'Manrope', Arial, Helvetica Neue, Helvetica, sans-serif;
 }
 
 .h1 {

cypress.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+	viewportWidth: 1280,
+	viewportHeight: 720,
+	e2e: {
+		// We've imported your old cypress plugins here.
+		// You may want to clean this up later by importing these.
+		setupNodeEvents(on, config) {
+			// eslint-disable-next-line @typescript-eslint/no-var-requires
+			return require('./cypress/plugins/index.js')(on, config)
+		},
+		baseUrl: 'http://localhost:3000',
+	},
+})

cypress.json

@@ -1,5 +0,0 @@
-{
-	"baseUrl": "http://localhost:3000",
-	"viewportWidth": 1280,
-	"viewportHeight": 720
-}

next.config.js

@@ -1,3 +1,4 @@
+/** @type {import('next').NextConfig} */
 module.exports = {
 	poweredByHeader: false,
 	images: {
@@ -5,28 +6,30 @@ module.exports = {
 		imageSizes: [56, 112, 185, 370, 370, 375, 540, 740, 750, 1080],
 	},
 	headers() {
-		return [
-			{
-				source: '/(.*)',
-				headers: [
+		return process.env.NODE_ENV === 'production'
+			? [
 					{
-						key: 'X-XSS-Protection',
-						value: '1; mode=block',
+						source: '/(.*)',
+						headers: [
+							{
+								key: 'X-XSS-Protection',
+								value: '1; mode=block',
+							},
+							{
+								key: 'X-Frame-Options',
+								value: 'SAMEORIGIN',
+							},
+							{
+								key: 'X-Content-Type-Options',
+								value: 'nosniff',
+							},
+							{
+								key: 'Content-Security-Policy',
+								value: `default-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'self' https://hive.splitbee.io https://vitals.vercel-insights.com; script-src 'self' https://cdn.splitbee.io; font-src 'self'; frame-ancestors 'self'`,
+							},
+						],
 					},
-					{
-						key: 'X-Frame-Options',
-						value: 'SAMEORIGIN',
-					},
-					{
-						key: 'X-Content-Type-Options',
-						value: 'nosniff',
-					},
-					{
-						key: 'Content-Security-Policy',
-						value: `default-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'self' https://hive.splitbee.io https://vitals.vercel-insights.com; script-src 'self' https://cdn.splitbee.io; font-src 'self' https://fonts.gstatic.com; frame-ancestors 'self'`,
-					},
-				],
-			},
-		]
+			  ]
+			: []
 	},
 }

package.json

@@ -44,93 +44,94 @@
 	"dependencies": {
 		"@fiahfy/ico-convert": "0.0.12",
 		"@splitbee/web": "0.3.0",
-		"@use-gesture/react": "10.2.0",
+		"@use-gesture/react": "10.2.16",
 		"adm-zip": "0.5.9",
-		"blurhash": "1.1.4",
+		"blurhash": "1.1.5",
 		"classnames": "2.3.1",
 		"multer": "1.4.3",
-		"next": "12.0.6",
+		"next": "12.2.0",
 		"nprogress": "0.2.0",
-		"prismjs": "1.25.0",
-		"prop-types": "15.7.2",
+		"prismjs": "1.28.0",
+		"prop-types": "15.8.1",
 		"react": "17.0.2",
 		"react-clipboard.js": "2.0.16",
 		"react-dom": "17.0.2",
 		"react-dropzone": "11.4.2",
-		"react-modal": "3.14.4",
+		"react-modal": "3.15.1",
 		"react-transition-group": "4.4.2",
-		"react-use": "17.3.1"
+		"react-use": "17.4.0"
 	},
 	"devDependencies": {
-		"@babel/core": "7.16.0",
-		"@commitlint/cli": "15.0.0",
-		"@commitlint/config-conventional": "15.0.0",
-		"@storybook/addon-a11y": "6.4.7",
-		"@storybook/addon-actions": "6.4.7",
+		"@babel/core": "7.18.6",
+		"@commitlint/cli": "17.0.3",
+		"@commitlint/config-conventional": "17.0.3",
+		"@storybook/addon-a11y": "6.5.9",
+		"@storybook/addon-actions": "6.5.9",
 		"@storybook/addon-console": "1.2.3",
-		"@storybook/addon-docs": "6.4.7",
-		"@storybook/addon-essentials": "6.4.7",
-		"@storybook/addon-links": "6.4.7",
+		"@storybook/addon-docs": "6.5.9",
+		"@storybook/addon-essentials": "6.5.9",
+		"@storybook/addon-links": "6.5.9",
 		"@storybook/addon-postcss": "2.0.0",
-		"@storybook/addons": "6.4.7",
-		"@storybook/api": "6.4.7",
-		"@storybook/builder-webpack5": "6.4.7",
-		"@storybook/client-api": "6.4.7",
-		"@storybook/components": "6.4.7",
-		"@storybook/core-events": "6.4.7",
-		"@storybook/manager-webpack5": "6.4.7",
-		"@storybook/node-logger": "6.4.7",
-		"@storybook/react": "6.4.7",
-		"@storybook/theming": "6.4.7",
+		"@storybook/addons": "6.5.9",
+		"@storybook/api": "6.5.9",
+		"@storybook/builder-webpack5": "6.5.9",
+		"@storybook/client-api": "6.5.9",
+		"@storybook/components": "6.5.9",
+		"@storybook/core-events": "6.5.9",
+		"@storybook/manager-webpack5": "6.5.9",
+		"@storybook/node-logger": "6.5.9",
+		"@storybook/react": "6.5.9",
+		"@storybook/theming": "6.5.9",
 		"@types/adm-zip": "0.4.34",
 		"@types/multer": "1.4.7",
 		"@types/node": "16.11.11",
 		"@types/nprogress": "0.2.0",
-		"@types/prismjs": "1.16.6",
+		"@types/prismjs": "1.26.0",
 		"@types/react": "17.0.37",
 		"@types/react-modal": "3.13.1",
-		"@types/react-transition-group": "4.4.4",
+		"@types/react-transition-group": "4.4.5",
 		"@types/sharp": "0.29.4",
-		"@typescript-eslint/eslint-plugin": "5.5.0",
-		"@typescript-eslint/parser": "5.5.0",
+		"@typescript-eslint/eslint-plugin": "5.30.5",
+		"@typescript-eslint/parser": "5.30.5",
 		"all-contributors-cli": "6.20.0",
-		"babel-loader": "8.2.3",
+		"babel-loader": "8.2.5",
 		"commitizen": "4.2.4",
-		"cypress": "9.1.1",
+		"cypress": "10.3.0",
 		"cypress-file-upload": "5.0.8",
 		"cz-conventional-changelog": "3.3.0",
-		"dotenv": "10.0.0",
-		"eslint": "8.4.0",
-		"eslint-config-next": "12.0.6",
-		"eslint-config-prettier": "8.3.0",
+		"dotenv": "16.0.1",
+		"eslint": "8.19.0",
+		"eslint-config-next": "12.2.0",
+		"eslint-config-prettier": "8.5.0",
 		"eslint-plugin-cypress": "2.12.1",
-		"eslint-plugin-prettier": "4.0.0",
-		"eslint-plugin-storybook": "0.5.3",
-		"husky": "7.0.4",
-		"lint-staged": "12.1.2",
+		"eslint-plugin-prettier": "4.2.1",
+		"eslint-plugin-storybook": "0.5.13",
+		"husky": "8.0.1",
+		"lint-staged": "13.0.3",
 		"npm-run-all": "4.1.5",
-		"postcss": "8.4.4",
+		"postcss": "8.4.14",
 		"postcss-100vh-fix": "1.0.2",
 		"postcss-flexbugs-fixes": "5.0.2",
-		"postcss-preset-env": "7.0.1",
-		"postcss-scss": "4.0.2",
-		"prettier": "2.3.2",
-		"react-refresh": "0.11.0",
-		"sass": "1.44.0",
-		"sass-loader": "12.3.0",
-		"semantic-release": "18.0.1",
+		"postcss-preset-env": "7.7.2",
+		"postcss-scss": "4.0.4",
+		"prettier": "2.7.1",
+		"react-refresh": "0.14.0",
+		"require-from-string": "2.0.2",
+		"sass": "1.53.0",
+		"sass-loader": "13.0.2",
+		"semantic-release": "19.0.3",
 		"start-server-and-test": "1.14.0",
-		"storybook-addon-next-router": "3.1.0",
-		"storybook-dark-mode": "1.0.8",
-		"stylelint": "14.1.0",
-		"stylelint-config-css-modules": "2.3.0",
+		"storybook-addon-next-router": "4.0.0",
+		"storybook-dark-mode": "1.1.0",
+		"stylelint": "14.9.1",
+		"stylelint-config-css-modules": "4.1.0",
 		"stylelint-config-prettier": "9.0.3",
 		"stylelint-config-recess-order": "3.0.0",
-		"stylelint-config-standard": "24.0.0",
+		"stylelint-config-standard": "26.0.0",
 		"stylelint-prettier": "2.0.0",
-		"stylelint-scss": "4.0.0",
-		"typescript": "4.4.4",
-		"webpack": "5.64.4"
+		"stylelint-scss": "4.2.0",
+		"typescript": "4.7.4",
+		"webpack": "5.73.0"
 	},
 	"config": {
 		"commitizen": {

pages/_document.tsx

@@ -5,10 +5,7 @@ class MyDocument extends Document {
 	render() {
 		return (
 			<Html lang="en">
-				<Head>
-					<link rel="preconnect" href="https://fonts.googleapis.com" />
-					<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
-				</Head>
+				<Head />
 				<body className="preload">
 					<script src="/js/noflash.js" />
 					<Main />

styles/font.scss

@@ -1,48 +1,48 @@
 @font-face {
-	font-family: Manrope;
+	font-family: 'Manrope';
 	font-style: normal;
 	font-weight: 400;
-	src: url('https://fonts.gstatic.com/s/manrope/v4/xn7gYHE41ni1AdIRggexSvfedN4.woff2') format('woff2');
+	src: url('/fonts/manrope-v12.woff2') format('woff2');
 	font-display: swap;
 	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
 		U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
 @font-face {
-	font-family: Manrope;
+	font-family: 'Manrope';
 	font-style: normal;
 	font-weight: 500;
-	src: url('https://fonts.gstatic.com/s/manrope/v4/xn7gYHE41ni1AdIRggexSvfedN4.woff2') format('woff2');
+	src: url('/fonts/manrope-v12.woff2') format('woff2');
 	font-display: swap;
 	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
 		U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
 @font-face {
-	font-family: Manrope;
+	font-family: 'Manrope';
 	font-style: normal;
 	font-weight: 600;
-	src: url('https://fonts.gstatic.com/s/manrope/v4/xn7gYHE41ni1AdIRggexSvfedN4.woff2') format('woff2');
+	src: url('/fonts/manrope-v12.woff2') format('woff2');
 	font-display: swap;
 	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
 		U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
 @font-face {
-	font-family: Manrope;
+	font-family: 'Manrope';
 	font-style: normal;
 	font-weight: 700;
-	src: url('https://fonts.gstatic.com/s/manrope/v4/xn7gYHE41ni1AdIRggexSvfedN4.woff2') format('woff2');
+	src: url('/fonts/manrope-v12.woff2') format('woff2');
 	font-display: swap;
 	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
 		U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
 @font-face {
-	font-family: Manrope;
+	font-family: 'Manrope';
 	font-style: normal;
 	font-weight: 800;
-	src: url('https://fonts.gstatic.com/s/manrope/v4/xn7gYHE41ni1AdIRggexSvfedN4.woff2') format('woff2');
+	src: url('/fonts/manrope-v12.woff2') format('woff2');
 	font-display: swap;
 	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
 		U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;

styles/main.scss

@@ -11,14 +11,14 @@ body {
 
 	/* Disables pull-to-refresh but allows overscroll glow effects. */
 	overscroll-behavior-y: contain;
-	font-family: Manrope, Arial, 'Helvetica Neue', Helvetica, sans-serif;
+	font-family: 'Manrope', Arial, 'Helvetica Neue', Helvetica, sans-serif;
 
 	/* https://gist.github.com/hsleonis/55712b0eafc9b25f1944 */
 	font-size: 100%;
 	font-variant-ligatures: none;
 	text-shadow: rgba($black, 0.01) 0 0 1px;
 	transition: background 0.2s ease;
-	text-rendering: optimizeLegibility;
+	text-rendering: optimizelegibility;
 	-moz-osx-font-smoothing: grayscale;
 	-webkit-font-smoothing: antialiased;