Return to previous page

What is the way to set self-hosted Google fonts

This topic has 7 replies, 4 voices, and was last updated 11 months, 3 weeks ago ago by Rose Tyler

LWK

Participant

April 18, 2023 at 21:43

Hi,
What is the way to set self-hosted Google fonts and to not use Google API?
Thanks!

#353675 Copied Theme version: 9.1.1

6 Answers

Tony Rodriguez

Support staff

April 19, 2023 at 08:36

Hello @LWK,

To use self-hosted Google fonts, you would need to download the font files and host them on your own server. Here are the steps you can follow:

Find the font you want to use on the Google Fonts website.

Click on the “Select this font” button, and then click on the “Download” button in the top-right corner of the page.

This will download a ZIP file containing the font files you need. Extract the files from the ZIP archive.

Upload the font files to your site from XStore >> Dashboard >> Custom Font

And then you will be able to use that font on your site from XStore >> Theme Options >> Typography options.

Please refer to our theme documentation here: https://xstore.helpscoutdocs.com/article/157-how-to-setup-custom-fonts-with-xstore

Best Regards,
8Theme’s Team

#353713 Copied

LWK

Participant

April 19, 2023 at 11:34

Hi Tony,
Thanks for your reply.
Here, the font family I need to use is Montserrat.
So I downloaded its TTF files from Google website and I started to upload them on XStore.
The problem is: in Typography options, in Standard Fonts, I can only set 1 TTF file (so with 1 specific font weight included), but this is not what I want. Indeed, I need to be able to set the complete family, as it was previously.
What is the way to achieve this?
Thanks!

Screenshot: https://imgur.com/mSa8Lqm

#353761 Copied

Rose Tyler

Support staff

April 19, 2023 at 15:41

Hello @LWK,

It is correct, you need to select via Theme Options what weight will be used for the body and for headings.
Even the font is not local only 1 weight can be selected https://prnt.sc/zDwg6tB2WNUs

Then you will edit the content of pages using Elementor or WPBakery and will be able to select the weight there also.

If you have any additional questions or concerns, please do not hesitate to reach out to us. Our support team is always available to assist you.

Best Regards,
8Theme’s Team

#353843 Copied

WebsiteDude

Participant

April 22, 2023 at 04:56

Hi there, can I get further clarification on this please.

We have different ways to implement fonts locally and as follows. So I would like to know which is optimal? I.e. which is best performing option – or do we need to do this in both methods?

1. Via adding to Xstore itself. In this area https://share.getcloudapp.com/04u6R7wX

2. Via Elementors Custom Font feature as shown (which we currently use) https://share.getcloudapp.com/NQuWB20o

See also attached for how the current font formats are loaded using elementor method https://share.getcloudapp.com/llu7OBGQ – you’ll see we dont not upload all styles e.g. weights – so what happens if when building the site – we choose a weight that is not locally stored? Does this cause issues? This is why I’d like to understand how we can distinguish which wieghts are uploaded as we build pages and make the selection.

So with two methods, which should I focus on? As we are using Elementor for the page builder it seems best to upload fonts in there – but then for the theme options of Xstore, is it better to also have them uploaded in Xstore Custom Fonts? Either way we have no way of understanding if we are actually selecting the locally loaded fonts or not.

Okay so when we do either of these – is it possible to remove all other font references which show in the dropdown selection? as of course as you’ll see in this video – I still have all options available to me and there isn’t anything which clearly shows if a font is local or not? I have also asked in the video what each of the terms mean for the fonts that show – example what CSS Defaults, Standard Fonts means in the dropdown – what are these for?

Hoping you can help clear up the confusion and help me ensure we are making font selections properly when building out our page content with elementor page builder.

Please contact administrator
for this information.

#354142 Copied

Rose Tyler

Support staff

April 24, 2023 at 10:15

Hello, WebsiteDude,

We apologize for the delay in responding.

Thank you for your request, it was added to our task list, developers team will consider and implement it in one of the incoming updates.

You may use the Custom Font feature from the Elementor Pro plugin, but currently, via Theme Options it is really unclear which fond was loaded locally from Elementor Pro settings, but it is a bit more clear for https://prnt.sc/LrzDeFgQpoDf > https://prnt.sc/NLDu098BaK3D (custom font is first under Standard fonts).

“what happens if when building the site – we choose a weight that is not locally stored? Does this cause issues?” – nothings will happen, no issue, no effect of nonexisting weight for the font.

You may read this article about “default browser font-family” → https://granneman.com/webdev/coding/css/fonts-and-formatting/web-browser-font-defaults

Best Regards,
8Theme’s Team

#354343 Copied

Rose Tyler

Support staff

May 18, 2023 at 13:30

Hello, WebsiteDude and LWK,

We hope you are doing well.
Our development team is currently working on a new update that will include a new feature: Google fonts selected in Theme Options will be automatically loaded locally. If you have a test site, we can provide pre-released versions for testing. Please check the Private Content area.

Best Regards,
8Theme’s Team

Please contact administrator
for this information.

#357107 Copied
Tagged: best selling, google fonts, persuasive, self-hosted, themes, woocommerce
Viewing 7 results - 1 through 7 (of 7 total)