🔡 Update default core Gradio font (#9204)

* change sans font from Source Sans Pro to Asap * change misc refs to Source Sans Pro * add changeset * revert old changes * add changeset * replace asap with IBM Plex Sans * add changeset * repalce asaps with ibm plex * tweak --------- Co-authored-by: gradio-pr-bot <[email protected]>
gradio-app · Aug 29, 2024 · 3c73f00 · 3c73f00
1 parent 6773c4d
commit 3c73f00
Show file tree

Hide file tree

Showing 11 changed files with 23 additions and 12 deletions.
diff --git a/.changeset/pink-shirts-fry.md b/.changeset/pink-shirts-fry.md
@@ -0,0 +1,11 @@
+---
+"@gradio/lite": minor
+"@gradio/theme": minor
+"@self/cdn-test": minor
+"@self/component-test": minor
+"@self/storybook": minor
+"gradio": minor
+"website": minor
+---
+
+feat:🔡 Update default core Gradio font 
diff --git a/gradio/themes/base.py b/gradio/themes/base.py
@@ -352,7 +352,7 @@ def __init__(
         spacing_size: sizes.Size | str = sizes.spacing_md,
         radius_size: sizes.Size | str = sizes.radius_md,
         font: fonts.Font | str | Iterable[fonts.Font | str] = (
-            fonts.GoogleFont("Source Sans Pro"),
+            fonts.GoogleFont("IBM Plex Sans"),
             "ui-sans-serif",
             "system-ui",
             "sans-serif",

diff --git a/gradio/themes/default.py b/gradio/themes/default.py
@@ -17,7 +17,7 @@ def __init__(
         radius_size: sizes.Size | str = sizes.radius_md,
         text_size: sizes.Size | str = sizes.text_md,
         font: fonts.Font | str | Iterable[fonts.Font | str] = (
-            fonts.GoogleFont("Source Sans Pro"),
+            fonts.GoogleFont("IBM Plex Sans"),
             "ui-sans-serif",
             "system-ui",
             "sans-serif",

diff --git a/guides/09_other-tutorials/theming-guide.md b/guides/09_other-tutorials/theming-guide.md
@@ -156,7 +156,7 @@ You could also create your own custom `Size` objects and pass them in.
 
 The final 2 constructor arguments set the fonts of the theme. You can pass a list of fonts to each of these arguments to specify fallbacks. If you provide a string, it will be loaded as a system font. If you provide a `gradio.themes.GoogleFont`, the font will be loaded from Google Fonts.
 
-- `font`: This sets the primary font of the theme. In the default theme, this is set to `gradio.themes.GoogleFont("Source Sans Pro")`.
+- `font`: This sets the primary font of the theme. In the default theme, this is set to `gradio.themes.GoogleFont("IBM Plex Sans")`.
 - `font_mono`: This sets the monospace font of the theme. In the default theme, this is set to `gradio.themes.GoogleFont("IBM Plex Mono")`.
 
 You could modify these values such as the following:

diff --git a/guides/cn/07_other-tutorials/theming-guide.md b/guides/cn/07_other-tutorials/theming-guide.md
@@ -156,7 +156,7 @@ with gr.Blocks(theme=gr.themes.Default(spacing_size=gr.themes.sizes.spacing_sm,
 
 最后的 2 个构造函数参数设置主题的字体。您可以将一系列字体传递给这些参数，以指定回退字体。如果提供了字符串，它将被加载为系统字体。如果提供了 `gradio.themes.GoogleFont`，则将从 Google Fonts 加载该字体。
 
-- `font`：此设置主题的主要字体。在默认主题中，此值设置为 `gradio.themes.GoogleFont("Source Sans Pro")`。
+- `font`：此设置主题的主要字体。在默认主题中，此值设置为 `gradio.themes.GoogleFont("IBM Plex Sans")`。
 - `font_mono`：此设置主题的等宽字体。在默认主题中，此值设置为 `gradio.themes.GoogleFont("IBM Plex Mono")`。
 
 您可以修改这些值，例如以下方式：

diff --git a/js/_cdn-test/index.html b/js/_cdn-test/index.html
@@ -5,7 +5,7 @@
 			html {
 				/* background: #111; */
 				/* color: #eee; */
-				font-family: Source Sans Pro;
+				font-family: IBM Plex Sans;
 			}
 		</style>
 		<meta charset="UTF-8" />

diff --git a/js/_website/tailwind.config.cjs b/js/_website/tailwind.config.cjs
@@ -10,7 +10,7 @@ module.exports = {
 	theme: {
 		extend: {
 			fontFamily: {
-				sans: ["Source Sans Pro", ...defaultTheme.fontFamily.sans],
+				sans: ["IBM Plex Sans", ...defaultTheme.fontFamily.sans],
 				mono: ["IBM Plex Mono", ...defaultTheme.fontFamily.mono]
 			},
 			colors: {

diff --git a/js/component-test/src/theme.css b/js/component-test/src/theme.css
@@ -54,7 +54,7 @@
 	--text-lg: 16px;
 	--text-xl: 22px;
 	--text-xxl: 26px;
-	--font: "Source Sans Pro", "ui-sans-serif", "system-ui", sans-serif;
+	--font: "IBM Plex Sans", "ui-sans-serif", "system-ui", sans-serif;
 	--font-mono: "IBM Plex Mono", "ui-monospace", "Consolas", monospace;
 	--body-background-fill: var(--background-fill-primary);
 	--body-text-color: var(--neutral-800);
@@ -432,7 +432,7 @@
 	--text-lg: 16px;
 	--text-xl: 22px;
 	--text-xxl: 26px;
-	--font: "Source Sans Pro", "ui-sans-serif", "system-ui", sans-serif;
+	--font: "IBM Plex Sans", "ui-sans-serif", "system-ui", sans-serif;
 	--font-mono: "IBM Plex Mono", "ui-monospace", "Consolas", monospace;
 	--body-text-size: var(--text-md);
 	--body-text-weight: 400;

diff --git a/js/lite/src/theme.css b/js/lite/src/theme.css
@@ -54,7 +54,7 @@
   --text-lg: 16px;
   --text-xl: 22px;
   --text-xxl: 26px;
-  --font: 'Source Sans Pro', 'ui-sans-serif', 'system-ui', sans-serif;
+  --font: 'IBM Plex Sans', 'ui-sans-serif', 'system-ui', sans-serif;
   --font-mono: 'IBM Plex Mono', 'ui-monospace', 'Consolas', monospace;
   --body-background-fill: var(--background-fill-primary);
   --body-text-color: var(--neutral-800);
@@ -351,7 +351,7 @@
   --text-lg: 16px;
   --text-xl: 22px;
   --text-xxl: 26px;
-  --font: 'Source Sans Pro', 'ui-sans-serif', 'system-ui', sans-serif;
+  --font: 'IBM Plex Sans', 'ui-sans-serif', 'system-ui', sans-serif;
   --font-mono: 'IBM Plex Mono', 'ui-monospace', 'Consolas', monospace;
   --body-text-size: var(--text-md);
   --body-text-weight: 400;

diff --git a/js/storybook/themeLight.js b/js/storybook/themeLight.js
@@ -8,7 +8,7 @@ export default create({
 	brandImage: Logo,
 	brandTarget: "_blank",
 
-	fontBase: '"Source Sans Pro", sans-serif',
+	fontBase: '"IBM Plex Sans", sans-serif',
 	fontCode: "monospace",
 
 	// theme colours

diff --git a/js/theme/src/pollen.config.cjs b/js/theme/src/pollen.config.cjs
@@ -11,7 +11,7 @@ module.exports = defineConfig((pollen) => {
 			},
 			font: {
 				...pollen.font,
-				sans: `Source Sans Pro, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`,
+				sans: `IBM Plex Sans, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`,
 				mono: `IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace`
 			},
 			radius: {