Avatar of gplana
gplana
Flag for Spain asked on

Some special chars doesn't appear using Google Fonts

Hi.

The blog http://glutoniana.com is using some spanish characters (for example on a post title  "Año nuevo..." where is the "ñ" char.

A friend of mine test web on its Android tabled and the "ñ" char doesn't appear (it appear a white space on its place).

This blog is using Wordpress and the template uses some Google Fonts ( 'TitilliumText22LRegular' is the font used on these titles).

How can I make the ñ character appear on all devices?

Thank you
Fonts TypographyWeb DevelopmentWordPress

Avatar of undefined
Last Comment
gplana

8/22/2022 - Mon
Chris Stanyon

Not all fonts contain all characters!

When you use Google fonts, and click on the 'Use' button, you have the option of which character sets to include (Latin, Latin Extended, Cyrillic etc.)

If the font doesn't include all possible characters, then there's nothing you can do about it.
gplana

ASKER
The character is shown well on my computer (on all browsers). Isn't it strange?

I will try what you said. Where should I configure? On the css file?
Can you give me an example? I'm a newbie on Google Fonts (the template was already made).

Thank you.
Chris Stanyon

OK. Just looked at your site and you're not using Google Fonts - you are using a @font-face declaration in your CSS file (bottom of the styles.css file) to read the various formats of the font (ttf, eof, svg etc.)

I've looked at your site on Android and it's seems to be working OK for me.

The font you've used isn't particularly well designed (look closely at your site and you'll see the Spanish characters are actually a different font to the rest of the text).

It may simply be that the browser your friend is using doesn't support these additional characters from this particular font.

One thing I would do is change the way you declare your character set in the head of your page. At the moment you have this:

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

Change it to this:

<meta charset="UTF-8">

Not sure what else you can try other than looking for a better quality font.
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
gplana

ASKER
Thank you, I added the <meta charset="UTF-8" />

How can I look for a better quality font? What should I change when I found it to apply this new font instead of the old one?

Sorry, I'm a newbie about font types.

Thank you.
ASKER CERTIFIED SOLUTION
Chris Stanyon

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
gplana

ASKER
Great. Thanks.