woff2 rendering wrong characters when copied richtext

[andrewfield04]

Describe the bug

• The woff2 file renders in browser. The issue is when you try to copy and paste from rendered text in the browser into any rich text editor it pastes as question mark symbols.
• It only pastes right when you paste and match style. Other websites with other fonts don’t do this.

To Reproduce
Steps to reproduce the behavior:

1. Try it on the Inter site in Chrome—same thing happens with the woff2 file in our projects
2. Paste into TextEdit
3. See the question marks like this: ⍰⍰⍰⍰⍰⍰⍰⍰⍰⍰⍰⍰
4. I notice this doesn’t happen in Safari.

Expected behavior
The expected behavior is the fonts copy out and show as regular text in a rich text editor like TextEdit

Screenshots

Environment

• OS: [e.g. macOS 15 Sequoia]
• App that renders the font: Chrome
• Version of font: 4.001;git-9221beed3

Thank you 😊😅

[kenmcd]

The "wrong characters" you pasted above are
U+2370 : APL FUNCTIONAL SYMBOL QUAD QUESTION
which does not appear in many fonts.
On my Windows 10 system I am actually seeing a system fallback which is being mapped to the Segoe UI Symbol font (which actually has that character).
In your image above it looks like your macOS system is displaying a symbol from their LastResort.otf font.

What is on the page from the font is fine - we can see it.
I can copy-and-paste from Vivaldi (chromium) and Firefox to LibreOffice, Word, Affinity Publisher, text editors, etc. without any issues.
So it appears the issue is happening when the text is being copied on your system.
Not when it is being pasted (or both browsers would be an issue).
Check what is actually ending-up on the clipboard from Chrome.
If that character is there, the issue is in the Chrome app copy procedure.

Other ideas...
Could be conflicts if you have multiple versions of Inter installed.
Only have the variable from this repo installed.
As that one is the same as the woff2 font.

Or try without any Inter fonts installed at all.
This should not make a difference, but this issue is just odd.

Another wild guess...
Could be how it is embedded in the web page is an issue in Chrome.
Should not be a problem, but try making changes.

Many, many people use this font on the web - without issues.
So it appears there is something in your particular case which is the problem.

[andrewfield04]

@kenmcd

U+2370 : APL FUNCTIONAL SYMBOL QUAD QUESTION

The characters I used to explain the problem ⍰⍰⍰⍰⍰⍰ are not the same as the square question marks that get pasted. They look close so I found them in character viewer for explaining.

What is on the page from the font is fine - we can see it.

I know that text is rendering ok which is not the issue because the issue is that it copies wrong.

Check what is actually ending-up on the clipboard from Chrome. If that character is there, the issue is in the Chrome app copy procedure.

It happens in Chrome and Brave but not Safari. I can’t check what characters get copied because all I can do is paste or paste and match style

Other ideas... Could be conflicts if you have multiple versions of Inter installed. Only have the variable from this repo installed.

I do have the same repo’s variable ttf installed on system, and I have the repo’s woff being served in the local server. When I disable the ttf in Font Book it makes all copy pastes work properly with correct characters. That means it has something to do with the font files.

[kenmcd]

The characters I used to explain the problem ⍰⍰⍰⍰⍰⍰ are not the same as the square question marks that get pasted. They look close so I found them in character viewer for explaining.

What you see there, and what you see here, and what I see here and locally - depends on the fallback font in each case. Which is going to be different. That particular character looks different in the different fallback fonts on different OSs.

The actual characters pasted into the application would helpful.
The character codes behind those characters would give some clues.
If it is just random junk, that could be font cache corruption.
If it has a specific order to it, that could be an encoding issue.

Copy the The Inter typeface family text and let's see what is there on the clipboard, and then what is there after it is pasted.

I know that text is rendering ok which is not the issue because the issue is that it copies wrong.

Which is why it would be helpful to see what is on the clipboard.
In the Affinity forums the staff and other users recommend for macOS:
https://langui.net/clipboard-viewer/
A free app very similar to the free one I use on Windows.

It happens in Chrome and Brave but not Safari. I can’t check what characters get copied because all I can do is paste or paste and match style

