Printable View
I'm using Google Fonts like Lato Hairline and Roboto Thin. But when these appear in web page previews and published pages the fonts are way too thick.
It seems this is a common problem. Is there a way to correct for this inside Designer Pro?
If this has been resolved before please direct me. Thx.
If the text is HTML text (ie not converted to an image), then the way a font appears is entirely up to the browser, not Designer Pro.
An example of the problem would be good.
Welcome aboard!
Thanks for the comment.
Here is what I am seeing.
In Designer
Attachment 98691
In Chrome (looks the same in all other browsers)
Attachment 98692
On the iPad it's actually worse because it converts the font to Times and also makes it bold.
This is quite frustrating.
I think it would be helpful to have a URL to the webpage, not just a picture.
If the iPad is substituting fonts and you are using Google web fonts, then something appears wrong about the linkage for the fonts.
Unfortunately I don't have the latest Xara software capable of using web fonts out of the box.
Ok. Take a look
http://mattweidnerlaw.com
The really strange behaviour is that I have whatfont (it shows the font details when hovered over text) extension installed in chrome and it cannot identify any of the fonts in the white middle section of your site, the header and footer are fine (arimo in the navigation menu and source sans pro rest).
I'm somewhat confused because your example link doesn't point to web page created by any Xara product - it's a wordpress template.
The font substitution is happening because there doesn't appear to be a style reference for the font that would link it to the Google webfont.
It is specifying a different weight of the same font.
Your site was not created in Xara, according to the page source, so I cannot answer your question.
The center portion of the page was created in Xara Designer and brought in via iframe. The source page produces the same result. http://mattweidnerlaw.com/h/start1.htm
I was not familiar with Whatfont. It appears the "light" or "thin" version of the font is being ignored by Xara in exporting the page.
The browser sees and displays a thicker, more normal version of the font.
The CSS for the Roboto font doesn't include a reference to the google web font, so the iPad can't reference the font.
I suspect you need to do something more in designer - I don't have the latest version to advise you further.
.Thin_Head1 {font-family:'Roboto';font-weight:250;font-size:60px;color:#0463A0;letter-spacing:-0.0em;}
Thank you for looking at this.
It seems there is something missing in the way the page is being saved.
The browser is just displaying the font as usual.
I will have to take up the issue with Xara.
Which Xara software, specifically are you using? It must be the latest one.
Yes, latest one. X9
Version 9.2.1.28737 DL x64
OK, I'll let someone with the same product step up to the plate. It's always a good idea to make a tiny example file for people to experiment with.
Good luck.
I just previewed all weights in both fonts and the thin versions are not displaying properly. http://www.gwpriester.com/font-test/
I recommend using the Light versions which do appear to display correctly. Actually the Roboto Black is not displaying correctly either.
I'll report this to Xara.
Even the light version appears extra thick for that font face. From a design perspective this is a real downer.
Thin fonts, when used in large sizes, help balance the page while still commanding attention.
Xara needs to get this to the top of their list.
I have sent them a heads up. I know that there are issues with some of these fonts. The main issue is they are from Google and they are free and some fonts are better than others. That said, I am not sure why they are not displaying correctly but when I hear back, if Xara does not post here first, I'll pass along what I learn.
Awesome. Thank you.
Just wondering why you have created a wordpress website and then used an iframe linked to a xara created website?
This seems to be a google font problem.
If you download the Roboto family from font squirrel and install to replace the versions downloaded from Google fonts, the problem goes away.
► http://www.fontsquirrel.com/fonts/roboto
Google Fonts install
Attachment 98696
Font Squirrel install
Attachment 98695
Do the fonts still automatically embed? I see you also get the condensed versions.
Still a problem with Lato Hairline though. I downloaded the font from Font Squirrel and replaced the current version and the problem still exists with the Light version. http://www.gwpriester.com/font-test-2/
Yes, but you need to download the @fontface webfont kit from fontsquirrel. To use the fonts in Xara programs you only need the TTF file( but it has to be the web font version from the kit). The font squirrel fonts will also show in the google fonts section in Xara's font list if they are also available on Google fonts. IMO FontSquirell is much better than google fonts for a number of reasons this issue being one of them.
I am looking at my link on my Google Nexus and the fonts appear to have loaded OK. Except the one lite version.
I needed to get a page out quickly and Xara let me do it faster than the wordpress tools.
It's actually a good combination.
See post #11 - the reference in the stylesheet to the Google font is missing.Quote:
Originally Posted by gwpriester
In the Xara font stylesheet xr_fonts.css it shows
.Thin_Head1 {font-family:'Roboto';font-weight:250;font-size:60px;color:#0463A0;letter-spacing:-0.0em;}
with no link to Google
While in the wordpress part we have
@import url(http://fonts.googleapis.com/css?fami...subset=latin);
That's why the font substitutions are happening in the Xara part.
Anyone without the Roboto font on their computer will have the font substituted.
In xr_fonts.css I see the following:
@import url(http://fonts.googleapis.com/css?fami...subset=latin);
In custom_styles.css I see the following:
.Thin_Head1 {font-family:'Roboto';font-weight:250;font-size:60px;color:#0463A0;letter-spacing:-0.0em;}
Seems to me the fonts.css file has the reference to the Google api. Am I reading this wrong?
My bad, then - I missed xr_fonts.css .