webfonts,google-webfonts,roboto , Error With Google Webfont Not Loading Characters

Error With Google Webfont Not Loading Characters


Tag: webfonts,google-webfonts,roboto

On my site I am using the Google Font Roboto. I noticed in several places the following:� or what I call a question mark in a black diamond. (Does this symbol have a name?)

I typically see this when a font doesn't have a character it can render, however, this doesn't appear to be the case in this instance. It happens in a few instance. One of them is when there is an extra space the other I have seen is when I use the § symbol.

I tested Roboto using the § symbol with a type tester and it works just fine.

Why doesn't it work on my site? What is going wrong?


I am unsure why this is happening and would still love an answer but I found a solution that I am using in the mean time.

It appears to have have happened with content that was copied into my text. For spaces or other symbols were this appears (such as - or / I am just retyping the character. For the § symbol I replaced it with the HTML character § (or you can use §) and this has solved the issue.


External web font via redirect

When trying to use a font file from another domain on a web page, I ran into the restrictions of the Cross Origin Resource Policy in all its glory. So, instead of referencing the external font URL directly from CSS with @font-face, I referenced a local URL path which redirects...

Numbers look different in Safari on iPhone

I have a simple snippet with a phone number composed by a one letter and 12 numbers, its a simple text inside a p element, In a desktop browser all looks fine, but in an iPhone browser the letter p looks fine but the rest of the number looks very...

Is there any way to ensure that icon fonts always load on IE 8?

I've been trying all day to get custom icon fonts to work in IE 8 (for example, with Fontello or Icomoon). Both Fontello and Icomoon offer "demo" pages of the icon font after you download it. I've been using the demo pages to test. As far as platform, I've been...

Not able to use custom fonts in Phonegap

After looking at various solutions, like this one, I'm still not able to get Elusive Icons working in Phonegap. It's working fine on my computer, but once I create the app using Adobe app builder, the web font icons are no longer showing. My folder structure looks like this: and...

Different webfont for Japanese special characters

I'm working on a Japanese website and I'm using the Meiryo webfont. I really like this font but the special characters have too much margin. The exact issue is that there's too much space in front of special characters like 【, which makes the design look off if such a...

Google fonts: Define custom name in CSS

Is it possible to define a custom name for Google fonts? Eg. <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> How to use 'Open Sans' with custom name? div { font-family: 'custom'; // to be same as 'Open Sans' } Using @font-face as answered here is not possible, since I don't have url to...

loading cached fonts at the right time

I have some webfonts that get loaded via Webfontloader load like this ... <script src="//ajax.googleapis.com/ajax/libs/webfont/1.5.10/webfont.js"></script> <script> WebFont.load({ custom: { families: ['BlenderProBook', 'BlenderProMedium'] } }); </script> And it works great when first loading the page ... Problems is, when refreshing the page it only retrieves the cached fonts when requested in...

Webfonts not rendering on IE11 win8.1

I have a weird problem with webfonts rendering on IE11 (v11.0.9600.17631) windows 8.1 pro. I am using both an iconmoon produced iconset and 2 typekit fonts (proxima nova and rooney) and nothing is rendered using these. I have tried so many things but nothing seems to do the job. Tried...

Google Font letters scramble up sometimes on refresh only in localhost

We have a strange problem with Google Fonts while developing via localhost. On random refresh the letters of text scramble up. This happens about once every 5 refreshes. The images below show the letters scrambled up and the way they're supposed to be shown. Also, while the letters are scrambled...

How to set lining numerals in a webfont?

I've been integrating with a webfont in Brackets (eot, ttf, woff) and can't seem to get right of the old style numerals using .lnum { -moz-font-feature-settings:"lnum" 1; -moz-font-feature-settings:"lnum=1"; -ms-font-feature-settings:"lnum" 1; -o-font-feature-settings:"lnum" 1; -webkit-font-feature-settings:"lnum" 1; font-feature-settings:"lnum" 1; } I'm starting to wonder if the font I'm using even has normal numerals...

Why won't my @Font-Faces load?

My fonts won't appear on my website and I don't know why! The only reason I could really think of is that perhaps I was loading in too many? However, I tried removing a load of them and this did not appear the case. Any ideas? The code... #panel1 h1...

What do browser do when a font weight is unavailable

If I load a google font that comes with 400 and 700 weights, but in my CSS I use font-weight:550; what does the browser do ?

How to make a font looking very old and out-washed in the browser

I would like to create random outwashed letters of a usual font. Let's say I want to have http://www.fontspace.com/category/washed%20out those ones but instead I use a usual font which is out-washed in the browser. Is this possible? I mean taking a font that is out washed there the same letters...

roboto font not working in css

I've CSS and XHTML files. I've downloaded all the ROBOTO fonts and put it in my "webapps/fonts/" folder. In my XHTML i mentioned the CSS Path, '<link href="../css/tab_ux.css" rel="stylesheet" type="text/css" />' AND my CSS file have styles like, @font-face { font-family:roboto-bold; src: url('../fonts/Roboto-Bold.tff') @ttf; } .UX_FontClass { font-family: roboto-bolditalic !important;...

Using Telugu ttf in my web site

I need to be able to use specific Telugu fonts on my website. I have the ttf file and I generated the .eot, .woff, .woff2 and .svg files required. I followed the instructions on the site below and created my stylesheet as shown below @font-face { font-family: 'sree_krushnadevarayaregular'; src: url('Sree...

How to insert font icon into text input field? [closed]

I want to insert a calendar icon web font into my input field. The code I have doesn't work. "webfont_calendar" is my web font class. Am I missing something? <input class="webfont_calendar start_date" id="from"/> ...

Font rendering fine on Mac, messed up on Windows

I ran into a problem with font rendering on Windows. I'm used to a little difference in rendering between Mac and Windows, but this just made my mouth fall open. I tested the site thoroughly on Mac and I'm positive it looks just fine in Chrome, Firefox and Safari. It...

Angular Material web font icons () not showing up?

Not sure if it's the documentation that's confusing me but I'm having difficulties getting md-icons to work (its more work than other icon fonts). Instructions here specify to Use <md-icon md-font-icon="classname" />. Here is a sample demo with the icon font stylesheet loaded and a <md-icon md-font-icon="android" /> as per...

Avoid Symbols in Google font

I added fonts from google fonts, but they appear in web page as symbols! I tested in chrome,and FireFox Example image: ...