Jump to content
You must now use your email address to sign in [click for more info] ×

Google Font "Quicksand" is not displayed correctly


Recommended Posts

Hello everybody!

I couldn't find a similar problem on this forum, so I started this thread. 

I am currently working on a project which relies on Google Fonts, and I am using the "Quicksand" font, but for some reason it has got some issues (holes) and I have to patch them by hand every time I am using that font. That problem does not occur on all other Adobe products or in Office, it is very unique to the Affinity suite. 

Does anyone know what that could be?

If you look at that screenshot; the letter "A" has got those issues. 

 

Screenshot 2020-05-20 at 22.00.45.png

Link to comment
Share on other sites

Is your text still in text or has it been converted to curves?  If it hasn't been converted then I'm surprised you would see that.  But if it has been converted try changing the Layer>Fill Mode to non-zero.  If it hasn't I have no idea.

I just downloaded quicksand and did find that the issue only exists if the letters are converted to curves.  The Fill mode does cure the issue.

iMac (27-inch, Late 2009) with macOS Sierra

Link to comment
Share on other sites

The text is still a text and has not been converted to paths. 

I did eventually change it to paths to patch it up... I have never came across such a problem... Affinity Photo does the same with that particular font.

Link to comment
Share on other sites

8 hours ago, GRSJeremy said:

the letter "A" has got those issues. 

This sometime happens when some of the contours for a particular glyph do not go the correct direction,
and when they overlap there is a cutout.
Seems to be the case here.

This is Quicksand-Bold from Google Fonts (the one  you have):

Quicksand-Bold-from-GoogleFonts.png.01654f223cab701b59c6d557d65b08a8.png

Usually when the font is exported those overlaps are removed.

Below is the Quicksand-Bold from GitHub:

Quicksand-Bold-from-GitHub.png.3c4ad54f47c7bc5a9536b54643e76d04.png

It does not have those overlaps.
I expect that this font will solve your issues.
Download here: https://github.com/andrew-paglinawan/QuicksandFamily/tree/master/fonts/statics
Those are v3 but do not have the SemiBold.
There are also some older OTF versions (v1) available out there which do not have this overlap issue.

Note: after posting this I realized you are probably using a different weight than Bold,
but all the fonts have the same issue.

If you still have an issue, or those fonts are missing some feature, the fonts from Google Fonts
could probably be re-exported after some corrections and some different export settings.

It is interesting that other applications can work around these font issues.
The Affinity folks may want to look at that.

 

Link to comment
Share on other sites

2 hours ago, Sean P said:

I've downloaded the current ones from Google from the link below and they're v3.004 which are all fine.

It is my understanding that this issue can arise in vector documents where the fonts are on or in another vector object.
Or halfway on/over another object.
I had it demonstrated to me by someone who knows a lot more about fonts than I do.
But he did not respond to my request about exactly how to demonstrate it.
I just saw the image (which looked similar to this issue).
It was solved by fixing the fonts.
I just checked the fonts again - wrong directions on contours and overlaps which should not be there.

On 5/20/2020 at 2:04 PM, GRSJeremy said:

If you look at that screenshot; the letter "A" has got those issues. 

Could you please provide the document you used to make your original screenshot?
Or a just a sample page which shows the issue?

Link to comment
Share on other sites

  • 1 month later...
On 5/26/2020 at 9:38 AM, Sean P said:

Hi GRSJeremy,

Would you mind attaching a copy of the Quicksand versions you are using please? I've downloaded the current ones from Google from the link below and they're v3.004 which are all fine.
https://fonts.google.com/specimen/Quicksand

Sorry for the lat response, but I have had some stuff going on in life with the current Virus situation. I am back working now. The files I have attached are the ones causing the issue. 

Quicksand-SemiBold.ttf Quicksand-Medium.ttf

Link to comment
Share on other sites

This is what I see using the Mac OS's Quicklook feature with the font.

206967391_ScreenShot2020-07-18at7_47_59AM.png.16b9cc5f8bc46afb8b193a29b9b30c97.png

So I am guessing the font is 'bad'.

Mac Pro (Late 2013) Mac OS 12.7.4 
Affinity Designer 2.4.1 | Affinity Photo 2.4.1 | Affinity Publisher 2.4.1 | Beta versions as they appear.

I have never mastered color management, period, so I cannot help with that.

Link to comment
Share on other sites

The files you attached Jeremy are indeed corrupt/faulty.
However I just downloaded v3.004 from the link Sean P provided earlier in this thread and they all work fine.
It might be worth ditching the Quicksand family you currently have and then just reinstalling them from Google.

macOS 10.15.7  15" Macbook Pro, 2017  |  4 Core i7 3.1GHz CPU  |  Radeon Pro 555 2GB GPU + Integrated Intel HD Graphics 630 1.536GB  |  16GB RAM  |  Wacom Intuos4 M

Link to comment
Share on other sites

13 hours ago, markw said:

The files you attached Jeremy are indeed corrupt/faulty.
However I just downloaded v3.004 from the link Sean P provided earlier in this thread and they all work fine.
It might be worth ditching the Quicksand family you currently have and then just reinstalling them from Google.

