Describe the bug
If I select fonts using Google Fonts at the time of constructing a block, as shown below, the Google Fonts are not displayed correctly when server-side rendering (SSR) is enabled. The theme is loaded correctly though while the fonts fall back to some default serif font. SSR is enabled, by default, when deploying to Hugging Face Spaces.
with gr.Blocks(
title=self.app_name,
fill_height=True,
fill_width=True,
analytics_enabled=False,
theme=gr.themes.Ocean(
radius_size="md",
font=gr.themes.GoogleFont("Lato", weights=(100, 300)),
font_mono=gr.themes.GoogleFont("IBM Plex Mono", weights=(100, 300)),
),
):
# My code goes hereSee full code at https://github.com/anirbanbasu/gradio-experiments/blob/4ee3dea7459a5ab6d760c2e650c1802cf30723ac/src/app.py#L253 and its deployment at https://huggingface.co/spaces/anirbanbasu/gradio-experiments.
The fonts can be picked up correctly in the Hugging Face Spaces deployment if I explicitly disable SSR, e.g., at https://github.com/anirbanbasu/gradio-experiments/blob/4ee3dea7459a5ab6d760c2e650c1802cf30723ac/src/app.py#L306.
Have you searched existing issues? 🔎
Reproduction
import gradio as gr
class GradioApp:
def make_ui(self) -> gr.Blocks:
with gr.Blocks(
theme=gr.themes.Ocean(
radius_size="md",
font=gr.themes.GoogleFont("Lato", weights=(100, 300)),
font_mono=gr.themes.GoogleFont("IBM Plex Mono", weights=(100, 300)),
),
) as ui:
gr.Markdown("Hello world!")
return ui
if __name__ == "__main__":
app = GradioApp()
app.make_ui().queue().launch(
share=False,
# We can omit the ssr_mode setting if it is deployed to Hugging Face Spaces where it is enabled by default.
ssr_mode=True
)Screenshot
which should have looked like this instead
Logs
* Running on local URL: http://0.0.0.0:7860, with SSR ⚡
To create a public link, set `share=True` in `launch()`.
System Info
Gradio Environment Information:
------------------------------
Operating System: Linux
gradio version: 5.7.1
gradio_client version: 1.5.0
------------------------------------------------
gradio dependencies in your environment:
aiofiles: 23.2.1
anyio: 4.6.2.post1
audioop-lts is not installed.
fastapi: 0.115.5
ffmpy: 0.4.0
gradio-client==1.5.0 is not installed.
httpx: 0.28.0
huggingface-hub: 0.26.3
jinja2: 3.1.4
markupsafe: 2.1.5
numpy: 2.1.3
orjson: 3.10.12
packaging: 24.2
pandas: 2.2.3
pillow: 11.0.0
pydantic: 2.10.2
pydub: 0.25.1
python-multipart==0.0.12 is not installed.
pyyaml: 6.0.2
ruff: 0.8.1
safehttpx: 0.1.6
semantic-version: 2.10.0
starlette: 0.41.3
tomlkit==0.12.0 is not installed.
typer: 0.14.0
typing-extensions: 4.12.2
urllib3: 2.2.3
uvicorn: 0.32.1
authlib; extra == 'oauth' is not installed.
itsdangerous; extra == 'oauth' is not installed.
gradio_client dependencies in your environment:
fsspec: 2024.9.0
httpx: 0.28.0
huggingface-hub: 0.26.3
packaging: 24.2
typing-extensions: 4.12.2
websockets: 12.0
Severity
I can work around it
Describe the bug
If I select fonts using Google Fonts at the time of constructing a block, as shown below, the Google Fonts are not displayed correctly when server-side rendering (SSR) is enabled. The theme is loaded correctly though while the fonts fall back to some default serif font. SSR is enabled, by default, when deploying to Hugging Face Spaces.
See full code at https://github.com/anirbanbasu/gradio-experiments/blob/4ee3dea7459a5ab6d760c2e650c1802cf30723ac/src/app.py#L253 and its deployment at https://huggingface.co/spaces/anirbanbasu/gradio-experiments.
The fonts can be picked up correctly in the Hugging Face Spaces deployment if I explicitly disable SSR, e.g., at https://github.com/anirbanbasu/gradio-experiments/blob/4ee3dea7459a5ab6d760c2e650c1802cf30723ac/src/app.py#L306.
Have you searched existing issues? 🔎
Reproduction
Screenshot
which should have looked like this instead
Logs
System Info
Severity
I can work around it