2016-08-07 5 views
0

CSS에서 사용자 정의 글꼴을 추가하려고하는데 작동하지 않습니다.사용자 정의 글꼴이 부트 스트랩과 작동하지 않습니다.

내 HTML :

<!DOCTYPE html> 

<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>Shout!</title> 
    <meta name="author" content="Jordan Baron"> 

    <link rel="stylesheet" href="styles.css"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    </head> 
    <body> 
    <div> 
     <img src=images/logo.png alt="logo" height="54" wdth="133" class="logo"> 
     <hr class="divider"> 
     <h1 id="wis">Shout!</h1> 
    </div> 
    <script src="scripts.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script> 
    </body> 
</html> 

내 CSS :

@font-face { 
    font-family: SanFran; 
    src: url(SF-UI-Display-Thin.otf); 
} 

div { 
    text-align: center; 
} 

.divider { 
    margin: 0; 
    padding: 5px; 
} 

.logo { 
    margin: 0; 
    padding: 5px; 
} 

.wis { 
    font-family: SanFran; 
} 

내가 크롬을 사용하고는 Mac OS X에 부트 스트랩 3을 사용하고 있습니다. 부트 스트랩을 사용하지 않더라도 부트 스트랩을 사용하면 글꼴이 바뀌지 않습니다.

+0

에 – jonju

답변

0

<h1>에서 ID를 사용하고 있기 때문에 바뀌지 않습니다. 클래스 ID가 #wis 대신에 .wis 인 경우

한번에 변경

.wis { 
    font-family: SanFran; 
} 

`SF-UI-표시 - Thin.otf`가 위치한 않습니다

#wis { 
    font-family: SanFran; 
} 
관련 문제