Fix Google Fonts import downloading TTF files instead of woff2 #620

Subject of the issue

The default Open Sans @import in less/_defaults/_font-config.less is not kept as a CSS import. Less downloads Google's font stylesheet during the build and pastes it into adapt.css. Google serves that stylesheet to the build (not a browser), so it returns full TTF files instead of woff2. Every learner then downloads the larger TTF fonts, and the build needs internet access.

Your environment

• Framework v5.56.2 and v5.56.3, Vanilla up to v9.41.2 (master), Less 3.13.1
• Not browser-specific: this happens at build time

Steps to reproduce

1. Build a course using Vanilla's default font settings (grunt dev).
2. Open adapt.css in the build folder.
3. Search for fonts.gstatic.com.

Expected behaviour

adapt.css starts with @import url('https://fonts.googleapis.com/css?family=Open+Sans:...'), and each browser fetches the font files Google picks for it (woff2 for modern browsers).

Actual behaviour

The @import is gone. In its place are @font-face rules pointing at .ttf files on fonts.gstatic.com.

Less treats any imported file that doesn't end in .css as a Less file, and Google's font URLs (/css?family=...) have no extension.

Suggested Fix

Add the (css) import option: @import (css) url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,700');

Posted via collaboration with Claude Code