Google Fonts do not work with server-side rendering

[anirbanbasu]

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 here

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? 🔎

• I have searched and found no 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

[abidlabs]

Thanks @anirbanbasu for reporting. cc @dawoodkhan82, I think your PR #9888 should fix this, right?

[dawoodkhan82]

@abidlabs I think it should. I'll test to see if it does.