Changing Fonts on Curatescape

Customization
1

Dear Erin,

I apologize in advance if this is a stupid request, but I just can’t seem to figure this out. I saw under the Appearance configuration settings that you’ve inserted a “Font Services” section, where administrators can change up the fonts used on their Curatescape installation. I found Roboto on Google Fonts and decided that I’d try to use one of its bold instances for my (sub)headings and one of its light instances for my main text. I typed out “Roboto” under the Google Fonts section and clicked save, but the only the thing that happened was the site’s fonts defaulted to Times New Roman or some other serifed font. So then I added some custom CSS to the “Advanced” section, with the !important; tag at the end of each of those lines. But that didn’t change anything either. I noticed on Google Fonts that you’re able to download the fonts. Should those be uploaded to the backend of my Curatescape installation? I figured that the Google Fonts section of the “Font Services” section would be enough to connect with the online Roboto font, and all I would have to do from there is override the default CSS commands re: fonts used on the website. But nothing is changing. Could you help me consumate this disagreeable font marriage?!

Thank you.

Here’s a screenshot along with the CSS code I entered:

image
image1340×252 29.7 KB

/* Font Stacks */
–font-1: “Roboto:Black 900” !important;
–font-2: “Roboto: Light 300” !important;
–font-heading: var(–font-1) !important;
–font-subheading: var(–font-1) !important;
–font-body: var(–font-2) !important;
–font-ui: var(–font-2) !important;
–font-buttons: var(–font-2) !important;

2

P.s. I also tried typing just Roboto in the Google Fonts section, but that didn’t change anything.

3

Would love to have some clarification on this also - I’ve never been fully clear on how to utilize Google Fonts in Curatescape (which may just say more about my limited web development skills generally)

4

Adding the font names to the Google Fonts theme setting configuration simply loads the font(s) onto your page. You then need to apply the fonts using CSS.

Below is the Google Fonts interface for your selection (Roboto, 300 and 900 weights only).

Screenshot 2024-08-26 at 9.33.28 AM
Screenshot 2024-08-26 at 9.33.28 AM2550×1908 387 KB

So from this you can infer (by looking at how they’re shown in the <link> embed code example) that the correct font family configuration would be:

a) for only 300 and 900 weights…

Roboto:wght@300;900

or b) for all weights (probably a better choice if you intend to use this everywhere)…

Roboto

You can also see from the Google Fonts interface how to use those fonts.

.roboto-light {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.roboto-black {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: normal;
}

So if you want to set Roboto as the primary and secondary font you can override the root variables like so…

:root {
    --font-1: "Roboto", sans-serif;
    --font-2: var(--font-1);
}

**The font weights are defined elsewhere in the stylesheet.

Unsolicted advice

One takeaway here is that to use this feature you should first fully understand how CSS works and then understand how remote fonts are typically loaded in by third parties (like Google, Adobe, etc). It’s not exactly something you can intuit and is mainly made available here for advanced users with design experience. I’m happy to provide support but I would also strongly recommend that you do your own research, study up on the relevant skills (in this case CSS), and experiment with your own solutions. For example, you may find it very useful to have another project where you start by writing a basic HTML page from scratch. You can learn almost all the basics by creating just one single document with HTML, CSS, JavaScript, etc. It’s much easier than trying to reverse engineer those skills by editing an existing (and relatively very complicated) design.