0

I am trying to make a weather app using OpenWeatherMap api. Apparently,i am trying to update my element's text through javaScript with a temperature and a '℃' symbol. The problem is that the '℃' symbol is not using the font-family mentioned in the corresponding css whereas the temperature value is all fine. I have tried it this way-

$("#temp").text(data.temp+String.fromCharCode(8451));

Also,i tried this-

$("#temp").text(data.temp+String.fromCharCode(8451)).replace('font-family','Aclonica');

I searched for similar SO questions and googled for solution but got nothing. Any kind of help would be appreciated. thanks in advance.

Srishti Sharma
  • 108
  • 10

1 Answers1

1

Most fonts only cover a certain range out of all possible (unicode) characters. Your font rendering engine will use the provided font if possible and use a fallback font to render characters for which the given font doesn't provide an icon / glyph.

This might explain your observation.

Solution: use a font with more glyphs / glyphs for all characters / code points you want to use - or add another (fallback-)font to your font-family which covers the missing characters. See also Fallback fonts on special characters

Community
  • 1
  • 1
le_m
  • 19,302
  • 9
  • 64
  • 74
  • i have used another font to my font-family and it puts all the texts in a single font but not the one(fallback-) font i used. – Srishti Sharma Jun 25 '16 at 17:47
  • btw thanks for the answer and how could i find out if some font has more glyphs or not? my code's at- http://codepen.io/srishti-learner/pen/aZBxZL ( in any case you want to check out). – Srishti Sharma Jun 25 '16 at 17:49
  • Have a look at http://stackoverflow.com/questions/11395584/fallback-fonts-on-special-characters for the order of fallback fonts. Usually any font viewer would tell you the number of glyphs in a font. Most online font providers also list the glyphs of their webfonts. – le_m Jun 25 '16 at 18:17