Themebuilder: Google font is displayed in Colab but not displayed in Huggingface Hub

[crcdng]

Describe the bug

Update: this is caused by the bug reported in #10101, setting ssr_mode=False in launch() is a workaround
Update 2: apparently ssr_mode=False works for a space that uses the theme but not for the Theme preview itself, see https://huggingface.co/spaces/crcdng/font_test

When a Google font is set in the Gradio Themebuilder in Google Colab it is displayed correctly. When uploading the theme to Huggingface Hub as a Space though, the font is not displayed.

Have you searched existing issues? 🔎

• I have searched and found no existing issues

Reproduction

Prerequisites: Google Colab, Huggingface account, Huggingface token
To reproduce, in Google Colab

!pip install gradio

import gradio as gr
gr.themes.builder()

In Main Font -> Core Fonts -> Font 1 enter a Google font, e.g. Oxanium and tick the Google font checkmark.

The font in the Themebuilder demo will change to the selected one as expected.

Then use Upload to Huggingface Hub feature.

In the Huggingface Hub Space, a default font is displayed instead of the selected one.

Screenshot

Font displayed in Colab

Font displayed in the HF space

Logs

example space uploaded from Colab: https://huggingface.co/spaces/crcdng/font_test

Log of the space



themes%2Ftheme_schema%400.0.1.json:   0%|          | 0.00/17.7k [00:00<?, ?B/s]
themes%2Ftheme_schema%400.0.1.json: 100%|██████████| 17.7k/17.7k [00:00<00:00, 50.9MB/s]
/usr/local/lib/python3.10/site-packages/gradio/components/chatbot.py:285: UserWarning: You have not specified a value for the `type` parameter. Defaulting to the 'tuples' format for chatbot messages, but this is deprecated and will be removed in a future version of Gradio. Please set type='messages' instead, which uses openai-style dictionaries with 'role' and 'content' keys.
  warnings.warn(
* Running on local URL:  http://0.0.0.0:7860, with SSR ⚡ (experimental, to disable set `ssr=False` in `launch()`)

To create a public link, set `share=True` in `launch()`.



Console.log of the space 


font_test:241 Unrecognized feature: 'ambient-light-sensor'.
font_test:241 Unrecognized feature: 'battery'.
font_test:241 Unrecognized feature: 'document-domain'.
font_test:241 Unrecognized feature: 'layout-animations'.
font_test:241 Unrecognized feature: 'legacy-image-formats'.
font_test:241 Unrecognized feature: 'oversized-images'.
font_test:241 Unrecognized feature: 'vr'.
font_test:241 Unrecognized feature: 'wake-lock'.
crcdng-font-test.hf.space/:109 Mixed Content: The page at 'https://crcdng-font-test.hf.space/?__theme=light' was loaded over HTTPS, but requested an insecure element 'http://0.0.0.0:7860/gradio_api/file=/tmp/gradio/48b677af1fdad2de16cd1796d9fef50b849f4511d3136ab6d517296fa90f3228/header-image.jpg'. This request was not upgraded to HTTPS because its URL's host is an IP address.
crcdng-font-test.hf.space/:109 Mixed Content: The page at 'https://huggingface.co/' was loaded over HTTPS, but requested an insecure image 'http://0.0.0.0:7860/gradio_api/file=/tmp/gradio/48b677af1fdad2de16cd1796d9fef50b849f4511d3136ab6d517296fa90f3228/header-image.jpg'. This request has been blocked; the content must be served over HTTPS.
crcdng-font-test.hf.space/:112 Mixed Content: The page at 'https://crcdng-font-test.hf.space/?__theme=light' was loaded over HTTPS, but requested an insecure element 'http://0.0.0.0:7860/gradio_api/file=/tmp/gradio/f9a4efe1b7296f259dd0db86bcf4f4658d4247da0230a467518feb61eacac174/world.mp4'. This request was not upgraded to HTTPS because its URL's host is an IP address.
crcdng-font-test.hf.space/:112 Mixed Content: The page at 'https://huggingface.co/' was loaded over HTTPS, but requested an insecure video 'http://0.0.0.0:7860/gradio_api/file=/tmp/gradio/f9a4efe1b7296f259dd0db86bcf4f4658d4247da0230a467518feb61eacac174/world.mp4'. This request has been blocked; the content must be served over HTTPS.
ui-sans-serif-Bold.woff2:1 
            
            
           Failed to load resource: the server responded with a status of 404 ()
ui-sans-serif-Regular.woff2:1 
            
            
           Failed to load resource: the server responded with a status of 404 ()
ui-monospace-Regular.woff2:1 
            
            
           Failed to load resource: the server responded with a status of 404 ()
system-ui-Bold.woff2:1 
            
            
           Failed to load resource: the server responded with a status of 404 ()
system-ui-Regular.woff2:1 
            
            
           Failed to load resource: the server responded with a status of 404 ()
Consolas-Regular.woff2:1 
            
            
           Failed to load resource: the server responded with a status of 404 ()
index.js:6 SSE Stream ended
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.

System Info

Gradio Environment Information:
------------------------------
Operating System: Linux
gradio version: 5.18.0
gradio_client version: 1.7.2

------------------------------------------------
gradio dependencies in your environment:

aiofiles: 23.2.1
anyio: 3.7.1
audioop-lts is not installed.
fastapi: 0.115.8
ffmpy: 0.5.0
gradio-client==1.7.2 is not installed.
httpx: 0.28.1
huggingface-hub: 0.28.1
jinja2: 3.1.5
markupsafe: 2.1.5
numpy: 1.26.4
orjson: 3.10.15
packaging: 24.2
pandas: 2.2.2
pillow: 11.1.0
pydantic: 2.10.6
pydub: 0.25.1
python-multipart: 0.0.20
pyyaml: 6.0.2
ruff: 0.9.7
safehttpx: 0.1.6
semantic-version: 2.10.0
starlette: 0.45.3
tomlkit: 0.13.2
typer: 0.15.1
typing-extensions: 4.12.2
urllib3: 2.3.0
uvicorn: 0.34.0
authlib; extra == 'oauth' is not installed.
itsdangerous; extra == 'oauth' is not installed.


gradio_client dependencies in your environment:

fsspec: 2024.10.0
httpx: 0.28.1
huggingface-hub: 0.28.1
packaging: 24.2
typing-extensions: 4.12.2
websockets: 14.2

Severity

I can work around it