html - Symbols not displayed properly in custom fonts -

I downloaded the webfont kit (for shrimp font ); And I'm trying to display the word word using new font; Using HTML Insert & amp; Ouml; However, it does not seem so.

is watching; I can see that they have letter O (both capital letters and small letters), there are two points above it.

What I'm doing here:

As shown in the picture above, other characters are displayed correctly (using the right font); But with two points o!

Here is my HTML code:

  & lt; H1 id = "erdos" & gt; Erode & amp; Ouml; S & lt; / H1>   
 I specify  erdos  to use that font in my  css  file!  
  Edit: I am posting additional information / code about the question:   
 I created the  Webfont Kit < Code> Webfont Kit  tab.  
 CSS:  
  @ font-face {font-family: 'QuickSite'; Src: url ('fonts / shrimp / quixand-light-webfontsight'); Src: url ('fonts / quicksand / quicksand_light-webfont.eot? #iefix') format ('embedded-opentype'), url ('fonts / cixix / quix-lite-webfont.woff') format ('woff') , Url ('font / sequence / quix-lite-webfont.tff') format ('tray type'), url ('fonts / sequense / quixed_lite-webfonts.vg #xs light') format ('svg'); Font weight: normal; Font style: normal; } H1 # erdos {margin-top: 0; Margin-down: 0; Font-family: instant broadcast; }   
 I have tested the output in both Chrome 27.0 and Firefox 21.0  
 Chrome's output is:  
   
 The output of Firefox is:  
    
 
 
 On the page on FontSquirrel, you "????" Need to select? Select a subset in the dropdown: English is by default, which apparently means that only eight letters are included.