Additional Google Font not displayed - Support | Kriesi.at

Tagged: CSS, enfold, google fonts

Viewing 17 posts - 1 through 17 (of 17 total)

Author

Posts
February 2, 2017 at 5:40 pm #741926
twaelde
Participant
Hi

I´m wondering if I can add “Source Sans Pro” to my child theme. I´ve added some code to the functions.php in the child-theme:
```
add_filter( 'avf_google_heading_font', 'avia_add_heading_font');
function avia_add_heading_font($fonts)
{
$fonts['Source Sans Pro Extra Bold'] = 'Source Sans Pro:900&subset=latin,latin-ext';
$fonts['Source Sans Pro Bold'] = 'Source Sans Pro:700&subset=latin,latin-ext';
return $fonts;
}

add_filter( 'avf_google_content_font',  'avia_add_content_font');
function avia_add_content_font($fonts)
{
$fonts['Source Sans Pro Light'] = 'Source Sans Pro:300&subset=latin,latin-ext';
return $fonts;
}
```
Now, I have the option to select the Font in the “General Styling” Section. But on my mobile device (iphone 6s, Safari) or on another Computer (Safari, Firefox, Chrome) the text is displayed in the Helvetica Neue or Arial Font.

When I´m going back to the Template Option Panel, General Styling, then the dropdown is on the default value.

My WordPress is running on V. 4.7.2, the Theme is V. 3.8.4.

Thanks in advance.
February 3, 2017 at 4:53 pm #742466
twaelde
Participant
I looked in the Javascript Console in Chrome and there´s a error, corresponding to the Google Font:
```
https://fonts.googleapis.com/css?family=Source+Sans+Pro:700&subset=latin-ext%7CSource+Sans+Pro:300&subset=latin-ext

Failed to load resource: the server responded with a status of 400 ()
```
The correct URL must be, I think it´s the “&amp” Code in the URL, which is not correct translated.

https://fonts.googleapis.com/css?family=Source+Sans+Pro:700&subset=latin-ext

Any Idea?
February 4, 2017 at 5:53 am #742653

Rikard
Keymaster

Hi,

I’m not seeing that error message on my end and your site seems to be displaying the font you mentioned, did you manage to get it working?

Best regards,
Rikard

February 5, 2017 at 8:13 pm #743050

twaelde
Participant

No, sorry. The Font is not shown in the frontend. Instead, there’s Helvetica displayed.

February 6, 2017 at 6:58 am #743172

Rikard
Keymaster

Hi,

Not on my end, the only font being displayed is Source Sans Pro. Please try clearing your browser cache and reload a few times or try loading the site in an incognito window.

Best regards,
Rikard

February 6, 2017 at 9:09 am #743215

twaelde
Participant

Really? I already tried several Browsers in Incognito Mode and different clients like Osx, Windows, IOS.

The Font is only displayed correctly if you are using Chrome and you’ve the font Source Sans Pro locally installed.

February 10, 2017 at 9:52 am #745293

Ismael
Moderator

Hi!

Did you disable the font? It’s not loaded in the frontend when I checked on Chrome and Firefox, Windows 7. Please post the login details here so that we can check the issue further.

Best regards,
Ismael

February 10, 2017 at 4:45 pm #745488

twaelde
Participant

Hi,

Yes, I disabled the Source Sans Pro. Now it´s SSP again. Here are the login credentials…

Thanks!

February 11, 2017 at 8:05 am #745708

Ismael
Moderator

Hi!

Thank you for the update.

We modified the code in the functions.php file. The correct font source is loading now.

// https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700&subset=latin-ext

Best regards,
Ismael

February 13, 2017 at 11:08 am #746301

twaelde
Participant

Hi Ismael,

Thanks for that. Unfortunatelly, I think it still doesn´t work. Even if I have the SourceSans Pro selected in the General Styling Section, it won´t show up in the front- or Backend, either in Chrome or in Safari and Firefox. Any idea?

February 15, 2017 at 6:33 am #747288

Ismael
Moderator

Hey!

Did you check the frontend? It might not be working in the preview but it’s applied in the actual site.

Cheers!
Ismael

February 15, 2017 at 9:05 pm #747668

twaelde
Participant

Yes, sure… It´s not working in the frontend…

February 16, 2017 at 8:59 am #747844
Ismael
Moderator
Hey!

It’s not working because the stylesheets were minified. We disabled the minify settings temporarily and we had to add the following css code in the style.css file.
```
body p, p {
    font-family: 'Source Sans Pro', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 300;
}
```
Please remove or purge all cache before checking the page.

Cheers!
Ismael
February 16, 2017 at 11:26 am #747907

twaelde
Participant

Ah, perfect. Thanks!

Is it in general not possible to activate the stylesheet minify function?

Thanks again and cheers!

February 17, 2017 at 8:07 am #748250

Ismael
Moderator

Hey!

Once the files are minified, changes or modifications might not reflect immediately in the frontend. You can activate it once you’re done working with the site.

Cheers!
Ismael

February 17, 2017 at 8:36 am #748266
Guenni007
Participant
i often use the source sans pro – but only latin not latin extended – maybe this is causing the mismatch?

and by the way you don’t need to mention the latin case because it is in the latin-extended version.
so :
```
add_filter( 'avf_google_heading_font', 'avia_add_heading_font');
function avia_add_heading_font($fonts)
{
$fonts['Source Sans Pro Extra Bold'] = 'Source Sans Pro:900&subset=latin,latin-ext';
$fonts['Source Sans Pro Bold'] = 'Source Sans Pro:700&subset=latin-ext';
return $fonts;
}

add_filter( 'avf_google_content_font',  'avia_add_content_font');
function avia_add_content_font($fonts)
{
$fonts['Source Sans Pro Light'] = 'Source Sans Pro:300&subset=latin-ext';
return $fonts;
}
```
February 17, 2017 at 8:47 am #748272

Ismael
Moderator

Hi!

I’m not sure if the subset parameter can cause issues but the font url looks like this at the moment:

// https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700&subset=latin-ext

Regards,
Ismael
Author

Posts

Viewing 17 posts - 1 through 17 (of 17 total)

You must be logged in to reply to this topic.