HTML/CSS - 사용자 정의 글꼴

나는에서 사용자 정의 글꼴을 사용하려고 사용 : 내가 '이클립스에 있지만 아무튼 내 삼성 갤럭시 S2에 넥서스를 하나의 에뮬레이터를 사용할 때 글꼴이 제대로 표시되어 찾을 수 https://www.google.com/fonts/#QuickUsePlace:quickUse/Family:Underdog HTML/CSS - 사용자 정의 글꼴

을 t 작업은 ...

내 코드는 다음과 같다 :

CSS :

@font-face 
{ 
font-family: 'Underdog', cursive; 
} 

#categories 
{ 
font-family: 'Underdog'; 
} 

#subCategories 
{ 
font-family: 'Underdog'; 
} 

body 
{ 
background-color:#272714; 
}

HTML :

드롭 다운 상자는 JQuery를 사용하여 동적으로 생성됩니다. "loadingDiv"가 표시되고 AJAX 호출이 완료되면 숨겨집니다. 여기

<!DOCTYPE html> 
<head> 

    <title>Coupon Finder</title> 
    <link rel="stylesheet" href="css/main.css" type="text/css" media="all"/> 
    <link href='http://fonts.googleapis.com/css?family=Underdog' rel='stylesheet' type='text/css'> 
    <script type="text/javascript" src="js/jquery-1.10.2.js"></script> 
    <script type="text/javascript" src="js/storecategories.js"></script> 

    <script> 

     function categorySubmit(){ 
      var selectedCategory = document.getElementById("category"); 
      var selectedText = $('#category option:selected').text(); 

      //Get Sub-Categories 
      getSubCategories(selectedText); 
     } 


    </script> 

</head> 

<body > 
    <div id='categories'> 
     <h3>Coupon Categories</h3> 
     <div id='loadingDiv'> 
      Please wait... <img src="http://i.stack.imgur.com/FhHRx.gif" /> 
     </div> 
    </div> 

    <!--Add Category Search Button--> 
    <button class = "buttons" onclick="categorySubmit()">Search!</button> 


    <div id='subCategories'>    
     <div id='loadingDiv1'> 
      Please wait... <img src="http://i.stack.imgur.com/FhHRx.gif" /> 
     </div> 
    </div> 
</body>

에뮬레이터에 출력의 스크린 샷입니다 (어두운 배경에 대한 죄송합니다 ... 필요가 그것을 변경) :