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

Color Font is not being displayed in Affinity Designer 2 - Desktop


Recommended Posts

Color fonts are not yet supported.

 

iMac 27" 2019 Somona 14.4.1, iMac 27" Affinity Designer, Photo & Publisher V1 & V2, Adobe, Inkscape, Vectorstyler, Blender, C4D, Sketchup + more... XP-Pen Artist-22E, - iPad Pro 12.9  
B| (Please refrain from licking the screen while using this forum)

Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions

Link to comment
Share on other sites

1 hour ago, firstdefence said:

Color fonts are not yet supported.

Until they are, it seems that the best we can do is export to SVG, view the result in a web browser (or any other app that displays the text correctly) and take a screenshot.

1446723D-C8E4-4B7B-97CE-E1719697D143.jpeg.3fd7468b660a2f8249da0fd973792b09.jpeg

43FA8C4C-215F-42A2-88AA-D98EE1B77F22.jpeg.a1c93bb5990b97ab634f2bc3195a78ec.jpeg

Alfred spacer.png
Affinity Designer/Photo/Publisher 2 for Windows • Windows 10 Home/Pro
Affinity Designer/Photo/Publisher 2 for iPad • iPadOS 17.5.1 (iPad 7th gen)

Link to comment
Share on other sites

Affinity apps do support, at least partially OpenType sbix (bitmap based, basically only on macOS [EDIT: Also works on Windows, but Windows seldom has sbix fonts installed]) and COLR (vector based, both macOS and Windows) OpenType color tables, but not the most common SVG color table (which USA Spirit uses). 

colorfonts_affinity.thumb.png.59e92f1a6a0d4275a890c2ce2bc19f1c.png

Link to comment
Share on other sites

7 minutes ago, Sam S - TO said:

@Alfred Thanks. I did what you suggested, but seems like it's not working when I export SVG and view in Web Browser. It's still monochrome.

I don’t have that font, so I can’t test it here, but my guess is that it’s not an SVG font. I have several colour fonts that I can use as described, but I also have one or two that remain stubbornly monochrome.

Alfred spacer.png
Affinity Designer/Photo/Publisher 2 for Windows • Windows 10 Home/Pro
Affinity Designer/Photo/Publisher 2 for iPad • iPadOS 17.5.1 (iPad 7th gen)

Link to comment
Share on other sites

1 minute ago, Sam S - TO said:

Please could you give me an example of a color font that you got working via the SVG export and open via browser.

Playbox, the font shown in the screenshots that I posted earlier, is one of several free fonts that I have here. Ponche, one of the colour fonts that doesn’t work for me via SVG export, is described on the MyFonts website as being in SVG-TTF format, so it would seem that there’s more to this than meets the eye.

https://www.myfonts.com/collections/ponche-font-sudtipos#aboutThisFont

Alfred spacer.png
Affinity Designer/Photo/Publisher 2 for Windows • Windows 10 Home/Pro
Affinity Designer/Photo/Publisher 2 for iPad • iPadOS 17.5.1 (iPad 7th gen)

Link to comment
Share on other sites

1 hour ago, Sam S - TO said:

@Alfred I just checked one of the fonts I used - https://www.creativefabrica.com/product/patriotic-11/. It says " This product is a color font (Opentype-SVG)"

Please could you give me an example of a color font that you got working via the SVG export and open via browser.

 

 

You can quite easily make a flag font effect in Photo or Designer.

image.png.c87997fc63cd06be7491ecb7e399144d.png

USA Flag Font.afdesign

iMac 27" 2019 Somona 14.4.1, iMac 27" Affinity Designer, Photo & Publisher V1 & V2, Adobe, Inkscape, Vectorstyler, Blender, C4D, Sketchup + more... XP-Pen Artist-22E, - iPad Pro 12.9  
B| (Please refrain from licking the screen while using this forum)

Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions

Link to comment
Share on other sites

@Alfred Thanks for your help so far. Still no luck. I downloaded Playbox, installed it on Windows.

  • I used the font in Affinity Designer --> Monochrome, then downloaded the SVG or WEBP.
  • Opening the files in any web browser, and still I see Monochrome

Is there something I am missing? Is there some sort of settings during export?

AD 2:

image.png.47efea20eeecb6d0d1ed2f57a56a08b8.png

Browser:

image.png.3e046ae4494067b2f98bfa0497416700.png

Link to comment
Share on other sites

2 hours ago, Sam S - TO said:

Is there something I am missing?

It’s probably something I’m missing! It works for me in Firefox, but I was sure I had it working in another browser, too.

P.S. I suggest that you remove the zip attachment from your post. Commercial products really shouldn’t be shared on a public forum.

Alfred spacer.png
Affinity Designer/Photo/Publisher 2 for Windows • Windows 10 Home/Pro
Affinity Designer/Photo/Publisher 2 for iPad • iPadOS 17.5.1 (iPad 7th gen)

Link to comment
Share on other sites

We experimented with using colour fonts with Affinity Designer some time ago.

An Affinity Designer design was prepared in Affinity Designer, the colour font appeared in Monochrome.

One then exported an SVG file from Affinity Designer with the option to convert text to cures turned off.

Thus the Unicode characters are listed in the SVG file, and when the SVG file was displayed using the Microsoft Edge browser, the characters were displayed in colour as the Microsoft Edge browser did the displaying.

Can anyone find the original thread about getting a colour image by this technique please?

However, that was then and this is now and I saw something recently that made me wonder if it will still work.

https://lists.aau.at/pipermail/mpeg-otspec/2024-February/003285.html

But I might have got it wrong.

I need to remember that the term SVG in the context of this thread might be referring to two different things.

