I have a Hugo site that I serve out of an S3 bucket. I’ve been using Amplify for a while, and this only just started happening recently, but all my unicode emoji are getting mangled, like this example:
I don’t experience it when I run hugo server, only after it’s built with hugo 0.73 on an Amazon Linux machine. Is this a problem with hugo?
No, this is most definitely not a problem with Hugo.
You need to provide a dedicated Emoji font and call it accordingly -for example within a specified span tag- on the front-end of your project, if you want non-Unicode emoji to render properly.
Not all browsers display emoji the same.
It’s not mangled, it’s showing what browser show when they don’t understand the character code.
It might be, because you don’t define a content-encoding. You should try to add a meta tag <meta charset="utf-8"> - if you set the content type to UTF8 somehow via headers (did not check, only HTML) then ignore this point. It must be utf8 or above to see those special characters.
Another issue is, that you don’t show the code that is creating this title. The h1 does not have some kind of span around the supposed emoji, so my guess is, that it’s NOT an iconfont issue. They tend to work with their own dedicated code blocks and don’t add normal characters. But I tend more in the encoding direction. The development server adds utf8, the live server nothing so your browser tries to fall back to something that is not utf8.
Actually @davidsneighbour is right. There is no character encoding information on your page.
As per the W3C Internationalization Checker.
This topic was automatically closed after 32 hours. New replies are no longer allowed.