Problem/Motivation
Hello everyone!
It is being a while that Im trying to add a new font face in a subtheme based on Belgrade, and I cannot figure out how to do it.
Into the admin/appearance/settings/gssolar Tab Fonts & Icons, I see my new font, Quicksand, but if I select, nothing changes... Also no error into the log.
Any tips about what is missing? :(
Drupal 10.2.4
Here you are what I done till now.
It would be great to point font files to local, instead of "fonts.googleapis.com", but dont know how to do it - I have all the font files that I got from "https://fonts.google.com/selection?query=quicksand"...
/* quicksand-500 - vietnamese_latin-ext_latin */
@font-face {
font-family: 'Quicksand';
font-style: normal;
font-weight: 500;
src: url('../fonts/quicksand-v29-vietnamese_latin-ext_latin-500.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/quicksand-v29-vietnamese_latin-ext_latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/quicksand-v29-vietnamese_latin-ext_latin-500.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/quicksand-v29-vietnamese_latin-ext_latin-500.woff') format('woff'), /* Modern Browsers */
url('../fonts/quicksand-v29-vietnamese_latin-ext_latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/quicksand-v29-vietnamese_latin-ext_latin-500.svg#Quicksand') format('svg'); /* Legacy iOS */
font-display: swap;
}
Many thanks in advance!
themes
> custom
> > gssolar
> > > css
> > > > main.css
> > > fonts
> > > > quicksand.css
> > > gssolar.info.yml
> > > gssolar.libraries.yml
> > > theme-settings.php
main.css
I have added Quicksand
--beo-font-sans-serif: system-ui, -apple-system, <strong>"Quicksand"</strong>, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
quicksand.css
created a new file
:root {
--beo-font-sans-serif: "Quicksand", sans-serif;
}
gssolar.info.yml
name: GSSolar Belgrade
type: theme
description: 'gssolar subtheme based on Belgrade theme.'
core_version_requirement: ^9.2 || ^10
'base theme': belgrade
libraries:
- gssolar/global
regions:
navigation: 'Navigation'
top_bar: 'Top bar'
header: 'Header'
highlighted: 'Highlighted'
help: 'Help'
content: 'Content'
sidebar_first: 'Primary'
sidebar_second: 'Secondary'
footer_first: 'Footer First Column'
footer_second: 'Footer Second Column'
footer_third: 'Footer Third Column'
footer: 'Footer'
page_top: 'Page top'
page_bottom: 'Page bottom'
hidden: 'HIDDEN'
gssolar.libraries.yml
global:
css:
component:
css/main.css: {}
# Font libraries
font.quicksand:
license:
name: OFL web version
url: http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL_web
css:
theme:
'//fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap':
{ type: external, minified: true }
fonts/quicksand.css: {}
theme-settings.php
use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Url;
function gssolar_form_system_theme_settings_alter(&$form, FormStateInterface $form_state) {
$form['fonts_and_icons']['font_set'] = array(
'#type' => 'select',
'#title' => t('Font libraries'),
'#default_value' => theme_get_setting('font_set'),
'#empty_option' => t('None'),
'#description' => t('A few predefined font libraries delivered from Google.<br/>All fonts are loaded with Regular, Italic and Bold variants.'),
'#options' => array(
'quicksand' => t('Quicksand'),
'ibm_plex_sans' => t('IBM Plex Sans'),
'lato' => t('Lato'),
'montserrat' => t('Montserrat'),
'open_sans' => t('Open Sans'),
'raleway' => t('Raleway'),
'roboto' => t('Roboto'),
),
);
}