Fix website local font paths and font-weight CSS (#12966)

* fix font weight

* fix font path for website

* add changeset

* add changeset

* update stale theme.css

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Freddy Boulton <41651716+freddyaboulton@users.noreply.github.com>

Author: 3 people

.changeset/nine-towns-smoke.md

@@ -0,0 +1,6 @@
+---
+"gradio": patch
+"website": patch
+---
+
+fix:Fix website local font paths and font-weight CSS

gradio/themes/utils/fonts.py

@@ -86,21 +86,22 @@ def stylesheet(self) -> dict:
         css_template = textwrap.dedent("""
             @font-face {{
                 font-family: '{name}';
-                src: url('static/fonts/{file_name}/{file_name}-{weight}.woff2') format('woff2');
-                font-weight: {weight};
+                src: url('static/fonts/{file_name}/{file_name}-{file_weight}.woff2') format('woff2');
+                font-weight: {css_weight};
                 font-style: normal;
             }}
             """)
         css_rules = []
         for weight in self.weights:
-            weight_name = (
+            file_weight = (
                 "Regular" if weight == 400 else "Bold" if weight == 700 else str(weight)
             )
             css_rules.append(
                 css_template.format(
                     name=self.name,
                     file_name=self.name.replace(" ", ""),
-                    weight=weight_name,
+                    file_weight=file_weight,
+                    css_weight=weight,
                 )
             )
         return {"url": None, "css": "\n".join(css_rules)}

js/_website/package.json

@@ -3,7 +3,7 @@
 	"version": "0.71.1",
 	"private": true,
 	"scripts": {
-		"dev": "pip install boto3 markdown && python generate_jsons/generate.py && python ../../scripts/generate_theme.py --outfile ./src/lib/assets/theme.css && vite dev",
+		"dev": "pip install boto3 markdown && python generate_jsons/generate.py && python ../../scripts/generate_theme.py --website --outfile ./src/lib/assets/theme.css && vite dev",
 		"build": "vite build",
 		"preview": "vite preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",

js/_website/src/lib/assets/theme.css

@@ -1,14 +1,14 @@
 @font-face {
 	font-family: "IBM Plex Mono";
-	src: url("static/fonts/IBMPlexMono/IBMPlexMono-Regular.woff2") format("woff2");
-	font-weight: Regular;
+	src: url("/fonts/IBMPlexMono/IBMPlexMono-Regular.woff2") format("woff2");
+	font-weight: 400;
 	font-style: normal;
 }
 
 @font-face {
 	font-family: "IBM Plex Mono";
-	src: url("static/fonts/IBMPlexMono/IBMPlexMono-Bold.woff2") format("woff2");
-	font-weight: Bold;
+	src: url("/fonts/IBMPlexMono/IBMPlexMono-Bold.woff2") format("woff2");
+	font-weight: 700;
 	font-style: normal;
 }
 

js/_website/static/fonts/IBMPlexMono/IBMPlexMono-Bold.woff2

@@ -11,9 +11,15 @@
 parser.add_argument(
     "--theme", choices=["default", "glass", "monochrome", "soft"], default="default"
 )
+parser.add_argument(
+    "--website", action="store_true", help="Adjust paths for SvelteKit website"
+)
 args = parser.parse_args()
 
 ThemeClass = getattr(themes, args.theme.capitalize())
 css = ThemeClass()._get_theme_css()
 
+if args.website:
+    css = css.replace("url('static/", "url('/")
+
 args.outfile.write(css)