Search code examples
cssfontsfont-facerichtextrichtextediting

Explanation of "hardcoded" font on a piece of text, and how to remove it via CSS etc


I'm unable to understand how a piece of text has some kind of hardcoded font in it, that cannot be removed even after pasting into an RTE, application of CSS etc. See 2 examples below copied from various places:

Sample 1 - this font is apparently Cambria Math, and will not / cannot be overridden by CSS when displaying or removed when pasting into an RTE. Eg take this text and dump into CKEditor, QuillJS and any other, it will remain the same. In fact the same is happening right here in this editor - the font is not getting removed, and I'm unable to explain why.

๐ˆ๐ง๐๐ฎ๐ฌ๐ญ๐ซ๐ฒ ๐š๐ง๐š๐ฅ๐ฒ๐ฌ๐ข๐ฌ ๐ข๐ฌ ๐š ๐œ๐ซ๐ฎ๐œ๐ข๐š๐ฅ ๐ฌ๐ญ๐ž๐ฉ ๐ข๐ง ๐ญ๐ก๐ž ๐œ๐ฎ๐ซ๐ซ๐ž๐ง๐ญ ๐œ๐จ๐ฆ๐ฉ๐ž๐ญ๐ข๐ญ๐ข๐ฏ๐ž ๐ฆ๐š๐ซ๐ค๐ž๐ญ ๐ฌ๐ฉ๐š๐œ๐ž ๐ญ๐ก๐š๐ญ ๐ก๐ž๐ฅ๐ฉ๐ฌ ๐ข๐๐ž๐ง๐ญ๐ข๐Ÿ๐ฒ ๐ญ๐ก๐ž ๐ซ๐ข๐ ๐ก๐ญ ๐ญ๐š๐ซ๐ ๐ž๐ญ ๐œ๐ฎ๐ฌ๐ญ๐จ๐ฆ๐ž๐ซ๐ฌ ๐š๐ง๐ ๐š๐œ๐œ๐จ๐ซ๐๐ข๐ง๐ ๐ฅ๐ฒ ๐ฉ๐ซ๐จ๐ฏ๐ข๐๐ž ๐ญ๐š๐ข๐ฅ๐จ๐ซ๐ž๐ ๐ฌ๐จ๐ฅ๐ฎ๐ญ๐ข๐จ๐ง๐ฌ ๐Ÿ๐จ๐ซ ๐ญ๐ก๐ž๐ข๐ซ ๐›๐ฎ๐ฌ๐ข๐ง๐ž๐ฌ๐ฌ ๐ง๐ž๐ž๐๐ฌ. ๐„๐ฏ๐ž๐ซ๐ฒ ๐š๐ฌ๐ฉ๐ž๐œ๐ญ ๐š๐ง๐ ๐ฎ๐ง๐ข๐ช๐ฎ๐ž ๐œ๐ก๐š๐ฅ๐ฅ๐ž๐ง๐ ๐ž๐ฌ ๐ฉ๐ฎ๐ญ ๐ฎ๐ฉ ๐›๐ฒ ๐ญ๐ก๐ž ๐ฉ๐š๐ซ๐ญ๐ข๐œ๐ฎ๐ฅ๐š๐ซ ๐ข๐ง๐๐ฎ๐ฌ๐ญ๐ซ๐ฒ ๐š๐ซ๐ž ๐œ๐š๐ซ๐ž๐Ÿ๐ฎ๐ฅ๐ฅ๐ฒ ๐ญ๐š๐ค๐ž๐ง ๐ข๐ง๐ญ๐จ ๐œ๐จ๐ง๐ฌ๐ข๐๐ž๐ซ๐š๐ญ๐ข๐จ๐ง ๐ฐ๐ก๐ข๐ฅ๐ž ๐Ÿ๐จ๐ซ๐ฆ๐ฎ๐ฅ๐š๐ญ๐ข๐ง๐  ๐ญ๐ก๐ž๐ฌ๐ž ๐ฌ๐จ๐ฅ๐ฎ๐ญ๐ข๐จ๐ง๐ฌ. ๐ˆ๐ญ ๐š๐ฅ๐ฌ๐จ ๐ญ๐š๐ค๐ž๐ฌ ๐ข๐ง๐ญ๐จ ๐œ๐จ๐ง๐ฌ๐ข๐๐ž๐ซ๐š๐ญ๐ข๐จ๐ง ๐ฏ๐š๐ซ๐ข๐จ๐ฎ๐ฌ ๐ ๐จ๐ฏ๐ž๐ซ๐ง๐ฆ๐ž๐ง๐ญ ๐ซ๐ž๐Ÿ๐จ๐ซ๐ฆ๐ฌ, ๐œ๐จ๐ฆ๐ฉ๐ž๐ญ๐ข๐ญ๐ข๐ฏ๐ž ๐ž๐ง๐ฏ๐ข๐ซ๐จ๐ง๐ฆ๐ž๐ง๐ญ, ๐œ๐ฎ๐ฌ๐ญ๐จ๐ฆ๐ž๐ซ ๐›๐ž๐ก๐š๐ฏ๐ข๐จ๐ซ, ๐ž๐ฑ๐ข๐ฌ๐ญ๐ข๐ง๐  ๐š๐ง๐ ๐ฎ๐ฉ๐œ๐จ๐ฆ๐ข๐ง๐  ๐›๐ฎ๐ฌ๐ข๐ง๐ž๐ฌ๐ฌ ๐ฆ๐จ๐๐ž๐ฅ๐ฌ, ๐š๐ง๐ ๐ž๐ฏ๐ž๐ซ-๐ž๐ฏ๐จ๐ฅ๐ฏ๐ข๐ง๐  ๐ญ๐ž๐œ๐ก๐ง๐จ๐ฅ๐จ๐ ๐ข๐œ๐š๐ฅ ๐๐ž๐ฏ๐ž๐ฅ๐จ๐ฉ๐ฆ๐ž๐ง๐ญ๐ฌ. ๐ˆ๐ง๐๐ฎ๐ฌ๐ญ๐ซ๐ฒ ๐š๐ง๐š๐ฅ๐ฒ๐ฌ๐ข๐ฌ ๐ก๐ž๐ฅ๐ฉ๐ฌ ๐š๐ง ๐จ๐ซ๐ ๐š๐ง๐ข๐ณ๐š๐ญ๐ข๐จ๐ง ๐Ÿ๐จ๐ซ๐ฆ๐ฎ๐ฅ๐š๐ญ๐ž ๐ฌ๐ญ๐ซ๐š๐ญ๐ž๐ ๐ข๐ž๐ฌ ๐š๐ง๐ ๐ฉ๐จ๐ฅ๐ข๐œ๐ข๐ž๐ฌ ๐จ๐Ÿ ๐š ๐›๐ฎ๐ฌ๐ข๐ง๐ž๐ฌ๐ฌ.

