Web: Optimize fonts import

This commit is contained in:
Alexey Safronov 2023-08-03 21:54:09 +04:00
parent 42eb301dbc
commit 8ba1099358
11 changed files with 28 additions and 32 deletions

View File

@ -1,7 +1,7 @@
// Override default variables before the import
$font-family-base: "Open Sans", sans-serif;
@import "./opensansoffline.scss";
@import url(../../public/css/fonts.css);
html,
body {

View File

@ -1 +0,0 @@
export { default as fonts } from "./opensansoffline.scss";

View File

@ -1 +0,0 @@
@import url(../../public/css/fonts.css);

View File

@ -2,7 +2,7 @@ import { MINIMAL_VIEWPORTS } from "@storybook/addon-viewport";
import { withContexts } from "@storybook/addon-contexts/react";
import { contexts } from "./contexts/index";
import "../../common/opensansoffline.scss";
import "../../../public/css/fonts.css";
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },

View File

@ -50,6 +50,7 @@
"@babel/plugin-proposal-class-properties": "^7.14.5",
"@babel/plugin-proposal-export-default-from": "^7.14.5",
"@babel/plugin-proposal-export-namespace-from": "^7.14.5",
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
"@babel/plugin-transform-runtime": "^7.15.0",
"@babel/preset-env": "^7.15.4",
"@babel/preset-react": "^7.14.5",

View File

