3

For a website I am developing I am using multiple @font-face's to style certain texts. For one of my fonts, it displays great in all browsers for Mac and Windows with one exception, Chrome on Windows (It is happening in Vista & Windows 7).

In that browser the font is being used but the spaces for the text are being displaying as boxes.

I have checked Chrome for Mac and the problem does not exists. I have looked around online and found a lot of stuff about Chrome displaying boxes/squares when it cannot render the characters/fonts correctly such as with Japanese/Chinese sites. None of the solutions mentioned there, such as clearing the cache or restarting my comp, seem to be working.

I'm not sure any of those cases apply here as well as my font is appearing on the site but only the spaces appear as squares. This is not happening with any of the other @font-face fonts I'm using either.

Other solutions I have found online include making sure you have the font installed locally. This is not an option as I cannot ask everyone who visits a website to install a font on their computer.

I would attach a link but the project is on a developmental server right now.

Has anyone else run into this issue and does anyone have any idea how to fix this rendering problem?

GregoryLG
  • 67
  • 2
  • 8

3 Answers3

1

I ran into a problem it seemed that the boxes only showed up for random areas of text, and only for spaces.

My solution was to open a plain text editor and retype the faulty content in the plain text editor and then paste it back into the content.

In my case, I was working with a designer and I was copying the text from an AI file and I imagine that there were some hidden characters that were being copied over.

Shahbaz
  • 3,433
  • 1
  • 26
  • 43
Lucas
  • 314
  • 2
  • 5
1

I know this is a very old post, but just in case for those strugglers let me produce my solution..

In my case, i cracked my brain with various solutions but none gave me working results with all browser compatibility.. after trying a bit I found a solution, which is to follow below procedure.

If you have typed in nudi,bharaha or any non-unicode characters then this will work(My test was on nudi)

  1. type your text in any software you need
  2. try to online converter for non-unicode to unicode(I used http://aravindavk.in/ascii2unicode/)

  3. then try a piece of code below

      <style>
  @font-face {
    font-family: kannadanudi;
    src: url('https://github.com/googlei18n/noto-fonts/raw/master/unhinted/NotoSansKannada-Regular.ttf');
  }
  </style>

  <p style="font-family: kannadanudi;">
  ನಮ್ಮ ಮಾತು  
  </p>

Where in which from the above code you can either download and give a local font path or u can directly link the github url. Anyhow this was what i did to conclude my problem.. Thank in advance. If any have doubts then can comment on it.

Nair Ranjith
  • 67
  • 5
0

I was just searching for this answer myself after trying many different approaches this year. I finally solved it by adding unicode characters to the font generator.

The short answer is to add this to your Font Squirrel settings for Unicode Range:

0085, 000A, 000B, 000C, 000D, 2028, 2029

The long answer is available at this question: Chrome 10/Windows @font-face encoding trouble

Community
  • 1
  • 1
Dylan Valade
  • 5,565
  • 6
  • 42
  • 56