One is an SVG file exported from Affinity Designer.

The other is that some fonts internally use SVG to implement the glyph designs within the font.

I hope this helps.

William

 

Until December 2022, using a Lenovo laptop running Windows 10 in England. From January 2023, using an HP laptop running Windows 11 in England.

Link to comment
Share on other sites

38 minutes ago, Alfred said:

It works for me in Firefox, but I was sure I had it working in another browser, too.

 

15 minutes ago, William Overington said:

when the SVG file was displayed using the Microsoft Edge browser, the characters were displayed in colour


I tried it in both Microsoft Edge and Internet Explorer earlier today, and it appeared in monochrome in both. I then tried it in Opera, but that also failed.

Alfred spacer.png
Affinity Designer/Photo/Publisher 2 for Windows • Windows 10 Home/Pro
Affinity Designer/Photo/Publisher 2 for iPad • iPadOS 17.5.1 (iPad 7th gen)

Link to comment
Share on other sites

17 minutes ago, William Overington said:

I need to remember that the term SVG in the context of this thread might be referring to two different things.

One is an SVG file exported from Affinity Designer.

The other is that some fonts internally use SVG to implement the glyph designs within the font.

 

10 hours ago, Alfred said:

Ponche, one of the colour fonts that doesn’t work for me via SVG export, is described on the MyFonts website as being in SVG-TTF format

 

Alfred spacer.png
Affinity Designer/Photo/Publisher 2 for Windows • Windows 10 Home/Pro
Affinity Designer/Photo/Publisher 2 for iPad • iPadOS 17.5.1 (iPad 7th gen)

Link to comment
Share on other sites

Until December 2022, using a Lenovo laptop running Windows 10 in England. From January 2023, using an HP laptop running Windows 11 in England.

Link to comment
Share on other sites

2 hours ago, Sam S - TO said:

@kenmcd Complete newbie. Don't know how to convert. The font files are attached. I got it from here - https://www.creativefabrica.com/product/patriotic-11/

 

Thanks.

Patriotic-71381259 (1).zip 638.18 kB · 2 downloads

Wow. This may actually be convertible to COLR. Most OpenType-SVG fonts just contain images (which cannot be converted), but this appears to have vectors - so it may be possible. We'll see. ;-)

Link to comment
Share on other sites

16 hours ago, Alfred said:

Until they are, it seems that the best we can do is export to SVG, view the result in a web browser (or any other app that displays the text correctly) and take a screenshot.

Yes, I could reproduce this with Firefox (even for EmojiOne and the US Flag font):

image.png.50fd0247db7be826442a108619be0db6.png

On Edge Playbox will be rendered in color but the other two will not, so it clearly depends on the kind of SVG font in question (these three are all SVG color fonts).

When I opened the exported SVG file in VectorStyler (which supports SVG Color OpenTypes at least to certain extent), it rendered Playbox and the flag font in color. I could then convert both to curves and copy paste them to an Affinity app in vector format (below first shown as b/w fallbacks and at the bottom the curve objects from VectorStyler from Clipboard):

image.png.c7615654f8eba3f5400a31979d4299a9.png

PS. All these tests were done with Windows versions.

Link to comment
Share on other sites

Conversion to COLR seems to be working... sort of...

This is Export to PDF from APub and then converted to an image.

PatrioticCOLR-Font-Test_1.thumb.png.afbfb82cf8438ff135e3cb0d8b83c6fc.png

I got some errors on the conversion, and that seems to be related to some of the details (the lines etc.).

Gotta go now - will check it out tomorrow.

Note: bonus side effect is all the SVGs have been dumped to a folder.

Link to comment
Share on other sites

You can also use the font and its b/w fallbacks and type whatever you wish and then export to PDF, and you will get color version of the font exported. 

If you want to have the font converted to outlines (e.g., to be delivered unchanged in vector format for editing to someone not having the font), you can convert font to outlines using Adobe Acrobat Pro or Ghostscript (there are other utilities, too. like above mentioned VectorStyler). 

A PDF with embedded color font can also be placed for passthrough and exported again. Or you can rasterize text containing an embedded color font.

It appears that there are no legal restrictions on this specific font but what is described here are just applied use of the font outcome, so you could do this to any font without violating its copyrights as long as the font allows embedding. [NOTE: I tried PDF export for Playbox and it exported fine as a color font, but Emoji One caused an error, so once again, there are differences in SVG color fonts that determine how it can be used, especially in apps that cannot directly use full capabilities of the font.]

image.png.29f49a3a134cf4ae5d8e189f8d49a35a.png

svgfontaspdf_and_curves.pdf

Link to comment
Share on other sites

If exporting to SVG and PDF displays the font as it should why can't Affinity simply activate this in house, seems bonkers to have a colorfont font that doesn't display as it is and is actually masked out by a text fill, surely it's not that big a leap to get these fonts displayed au naturel instead of hoop jumping yet again.

iMac 27" 2019 Somona 14.4.1, iMac 27" Affinity Designer, Photo & Publisher V1 & V2, Adobe, Inkscape, Vectorstyler, Blender, C4D, Sketchup + more... XP-Pen Artist-22E, - iPad Pro 12.9  
B| (Please refrain from licking the screen while using this forum)

Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions

Link to comment
Share on other sites

I asked at the OpenType mailing list and Mr Peter Constable, a top expert in these matters, kindly answered.

https://lists.aau.at/pipermail/mpeg-otspec/2024-February/003303.html

William

 

Until December 2022, using a Lenovo laptop running Windows 10 in England. From January 2023, using an HP laptop running Windows 11 in England.

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.