Different browsers, and applications, put different things on the clipboard.
When troubleshooting it is helpful to see what is there.
On my Win10 I can see the differences between what Vivaldi (chromium) and FireFox put on the clipboard, and how that affects what happens when it is pasted into different applications.

I do have the same repo’s variable ttf installed on system, and I have the repo’s woff being served in the local server. When I disable the ttf in Font Book it makes all copy pastes work properly with correct characters. That means it has something to do with the font files.

The .ttf and the .woff2 files are the exact same font.
Disabling the .ttf file and having the problem go away may point to font cache corruption. So clear you font cache.

The only Inter fonts you should have installed is:
InterVariable.ttf and
InterVariable-Italic.ttf
Anything else may cause conflicts.

[andrewfield04]

Thanks @kenmcd for all your help

This is what's coming out of the clipboard viewer for the Inter site on Chrome:

<meta charset="utf-8"><h1 class="title" style="scroll-padding-top: var(--header-height); margin: 4rem 0px 0.4em calc(-0.157895rem); padding: 0px; font-weight: 600; font-size: calc(12.5vw); letter-spacing: -0.03em; line-height: 1; color: rgb(0, 0, 0); font-family: InterVariable, sans-serif; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">The Inter typeface family</h1>

Brave:

<meta charset="utf-8"><r-cell span="row" style="scroll-padding-top: var(--header-height); display: block; appearance: none; grid-column: 1 / -1; color: rgb(0, 0, 0); font-family: InterVariable, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><h1 class="title" style="scroll-padding-top: var(--header-height); margin: 4rem 0px 0.4em calc(-0.157895rem); padding: 0px; font-weight: 600; font-size: calc(12.5vw); letter-spacing: -0.03em; line-height: 1; color: var(--foreground-color-bright);">The Inter typeface family</h1></r-cell><br class="Apple-interchange-newline">

Safari:

<r-cell span="row" style="scroll-padding-top: var(--header-height); display: block; appearance: none; grid-column-end: -1; grid-column-start: 1; caret-color: rgb(0, 0, 0); color: rgb(0, 0, 0); font-family: InterVariable, sans-serif; font-size: 16.551723px; font-style: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;"><h1 class="title" style="scroll-padding-top: var(--header-height); margin: 4rem 0px 0.4em calc(-0.157895rem); padding: 0px; font-weight: 600; font-size: calc(12.5vw); letter-spacing: -0.03em; line-height: 1; color: var(--foreground-color-bright);">The Inter typeface family</h1></r-cell><br class="Apple-interchange-newline">

The .ttf and the .woff2 files are the exact same font. Disabling the .ttf file and having the problem go away may point to font cache corruption. So clear you font cache. The only Inter fonts you should have installed is: InterVariable.ttf and InterVariable-Italic.ttf. Anything else may cause conflicts.

I removed all other Inter fonts I had installed, and restarted my computer, but nothing changed after that. I tried to clear my font cache with this method but it doesn’t appear to work in the latest version of macOS. Any other ideas?

[kenmcd]

OK. I think I see what is happening...
Looks like the issue is the font name in the clipboard is not being connected to the font.
InterVariable does not match the family name used in applications.
Family Name (nameID 1) is Inter Variable.
And the font-family: name on the clipboard is InterVariable, sans-serif which is what shows up in LibreOffice which causes a fallback font to be used.
Affinity Publisher just pastes it as Unicode text (no options).

• It only pastes right when you paste and match style. Other websites with other fonts don’t do this.

Have you had success with other variable fonts pasting the formatted text?
What websites have worked to paste rich text?

I do not see how this could ever work reliably.
To even keep just the correct font would be difficult.
And then it may only work with static fonts.

It would be interesting to see if InDesign can paste the correct font.
The NameID 25, which is used by ID, is InterVariable.
So it may be able to parse the name out of the pasted stuff.

Anyway, I think you just need to paste plain text.

[andrewfield04]

@kenmcd Roboto Flex does the same issue here, but so many variable fonts on that page show no problems.

Why can the font designer not just change the CSS defining name so it's the same one used in applications?