Archived topic

Problem with Google Fonts

9 replies · Started by Samuel on March 30, 2021

Viewing posts 1–10 of 10

March 30, 2021 at 5:24 am #1715140

I followed the your instructions to save the Google Font to my server. But I have the feeling that the font is not loaded properly. I have cleared the cache and am viewing the page in incognito mode.

Also, how do I deal with this if I want to use my Local Font with GB Pro?
Block: https://www.screencast.com/t/tZMqVzJttLXK

March 30, 2021 at 3:30 pm #1715947

Hi there,

Can you tell us what font are you trying to use?

Also, can you tell us how you've added it to your server?

So we could check if it's properly loading and is actually included on the page source. Thank you.

April 1, 2021 at 10:58 am #1718281

Hi Elvin,

i use this setup:

function.php

/**
 * Activate Fonts
 */
add_filter( 'generate_typography_default_fonts', function( $fonts ) {
    $fonts[] = 'Source Sans Pro';
	$fonts[] = 'Merriweather';

    return $fonts;
} );

css

/* Fonts */
/* source-sans-pro-italic - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 400;
  src: url('https://baubeaver.de/wp-content/themes/generatepress_child/fonts/source-sans-pro-v14-latin-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('https://baubeaver.de/wp-content/themes/generatepress_child/fonts/source-sans-pro-v14-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://baubeaver.de/wp-content/themes/generatepress_child/fonts/source-sans-pro-v14-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://baubeaver.de/wp-content/themes/generatepress_child/fonts/source-sans-pro-v14-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('https://baubeaver.de/wp-content/themes/generatepress_child/fonts/source-sans-pro-v14-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://baubeaver.de/wp-content/themes/generatepress_child/fonts/source-sans-pro-v14-latin-italic.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}
/* source-sans-pro-regular - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: url('https://baubeaver.de/wp-content/themes/generatepress_child/fonts/source-sans-pro-v14-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('https://baubeaver.de/wp-content/themes/generatepress_child/fonts/source-sans-pro-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://baubeaver.de/wp-content/themes/generatepress_child/fonts/source-sans-pro-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://baubeaver.de/wp-content/themes/generatepress_child/fonts/source-sans-pro-v14-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('https://baubeaver.de/wp-content/themes/generatepress_child/fonts/source-sans-pro-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://baubeaver.de/wp-content/themes/generatepress_child/fonts/source-sans-pro-v14-latin-regular.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}
/* source-sans-pro-700 - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 700;
  src: url('https://baubeaver.de/wp-content/themes/generatepress_child/fonts/source-sans-pro-v14-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('https://baubeaver.de/wp-content/themes/generatepress_child/fonts/source-sans-pro-v14-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://baubeaver.de/wp-content/themes/generatepress_child/fonts/source-sans-pro-v14-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://baubeaver.de/wp-content/themes/generatepress_child/fonts/source-sans-pro-v14-latin-700.woff') format('woff'), /* Modern Browsers */
       url('https://baubeaver.de/wp-content/themes/generatepress_child/fonts/source-sans-pro-v14-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://baubeaver.de/wp-content/themes/generatepress_child/fonts/source-sans-pro-v14-latin-700.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}
/* merriweather-900 - latin */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 900;
  src: url('https://baubeaver.de/wp-content/themes/generatepress_child/fonts/merriweather-v22-latin-900.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('https://baubeaver.de/wp-content/themes/generatepress_child/fonts/merriweather-v22-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://baubeaver.de/wp-content/themes/generatepress_child/fonts/merriweather-v22-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://baubeaver.de/wp-content/themes/generatepress_child/fonts/merriweather-v22-latin-900.woff') format('woff'), /* Modern Browsers */
       url('https://baubeaver.de/wp-content/themes/generatepress_child/fonts/merriweather-v22-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://baubeaver.de/wp-content/themes/generatepress_child/fonts/merriweather-v22-latin-900.svg#Merriweather') format('svg'); /* Legacy iOS */
}

And yes: I have cleared my cache. As you can see in my screenshots, it is partly loaded and sometimes not...

April 1, 2021 at 4:40 pm #1718464

What's the supposed font-family to be used for the "Strange typo" highlighted texts?

I've checked the site and all the fonts you've pointed are using Merriweather as shown here: https://share.getcloudapp.com/rRuGE26v

Is this not the intention?

And yes: I have cleared my cache. As you can see in my screenshots, it is partly loaded and sometimes not…

Can you show us a screenshot of this occurring? Or is this the same thing you've added at the start of the topic?

As for it not loading:
This isn't exactly a theme issue. There are 2 sides to this:

One side is the client/visitor side. If the visitor has an intermittent internet connection, if it disconnects in the middle of a visit's page load, some assets won't load (like the font files).

On the server. If the issue comes and goes, your host must be having technical issues(maintenance,overcapacity, etc).

April 4, 2021 at 7:21 am #1721121

Can you show us a screenshot of this occurring? Or is this the same thing you’ve added at the start of the topic?

Hm.. Now it is working fine. Very strange... If i read it with my ipad, i have the “Strange typo”.

Also, how do I deal with this if I want to use my Local Font with GenerateBlocks Pro?

April 4, 2021 at 3:24 pm #1721415

Also, how do I deal with this if I want to use my Local Font with GenerateBlocks Pro?

Do you mean the live preview while you're editing a post or page?

If so, try Tom's suggestion here:
https://generatepress.com/forums/topic/adding-local-font-to-generateblocks-advanced-typography/#post-1222427

April 8, 2021 at 2:00 am #1725847

Hi Elvin,

thats also interesting, but i mean this: https://www.screencast.com/t/tZMqVzJttLXK

I want to change the font for individual blocks. So in this case - not via the customizer.

April 8, 2021 at 6:39 pm #1727001

Ah I see. You want it on the dropdown. I'm afraid don't have a filter for that yet on GenerateBlocks. It's hard coded here: https://github.com/tomusborne/generateblocks/blob/bd7c9f3690c8e50d109602952a42a1d2417d3528/src/components/typography/google-fonts.js

This has been asked before but Tom's yet to implement one. But he's been made aware. :)

September 2, 2021 at 2:39 am #1916308

Ok then let's close this ticket as well. I'll wait for the new GP update, maybe we'll find a better solution :)

September 2, 2021 at 7:34 pm #1917142

You can check this page from time to time for any GB related updates - https://generateblocks.com/category/development/

This archived topic is closed to new replies.

Start building better websites today.