Google Fonts

All WYSIWYG Web Builder support issues that are not covered in the forums below.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
Post Reply
User avatar
crispy68
 
 
Posts: 253
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Google Fonts

Post by crispy68 » Wed Dec 06, 2017 2:18 am

I'm curious if anyone has experience with this and has a solution.

I have an issue with a particular font and not sure if this is something I can control within WB some way or if I will have to revert to altering the CSS code after publishing.

I'm using a common Google font 'Lato'. In WB, I'm using the option 'use Google fonts for non web-safe fonts'. For most of the font weights (normal, light, bold), WB generates the correct code. For example, the Lato bold option is:

Code: Select all

<link href="https://fonts.googleapis.com/css?family=Lato:700" rel="stylesheet"> 
Where '700' is correct for the Bold font.

However, a step above Bold is Lato Black which is 900. For some reason, WB is not generating the above code with a 900. Instead it generates:

Code: Select all

<link href="https://fonts.googleapis.com/css?family=Lato+Black" rel="stylesheet">


and it should be:

Code: Select all

<link href="https://fonts.googleapis.com/css?family=Lato:900" rel="stylesheet">
Is there a simple way in WB to tell it to generate this code? In other words Lato+Black = Lato:900? I had looked at the Google fonts configuration section but couldn't get anything to work.

Any help is appreciated.

User avatar
Pablo
 
Posts: 19667
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Google Fonts

Post by Pablo » Wed Dec 06, 2017 6:59 am

The reason why this does not work is because there is no way for WWB to know that 'Lato Black' actually means 'Lato:900'
Normally the font should be named 'Lato Heavy', where 'Heavy' will be replaced by '900'

Thin -> 100
ExtraLight -> 200
Light -> 300
Medium -> 500
SemiBold -> 600
Bold -> 700
ExtraBold -> 800
Heavy -> 900

User avatar
crispy68
 
 
Posts: 253
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Google Fonts

Post by crispy68 » Thu Dec 07, 2017 2:53 am

Hey Pablo,

The font on Google is using the term Black (rather than Heavy). Many of the very common fonts (Montserrat, Roboto, Lato, Oswald, Raleway, the list goes on...) are using Black. Is there anyway in WB to associate: Roboto Black, Lato Black Oswald Black, etc. to a font weight of 900 like the term Heavy does? I'm not seeing any fonts on Google Fonts that uses anything similar Lato Heavy.

User avatar
Pablo
 
Posts: 19667
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Google Fonts

Post by Pablo » Thu Dec 07, 2017 7:11 am

I will add support for 'Black' in a future update.

User avatar
Bluesman
 
 
Posts: 371
Joined: Mon Feb 01, 2016 5:43 pm
Location: Ecuador
Contact:

Re: Google Fonts

Post by Bluesman » Thu Dec 07, 2017 8:57 am

I had a similar problem but with "@font-face fonts" My workarround was simply rename the fonts with a font creating tool as:
https://fontforge.github.io/en-US/
"Make My Day"

See my Website

User avatar
crispy68
 
 
Posts: 253
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Google Fonts

Post by crispy68 » Thu Dec 07, 2017 11:33 pm

Bluesman,

Thanks, I will look into that until Pablo can make the update.

User avatar
crispy68
 
 
Posts: 253
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Google Fonts

Post by crispy68 » Fri Dec 08, 2017 1:45 am

Hey Pablo,

Another thing to look at is the font-weight is being dropped for 'regular' text in styles in the style manager(global) for the Google fonts.

I did a simple test where I changed the H1 style to Open Sans (regular = font weight 400). I then added a text object and set the font and size in the text object exactly the same. When previewed, you get this:

Image

The top text is the H1 which does not look like the one below via the text object. When the stylesheets are generated, 'font-weight:normal' is being added to css in the actual page CSS (index) but in the global stylesheet the font-weight is missing.

The way the text looks in the bottom example is the way it looks within WB during design as well.

User avatar
Pablo
 
Posts: 19667
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Google Fonts

Post by Pablo » Fri Dec 08, 2017 7:09 am

This is behavior by design.
When using Google Fonts, the font weight is part of the font itself. So in the style it should be set to none (empty)

Post Reply

Who is online

Users browsing this forum: Bing [Bot] and 8 guests