How do I use Google Fonts in Aspen?

[HeatherEve]

Hi! I would like to use the Google Font called Assistant for the entire website that I am creating using the Aspen theme. I am having a difficult time getting it to show on my pages. I want it to be the only font (in different styles such as light, medium, etc.) throughout the site, including the page title, menu, text, etc. but despite my entering the code into the` and the CSS code into the CSS areas respectfully in the HTML code section of the inspector, it is not working.

Please help- it’s driving me mad! Is there a stack that I need to make this work? ( I already tried FontStack and it does not seem to be working.)

Thank you all so much for your help.

[teefers (Doug Bennett)]

without a URL to at least a test page, and maybe some screenshots of what code you have put where, it’s going to be hard for people to help you out.

[HeatherEve]

Ok. This is the Google font I am trying to use on the entire website: Assistant - Google Fonts

I do not have a test page published yet, but here is the code and where I put it.

[joeworkman]

My Font Pro stacks allow you to load Google fonts into any theme.

Font Pro add-on for Stacks Pro

[teefers (Doug Bennett)]

Okay,
Your css needs to have selectors. You have to tell the browser when you want to use the font.

Even with any of the font stacks you still need to specify when you want the new font-family to get applied.

So for example if you want to apply the font to all headings you would do something like this.

h1,h2,h3,h4,h5,h6 {
  font-family:  'Assistant', sans-serif;
}

Now the trick part is something call CSS Specificity. It’s the rules browsers use to apply CSS to an element that has multiple Styles applied to it.

For example you could have the CSS above, but have an h3 element also have a class or id that sets the font to some other font family.

There is no change in every font family option for every element on the page.

That’s why it’s hard to give you exactly what you want without a URL to at minimum a page.

Since you indicated that you want this for every font on the page you could try something like this

html {
  font-family:  'Assistant', sans-serif!important;
}

[HeatherEve]

Ok I will try that. I cannot publish a sample page, as I am doing a total redesign of an older website and I fear that I would overwrite the existing page by doing so, leaving the individual with no website until I completed the design.

Do I post the html { font-family: 'Assistant', sans-serif!important; } in the CSS field in the Inspector?

[teefers (Doug Bennett)]

That’s CSS, so you can place it in the sitewide CSS area(if you want it on every page ) or the page inspector CSS area.

@HeatherEve

I cannot publish a sample page, as I am doing a total redesign of an older website and I fear that I would overwrite the existing page by doing so

Something you can easily do, with either a separate test domain name or a subdomain.
It comes in handy to be able to publish test sites or pages before going live with any website. It gives you the ability to allow the clients and such to have access and approval before launching any changes. Especially if you are doing major redesigns.

[HeatherEve]

I tried to put it in the sitewide CSS, but the page titles are not showing the font change

[teefers (Doug Bennett)]

Without a URL to at least a test page I’d only be guessing as to why it isn’t working.

It could be a syntax or typing error, or something else that is theme-dependent that might require the selector to change.

Did you check developer tools to see if the fonts loaded?

[santerineross (john santerineross)]

Will your Font Pro Stack allow me to change the font of the 'TITLE PAGE" in Aspen theme to a google font of my choice?
thank you

[joeworkman]

Font Pro can target any text on the page. I am not sure what the title page is but if it’s in the page contents, we can customize it.

[HeatherEve]

Hi! Will the Font Pro Stack let me change the way the title page displays? This is the most important font for me to control. I would like to control all fonts, but this is the most prominent and therefor the most critical.
Thank you so much! (Pix attached)

[teefers (Doug Bennett)]

I don’t have the aspen theme, but looking at the demo page, the selector for the title area should look like this:

.site_title, .aspen-header {
   font-family:  'Assistant', sans-serif;
}

If you wnated to change more on the page

main.theme, footer.theme, aside.theme, main.theme h1, main.theme h2, main.theme h3, main.theme h4, main.theme h5, main.theme h6, aside.theme h1, aside.theme h2, aside.theme h3, aside.theme h4, aside.theme h5, aside.theme h6 {
  font-family:  'Assistant', sans-serif;
}

And something like this added to the head:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Assistant:wght@400;600;700&display=swap" rel="stylesheet">

[joeworkman]

Got a URL to that page?

[HeatherEve]

Ok @joeworkman - i used one of my own domains so you could see it! Here it is: http://www.gothsforgoats.com/

[HeatherEve]

I published it to one of my own domains that was waiting for me … here is the project that I am struggling with the font for the title font: http://www.gothsforgoats.com/

[teefers (Doug Bennett)]

Heather(@HeatherEve),
I don’t see any of the code you to laod the font you show pasted above.

Try this on that page.

Since you want this for the entire site I would put it in the site wide code section:

Heres the code:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Assistant:wght@400;600;700&display=swap" rel="stylesheet">

Then add the follow to the CSS site wide area:

Hear is the code:

/* CSS for header title fonts */
.site_title, .aspen-header {
   font-family:  'Assistant', sans-serif;
}
/* CSS for Other fonts */
main.theme, footer.theme, aside.theme, main.theme h1, main.theme h2, main.theme h3, main.theme h4, main.theme h5, main.theme h6, aside.theme h1, aside.theme h2, aside.theme h3, aside.theme h4, aside.theme h5, aside.theme h6 {
  font-family:  'Assistant', sans-serif;
}

[joeworkman]

Here are the settings to do it in Font Pro.

[HeatherEve]

YAY! Thank you!