Fonts are different between local html and readthedocs.org

[daianagan]

Hi!! I am new to Sphinx and ReadtheDocs, and I really like the way it looks on the webpage, though I need some documents to not be on the web (so I want to only make the html file and have it on my computer)

Problem

When opening my index.html file on my computer the fonts are not the same as the ones I see when I open the project in ReadTheDocs webpage (after pushing to github and importing it to readthedocs.org). On readthedocs its a sans-serif font and locally its serif.

I also tried downloading the ReadsTheDocs html zip to check and the font I see is the same as when I make it locally in my computer.
I have already installed the fonts and nothing changed either. Maybe there is something I need to change on the CSS files for what I have read but I am not familiar with that

I have MacOS Mojave version 10.14.4

Reproducible Project

The commands for the local html file:

mkdir docs
cd docs
pip install pip install sphinx-rtd-theme
sphinx-quickstart (all default params)
(modified conf.py to have html_theme = "sphinx_rtd_theme")
make html

For ReadtheDocs view:
Import manually from https://github.com/daianagan/daiana_rtd_issue

RST:

.. Test documentation master file, created by
   sphinx-quickstart on Thu Jul 18 13:15:32 2019.
   You can adapt this file completely to your liking, but it should at least
   contain the root `toctree` directive.

Welcome to Test's documentation!
================================

.. toctree::
   :maxdepth: 2
   :caption: Contents:



Indices and tables
==================

* :ref:`genindex`
* :ref:`modindex`
* :ref:`search`

Error Logs/Results

Expected Results

Environment Info

• Python Version: Python 2.7.14 (also tried with python 3.6)
• Sphinx Version: 1.6.6
• RTD Theme Version: latest (pip installed today)

[foo-git]

I'm new to GitHub, but I'm also experiencing this behaviour, causing my account creation. I might have some insight on the bug plus workaround, but no RTD fix :(

I experienced this issue in Firefox (Windows/Linux), but not while using Edge (Windows).

Using the Firefox Console on the local docs file, I saw some CORS warnings, pointing to this website.

For Firefox 68, I got the correct fonts/symbols back (and opening up a security vulnerability) by setting in about:config:

privacy.file_unique_origin=False

So my uneducated guess is that for local files, Firefox does not permit loading of the JavaScript to render the fonts and symbols correctly.

[agjohnson]

We don't require JS to load fonts, this is done with pure css, so that is unlikely the case.

The next things to check are:

• Are the requests for these font files failing with a 404 error?
• Are any requests for font files happening at all?
• Is your browser blocking requests to the font files?
• Does your browser not support the font files being used? We should have broad coverage of font support at the moment, but we are removing support for old versions of IE soon.
• Does running a modern Sphinx help? 1.6 is rather old

[david-perez]

I'm also experiencing this since Firefox 68 (released 2019-07-09) with sphinx-build 2.1.2, sphinx_rtd_theme 0.4.3. @foo-git 's linked MDN web doc explains the problem perfectly. The fonts are being loaded via @font-face in _theme_font_local.sass, the resolved path being local ../fonts/{font_family}/{font_name}, so it doesn't satisfy the new CORS same-origin rule. So the browser ends up blocking all of the font requests.

[agjohnson]

Thanks for the explanation @david-perez! With the move to webpack, fonts will be sourced from fonts/... now, so should avoid the CORS rule now. It's loading okay in Firefox 66.

The next release should address the issue, I'll hopefully be dropping a development release in the next week. Going to close this for now, the fix was merged in a while back.