Could you please post the fonts you downloaded?
I have download the fonts three times now - May 20, May 26, and now July 18, 2020.
I get fonts with the same issue every time.

There is another user who reported the same issue in the GitHub Issue tracker (no app mentioned).
Error in the font Quicksand #19 - https://github.com/andrew-paglinawan/QuicksandFamily/issues/19
If you look at his screenshot it has the same cutouts on the capital A ... and on many other characters.
This was apparently a proof from the printer/service bureau.

example

 

So if these fonts do work for some people, it appears something else is at work here.
Appears to be an issue with some of both Mac and Windows users, which appears to show it is not OS-specific.

@GRSJeremy
If you are still having issues I can probably fix the fonts by re-exporting with "Remove overlaps" enabled.

 

Link to comment
Share on other sites

14 hours ago, GRSJeremy said:

I have attached the Photo File which has that problem. Designer gives me exactly the same issue as well. 

My understanding is now that those fonts are just not well made...

Lockdown.afphoto 33.4 MB · 3 downloads

More confusion ... this looks fine to me.
I do not see any issue with the font.
Changed it from Regular to Bold.
Does this document show the issue for you?
If yes, please post a screenshot.

But this file does not have the font text sitting on top of another vector object.
Your first post also appears to have the text on top of another vector object.
That also does appear to be the case in the other example image above from the GitHub Issue tracker.
So both of these images appear to show the possible issue I discussed above.
This text on top of an image is not the same thing, so may not be a good example/test.

Link to comment
Share on other sites

5 hours ago, LibreTraining said:

Could you please post the fonts you downloaded?
I have download the fonts three times now - May 20, May 26, and now July 18, 2020.
I get fonts with the same issue every time.

The above and then this, seem to contradict each other;

 

4 hours ago, LibreTraining said:

More confusion ... this looks fine to me.
I do not see any issue with the font.
Changed it from Regular to Bold.

This seems to be an issue with the fonts obtained from GitHub.
How the “Lockdown” sample file Jeremy posted, or any other file containing Quicksand font, displays will depend on which fonts you have installed on your system.
Where are you obtaining your Quicksand font from? Google or GitHub?
This is the Google Fonts link Sean P posted earlier in this thread to the Quicksand fonts that works correctly for me: https://fonts.google.com/specimen/Quicksand

macOS 10.15.7  15" Macbook Pro, 2017  |  4 Core i7 3.1GHz CPU  |  Radeon Pro 555 2GB GPU + Integrated Intel HD Graphics 630 1.536GB  |  16GB RAM  |  Wacom Intuos4 M

Link to comment
Share on other sites

The Github project seems to prepare Quicksand as a variable font. It contains static fonts that obviously serve as masters for the production of the variable font as well as a first version of the variable font with a weight axis. In variable fonts, overlaps and loops as we can see them in the Github repository are allowed. This might be the reason why the static fonts are set up as they are.

The solution is what Sean and markw already suggested, namely to use the version from Google Fonts. :) 

Quicksand-Weight-Axis.png.06a87a0ecf0100e55199c69fb6dd8c1d.png

Link to comment
Share on other sites

No, Mike. These are surely not acceptable. 😀

Variable fonts generally make use of overlapping contours because it helps the interpolation. In a variable font, you will usually create an overlap when a diagonal (or curve) is intersected by a stem (for instance, the crossbar of the A in your example), such that you will get a smooth interpolation of the diagonal (curve). In non-variable fonts, overlaps are generally removed in the font production process, not least for the reason that fonts with overlapping glyphs will generally require to store a larger number of nodes in the font file.

But of course, when you have overlapping contours in a font, the rasterizer has to use the correct fill algorithm. Instead of an even-odd-fill algorithm, a non-zero-fill algorithm has to be used. Otherwise you’ll get a void like in your example. That void indicates that the rasterizer does not parse the font correctly, for one reason or another. I haven’t checked the Quicksand fonts in that respect.

But to give another example, Apple recently decided to ship their system font (SF Pro) as a variable font (see below). When you load this font in Affinity Designer, the predefined instances (styles) can all be used and are rendered correctly. Now, when you convert the uppercase A of this font to curves, you’ll see again that it has overlaps. So Affinity Designer correctly uses the non-zero-fill rule to display the glyph in the running text, but when you convert to curves and switch to the even-odd-fill algorithm, you’ll get the same picture as in your example.

SF-Pro.png.7750364676b21406fb2616e43af58190.png

Link to comment
Share on other sites

I’m sorry to have caused you confusion, Mike. Variable fonts are still rather new to everyone. While I must confess I was rather sceptical about the new approach in the beginning, I’m starting to get intrigued by the possibilities it has to offer.

Stay safe! All the best, Alex :) 

Link to comment
Share on other sites

  • 2 weeks later...
  • 6 months later...

I just checked back in here to see how the thread is doing!

I did not convert the font to paths, but that has been discussed anyways. 

I resolved the issue with the Github font, I have not tried the latest google font now as it gave me so much grief last year... 

I am intrigued to try it again with the Google version now and see if it has been fixed...

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.