render global styles and font family together

apps/designer/app/canvas/canvas.tsx

@@ -3,7 +3,7 @@ import store from "immerhin";
 import type { Build } from "@webstudio-is/project";
 import {
   createElementsTree,
-  globalStyles,
+  useGlobalStyles,
   type OnChangeChildren,
   type Tree,
   useAllUserProps,
@@ -117,7 +117,7 @@ export const Canvas = ({ data }: CanvasProps): JSX.Element | null => {
   }
   const isDesignerReady = useSubscribeDesignerReady();
   useInitializeBreakpoints(data.breakpoints);
-  globalStyles();
+  useGlobalStyles({ assets: data.assets })();
   useAllUserProps(data.props);
   usePopulateRootInstance(data.tree);
   // e.g. toggling preview is still needed in both modes

packages/react-sdk/src/tree/root.ts

@@ -9,7 +9,7 @@ import {
 } from "./wrapper-component";
 import { FONT_FORMATS, getFontFaces } from "@webstudio-is/fonts";
 import type { Asset, FontAsset } from "@webstudio-is/asset-uploader";
-import { useMemo } from "react";
+import { useCallback } from "react";
 
 export type Data = {
   tree: Tree | null;
@@ -18,11 +18,20 @@ export type Data = {
   assets: Array<Asset>;
 };
 
-export const globalStyles = globalCss({
-  html: {
-    height: "100%",
-  },
-});
+export const useGlobalStyles = ({ assets }: { assets: Array<Asset> }) => {
+  return useCallback(() => {
+    const fontAssets = assets.filter(
+      (asset) => asset.format in FONT_FORMATS
+    ) as Array<FontAsset>;
+
+    return globalCss({
+      "@font-face": getFontFaces(fontAssets),
+      html: {
+        height: "100%",
+      },
+    })();
+  }, [assets]);
+};
 
 type RootProps = {
   data: Data;
@@ -37,15 +46,7 @@ export const InstanceRoot = ({
     throw new Error("Tree is null");
   }
   setBreakpoints(data.breakpoints);
-  globalStyles();
-  const assets = useMemo(() => {
-    return data.assets.filter(
-      (asset) => asset.format in FONT_FORMATS
-    ) as Array<FontAsset>;
-  }, [data.assets]);
-  globalCss({
-    "@font-face": getFontFaces(assets),
-  })();
+  useGlobalStyles({ assets: data.assets })();
   useAllUserProps(data.props);
   return createElementsTree({
     instance: data.tree.root,