Geek Answers Handbook

@ font-face custom icon font displaying only unicodes

I use my own font icon using CSS3 @ font-face and in the old version of Google Chrome, only Unicode shows and does not replace or does not appear in my regular font, which displays glyphs for these Unicode.

Here is the @ font-face syntax I'm using:

@font-face{ font-family:'glyphs'; src:url('../fonts/glyphs.eot'); src:url('../fonts/glyphs.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphs.svg#glyphs') format('svg'), url('../fonts/glyphs.woff') format('woff'), url('../fonts/glyphs.ttf') format('truetype'); font-weight: normal; font-style: normal; }

Any idea why Unicode is displayed, and not characters that are part of a font-character?

+4
source share
5 answers

You might be faced with unicode-range restrictions. As described here , you can specify in the font-face declaration which Unicode characters will be covered. It is possible that older versions of Chrome only changed the default Latin characters. You can fix this by adding this to your font-face declaration:

 unicode-range: U+00-FFFF;

Having said that, it may well be that you only have a local problem. Check the Chrome settings in the "Advanced Settings" section of the "Web Content" section, click "Customize Fonts", and then at the bottom, check the current "Encoding" setting. Changing the value to Unicode (UTF-8) could also solve the problem.

+5
source

Try switching the orders of the fonts you download. Some browsers, even an older version of chrome, download svg fonts in strange / incomplete ways.

Try:

 @font-face{ font-family:'glyphs'; src:url('../fonts/glyphs.eot'); src:url('../fonts/glyphs.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphs.woff') format('woff'), url('../fonts/glyphs.ttf') format('truetype'); url('../fonts/glyphs.svg#glyphs') format('svg'), font-weight: normal; font-style: normal; }
+4
source

I can reach the limb here, but is it possible that the document displaying the font either a) declares a character encoding other than UTF-8 / UTF-16 (or does not explicitly declare it), or b) the html document is saved in encoding, different from UTF-8 / UTF-16?

A very common problem causing websites to display characters incorrectly has a different encoding of the declared character in HTML than the encoding used to save the HTML document. In addition, using characters that are part of any of these encodings can cause problems.

+3
source

You should also post HTML code for us to respond better. I assume that you are using the data-icon attribute in HTML. In this case, you should add this code after the font CSS code.

 [data-icon]:before { font-family: 'glyphs'; content: attr(data-icon); speak: none; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; }
+2
source

I had problems with relative paths, old browsers and font declarations in the past: you can try with a fixed path (/someFolderInRoot/fonts/glyphs.svg) or a relative path in css file-path (fonts / glyphs.svg).

Does everything work in the new version of Chrome and other browsers? Chrome installs updates automatically for most users, so maybe you are making the site backward compatible for a version that no one is using.

+1
source

More articles:


All Articles