diff --git a/.changeset/pink-shirts-fry.md b/.changeset/pink-shirts-fry.md new file mode 100644 index 0000000000000..4bc8b7a8da607 --- /dev/null +++ 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 index 93c53f52a7f29..feafe8975e610 100644 --- 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 index 8f5dd2d5a1954..e08a62115de3d 100644 --- 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 index 48fd97c5c8908..767a725040064 100644 --- 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 index 89515a61bb023..f411f4203b758 100644 --- 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 index ea91273f74ca8..21dfe14af3898 100644 --- 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; } diff --git a/js/_website/tailwind.config.cjs b/js/_website/tailwind.config.cjs index 9272f8a112401..b975c6a590204 100644 --- 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 index f931dc90bd0e8..f773c3d5b8dc6 100644 --- 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 index 19e647060cfcc..d0667ad26dee4 100644 --- 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 index 51d5170f32fe0..29925b72a4c84 100644 --- 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 index b1e0f949109cb..8cf39001733f7 100644 --- 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: {