@ -13,7 +13,6 @@ import ErrorBoundary from "./components/ErrorBoundary";
import store from "client/store";
import i18n from "./i18n";
import { I18nextProvider } from "react-i18next";
import { fonts } from "@docspace/common/fonts.js";
import GlobalStyle from "./components/GlobalStyle.js";
import { inject, observer, Provider as MobxProvider } from "mobx-react";
import ThemeProvider from "@docspace/components/theme-provider";
@ -94,7 +93,7 @@ const App = ({ initialLanguage, initialI18nStoreASC, setTheme, ...rest }) => {
return (
<ErrorBoundary onError={onError}>
<GlobalStyle fonts={fonts} />
<GlobalStyle />
<Editor
mfReady={isInitialized}
mfFailed={isErrorLoading}

View File

@ -4,7 +4,7 @@ const GlobalStyle = createGlobalStyle`
html,
body {
height: 100%;
${(props) => props?.fonts}
font-family: 'Open Sans', sans-serif, Arial;
font-size: 13px;
overscroll-behavior: none;

View File

@ -87,6 +87,8 @@ export default function template(
content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, viewport-fit=cover"
/>
<meta name="theme-color" content="#000000" />
<link rel="stylesheet" type="text/css" href="/static/css/fonts.css" />
<link id="favicon" rel="shortcut icon" href=${faviconHref} type="image/x-icon"/>
<link rel="manifest" href="/manifest.json" />
<meta name="mobile-web-app-capable" content="yes" />

View File

@ -5,7 +5,6 @@ import ErrorBoundary from "./ErrorBoundary";
import App from "../App";
import i18n from "../i18n";
import { I18nextProvider } from "react-i18next";
import { fonts } from "@docspace/common/fonts";
import { inject, observer, Provider as MobxProvider } from "mobx-react";
import ThemeProvider from "@docspace/components/theme-provider";
import store from "client/store";
@ -51,7 +50,7 @@ const ClientAppWrapper: React.FC<IClientApp> = (props) => {
};
return (
<ErrorBoundary onError={onError}>
<GlobalStyles fonts={fonts} />
<GlobalStyles />
<ClientApp {...props} />
</ErrorBoundary>
);

View File

@ -2,9 +2,6 @@ import { getScripts } from "./helpers";
import pkg from "../../../package.json";
import { getLogoFromPath } from "@docspace/common/utils";
import cyrillicOpenSansFont from "PUBLIC_DIR/fonts/v35/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSumu1aB.woff2";
import latinOpenSansFont from "PUBLIC_DIR/fonts/v35/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.woff2";
const { title } = pkg;
const organizationName = "ONLYOFFICE"; //TODO: Replace to API variant
@ -91,8 +88,7 @@ const template: Template = (
content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, viewport-fit=cover"
/>
<meta name="theme-color" content="#000000" />
<link rel="preload" as="font" crossorigin type="font/woff2" href="${cyrillicOpenSansFont}" />
<link rel="preload" as="font" crossorigin type="font/woff2" href="${latinOpenSansFont}" />
<link rel="stylesheet" type="text/css" href="/static/css/fonts.css" />
<link id="favicon" rel="shortcut icon" href=${favicon} />
<link rel="manifest" href="/manifest.json" />

View File

@ -1206,7 +1206,7 @@ __metadata:
languageName: node
linkType: hard
"@babel/plugin-proposal-private-property-in-object@npm:^7.12.1":
"@babel/plugin-proposal-private-property-in-object@npm:^7.12.1, @babel/plugin-proposal-private-property-in-object@npm:^7.21.11":
version: 7.21.11
resolution: "@babel/plugin-proposal-private-property-in-object@npm:7.21.11"
dependencies:
@ -2725,6 +2725,7 @@ __metadata:
"@babel/plugin-proposal-class-properties": ^7.14.5
"@babel/plugin-proposal-export-default-from": ^7.14.5
"@babel/plugin-proposal-export-namespace-from": ^7.14.5
"@babel/plugin-proposal-private-property-in-object": ^7.21.11
"@babel/plugin-transform-runtime": ^7.15.0
"@babel/preset-env": ^7.15.4
"@babel/preset-react": ^7.14.5
@ -6877,9 +6878,9 @@ __metadata:
linkType: hard
"@types/node@npm:*, @types/node@npm:>=12.12.47, @types/node@npm:>=13.7.0":
version: 20.4.5
resolution: "@types/node@npm:20.4.5"
checksum: 36a0304a8dc346a1b2d2edac4c4633eecf70875793d61a5274d0df052d7a7af7a8e34f29884eac4fbd094c4f0201477dcb39c0ecd3307ca141688806538d1138
version: 20.4.6
resolution: "@types/node@npm:20.4.6"
checksum: 28dfc13da87f579264840bc5b8a2cde2dcb93662464a0d58f0fa98eba1aae978e3c73e893474238c4a1226d0b1a14e3936520ff9795e1c4e06fad3282be83d18
languageName: node
linkType: hard
@ -9895,9 +9896,9 @@ __metadata:
linkType: hard
"caniuse-lite@npm:^1.0.30001109, caniuse-lite@npm:^1.0.30001517":
version: 1.0.30001518
resolution: "caniuse-lite@npm:1.0.30001518"
checksum: 1b63272f6e3d628ac52e2547e0b75fc477004d4b19b63e34b2c045de7f2e48909f9ea513978fc5a46c4ab5ac6c9daf9cc5e6a78466e90684fb824c3f2105e8f5
version: 1.0.30001519
resolution: "caniuse-lite@npm:1.0.30001519"
checksum: 66085133ede05d947e30b62fed2cbae18e5767afda8b0de38840883e1cfe5846bf1568ddbafd31647544e59112355abedaf9c867ac34541bfc20d69e7a19d94c
languageName: node
linkType: hard
@ -12059,9 +12060,9 @@ __metadata:
linkType: hard
"electron-to-chromium@npm:^1.4.477":
version: 1.4.480
resolution: "electron-to-chromium@npm:1.4.480"
checksum: 074b9d81dffa6ca182f604326c62a12d22139ae141d6ffabdb3b267f42fac88ba3e69d3614f9e939f65a0f03a343f0c81f702e24064bc54c4f138e02378b1e54
version: 1.4.482
resolution: "electron-to-chromium@npm:1.4.482"
checksum: 2eb3f094d10892517081722e1e8a3dc381bd8f1500cb0d4107975bceb37096d63c24256833c92843026a4b921b9f216b2d97975fdaaeb069257f0e85a1a4d83d
languageName: node
linkType: hard
@ -12181,7 +12182,7 @@ __metadata:
languageName: node
linkType: hard
"engine.io-client@npm:~6.5.1":
"engine.io-client@npm:~6.5.2":
version: 6.5.2
resolution: "engine.io-client@npm:6.5.2"
dependencies:
@ -15041,9 +15042,9 @@ __metadata:
linkType: hard
"immutable@npm:^4.0.0":
version: 4.3.1
resolution: "immutable@npm:4.3.1"
checksum: a3a5ba29bd43f3f9a2e4d599763d7455d11a0ea57e50bf43f2836672fc80003e90d69f2a4f5b589f1f3d6986faf97f08ce1e253583740dd33c00adebab88b217
version: 4.3.2
resolution: "immutable@npm:4.3.2"
checksum: bb1d0f3eb8ebef04aa9e2c698ba1a248976a4dc0257fa2f1bffaaae575f891395fe9ef39eaf49856d6c4edd31704e300ec563ed44ea9d7c7996186deab91d0ff
languageName: node
linkType: hard
@ -23163,14 +23164,14 @@ __metadata:
linkType: hard
"socket.io-client@npm:^4.4.0":
version: 4.7.1
resolution: "socket.io-client@npm:4.7.1"
version: 4.7.2
resolution: "socket.io-client@npm:4.7.2"
dependencies:
"@socket.io/component-emitter": ~3.1.0
debug: ~4.3.2
engine.io-client: ~6.5.1
engine.io-client: ~6.5.2
socket.io-parser: ~4.2.4
checksum: 5e606ebe01eab4a034ef982b2fc9936a6d98ce9fa7940dd7dcd93f1473a8c273ee69d045c087ac534f0d232285e81c16644de4f28d1731ee864402a9ee3059ee
checksum: 8f0ab6b623e014d889bae0cd847ef7826658e8f131bd9367ee5ae4404bb52a6d7b1755b8fbe8e68799b60e92149370a732b381f913b155e40094facb135cd088
languageName: node
linkType: hard