After this video you can load any family from Google Fonts into a Solo site — including one that is not on Solo's built-in list — using a single text field and a few lines of CSS.
The field the video uses
The control is Import Google Font, found on the Typography & Content tab inside the Global Site Settings section of Solo's theme settings. It holds one value: the stylesheet URL that Google hands you. Solo validates that the value is a real absolute URL and then prints it into the page head as a <link rel="stylesheet"> element. That fetches the font — it does not yet apply it to anything, which is the step most people miss.
The two steps demonstrated
- On fonts.google.com choose the family and the weights you need, copy the generated URL, and paste it into Import Google Font. A URL such as
https://fonts.googleapis.com/css2?family=Teko:wght@300;400;700&display=swapis exactly what the field expects. - Write the rule that uses the family — for example
h1, h2, h3 { font-family: 'Teko', sans-serif !important; }— into CSS Injector on the Custom Code tab. Solo compacts that text and emits it inline inside<style id="solo-css-injector">. For anything longer, use CSS Dynamic on the same tab instead; Solo writes it tosites/*/files/solo/css/solo-css-dynamic.cssand loads it as a cacheable file.
If the font never appears, check those two places in that order: head link first, rule second.
Why the help text insists on !important
Solo's own Global Site Fonts and Heading Fonts selections attach a stylesheet that sets the family on the page wrapper and on headings. An imported font added afterwards is competing with that stylesheet, so a rule without !important is silently overridden. If you have left both of those selections on None, you will not need it. Read more about installing and customising Solo before you start changing typography.
What you need
Solo's solo.info.yml declares core_version_requirement: ^10.1 || ^11 || ^12 and php: ^8.1, and this feature needs no extra module. Grab the theme from the Solo theme page and try it on a staging site first — a third-party font URL is an extra external request on every page load.
If you would rather have this set up for you, Drupal theming services covers the work, and recent projects show the result.