Sample 2 - this is how it should be. When rendered the target CSS font is used.

Allowing PUT as create operations is problematic, as it necessarily exposes information about the existence or non-existence of objects. It's also not obvious that transparently allowing re-creating of previously deleted instances is necessarily a better default behavior than simply returning 404 responses.


Solution

  • Finally figured the answer thanks to a chance visit to lingojam - apparently its unicode not font.

    Example:

    ๐”—๐”ฅ๐”ข๐”ฐ๐”ข ๐”ž๐”ฏ๐”ข ๐”ž๐”ฉ๐”ฉ ๐”ฒ๐”ซ๐”ฆ๐” ๐”ฌ๐”ก๐”ข ๐” ๐”ฅ๐”ž๐”ฏ๐”ฐ, ๐”ก๐”ฒ๐”ฅ.

    ๐•ฟ๐–๐–Š๐–˜๐–Š ๐–†๐–—๐–Š ๐–†๐–‘๐–‘ ๐–š๐–“๐–Ž๐–ˆ๐–”๐–‰๐–Š ๐–ˆ๐–๐–†๐–—๐–˜, ๐–‰๐–š๐–.

    ๐Ÿ’œโ™— ลค๏ผจ๏ผฅ๐“ผแบธ ๏ฝ๏ฝ’๏ฝ… โ“๐“ต๐‹ แต˜๐“แŽฅโ“’๏ฝ๐’นไน‡ ฯ‚๐“—รƒสณ๐“ข, ๐“ญ๐“ค๐ก. โœŽ๐Ÿ˜Ž

    ๐“ฃ๐“ฑ๐“ฎ๐“ผ๐“ฎ ๐“ช๐“ป๐“ฎ ๐“ช๐“ต๐“ต ๐“พ๐“ท๐“ฒ๐“ฌ๐“ธ๐“ญ๐“ฎ ๐“ฌ๐“ฑ๐“ช๐“ป๐“ผ, ๐“ญ๐“พ๐“ฑ.

    ๐’ฏ๐’ฝ๐‘’๐“ˆ๐‘’ ๐’ถ๐“‡๐‘’ ๐’ถ๐“๐“ ๐“Š๐“ƒ๐’พ๐’ธ๐‘œ๐’น๐‘’ ๐’ธ๐’ฝ๐’ถ๐“‡๐“ˆ, ๐’น๐“Š๐’ฝ.

    ๐•‹๐•™๐•–๐•ค๐•– ๐•’๐•ฃ๐•– ๐•’๐•๐• ๐•ฆ๐•Ÿ๐•š๐•”๐• ๐••๐•– ๐•”๐•™๐•’๐•ฃ๐•ค, ๐••๐•ฆ๐•™.

    ๏ผด๏ฝˆ๏ฝ…๏ฝ“๏ฝ… ๏ฝ๏ฝ’๏ฝ… ๏ฝ๏ฝŒ๏ฝŒ ๏ฝ•๏ฝŽ๏ฝ‰๏ฝƒ๏ฝ๏ฝ„๏ฝ… ๏ฝƒ๏ฝˆ๏ฝ๏ฝ’๏ฝ“๏ผŒ ๏ฝ„๏ฝ•๏ฝˆ๏ผŽ

    ๐Ÿ“ ๐ŸŽ€ ๐’ฏ๐’ฝ๐‘’๐“ˆ๐‘’ ๐’ถ๐“‡๐‘’ ๐’ถ๐“๐“ ๐“Š๐“ƒ๐’พ๐’ธโ˜ฏ๐’น๐‘’ ๐’ธ๐’ฝ๐’ถ๐“‡๐“ˆ, ๐’น๐“Š๐’ฝ. ๐ŸŽ€ ๐Ÿ“

    Amongst the thousands of symbols in Unicode is the normal alphabetic symbols (the ones you're reading right now), but also a number of other alphabets which are different in some way. There are also thousands of characters which look like letters from the Latin alphabet, but are really symbols from other symbols sets and languages. Either way, we can pick out all sorts of symbols from the Unicode standard and use them to construct all sorts of novel textual font styles which we can copy and paste.

    Source: https://lingojam.com/TextFonts