[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Some special chars doesn't appear using Google Fonts

Posted on 2014-01-15
6
Medium Priority
?
563 Views
Last Modified: 2014-01-15
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
0
Comment
Question by:gplana
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
6 Comments
 
LVL 44

Expert Comment

by:Chris Stanyon
ID: 39782152
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.
0
 
LVL 15

Author Comment

by:gplana
ID: 39782200
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.
0
 
LVL 44

Expert Comment

by:Chris Stanyon
ID: 39782316
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.
0
Survive A High-Traffic Event with Percona

Your application or website rely on your database to deliver information about products and services to your customers. You can’t afford to have your database lose performance, lose availability or become unresponsive – even for just a few minutes.

 
LVL 15

Author Comment

by:gplana
ID: 39783045
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.
0
 
LVL 44

Accepted Solution

by:
Chris Stanyon earned 2000 total points
ID: 39783336
The problem with using the font-face declaration in your CSS is that you need the same font in 4 different formats to make sure it works in all browsers - ttf, svg, eot, and woff. The better quality fonts are usually the ones you pay for from a font library and they're not necessarily cheap.

There are tools available online to convert a ttf font into the other formats (fontsquirrel.com etc) but you have to be aware of copyright issues - you can't just convert any font. Font Squirrel have a lot of fonts available so you may find a good quality freebie there.

Managing fonts across all browser and platforms can be a little tricky if you're not careful so if you're new to using fonts, I would suggest that you start out by just using a standard web-safe font-stack in your CSS until you know things are working properly. For your headings, something like this would work:

font-family: Verdana, Geneva, sans-serif;

Forget about Google fonts, and font-face declarations for the time being. Make sure your site works the way you want it to (showing all characters across all browsers), and then think about adding fancy fonts, either by using Google Fonts (you simply add a link to the Google Fonts in the head of your document and then reference them in your CSS file), or grabbing a high-quality font set and fully testing it. As I said right at the start of this thread - not all fonts contain all characters - particularly the non-latin ones
0
 
LVL 15

Author Closing Comment

by:gplana
ID: 39783509
Great. Thanks.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Go t…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
Suggested Courses

656 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question