Hugo

Fonts rendered different on different devices

Hello, community

I am new to Hugo and I was able to successfully host my webpage using Hugo with which I am very satisfied and happy.

There is just one issue regarding how fonts are being rendered. I am using the theme ezhil, and the fonts are getting rendered differently on my computer (left) than my mobile (right).


Has anyone else encountered this issue? How do I resolve it?
Thanks

Your theme defines “Ubuntu, sans serif” as default font. On your computer you might have that font, on your mobile not.

Solution: add this to your header (between <head> and </head>, before the stylesheets):

<link href="https://fonts.googleapis.com/css?family=Ubuntu:400,400i,700,700i&display=swap" rel="stylesheet">

You could do it properly with @import rules in your stylesheets, but the above will be a quicker fix.

Edit: On closer look there are several fonts missing from that package. See here:

1 Like

Fonts are not a part of Hugo. A browser looks locally for the wanted fonts. So diffrents OS have different fonts.

If you want the same font everywhere you must integrate a font to your static files and implement it i the CSS files.

1 Like