2011-01-28 4 views
3

나는 이것을 해봤지만 아직 습득하지 못했다. fontsquirrel.com에서 글꼴 키트를 다운로드하고 내 사용자 정의 글꼴을 내 사이트에서 작동 시키려고했습니다. 나는 이제 내가 혼란스러워하는 온라인에서 발견 된 "총알 증명"방법을 포함하여 많은 변형을 시도했다. 누군가 아래 코드를보고 @ font-face를 사용하여 웹 사이트에서 올바르게 작동하는 사용자 정의 글꼴을 얻는 방법을 보여줄 수 있습니까?@ font-face issues

fonts.css이라는 이름의 스타일 시트가 css 폴더에 있습니다. 이것은 사용자 정의 글꼴을 호출하는 데 사용됩니다. 글꼴 파일은 글꼴이라는 이름의 루트 폴더에 있습니다.

스타일 시트에 대한 CSS를 글꼴입니다 : 분명

} 
#merchandise h1 { 
    font-family: "Bebas Neue", Arial, Helvetica, sans-serif; 
    font-size: 33px; 
    font-weight: normal; 
    line-height: normal; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
} 

아무것도 : 레이아웃 등을위한

@font-face { 
    font-family: 'BebasNeueRegular'; 
    src: url('../fonts/bebasneue-webfont.woff') format('woff'), 
     url('../fonts/bebasneue-webfont.ttf') format('truetype'), 
     url('../fonts/bebasneue-webfont.webfontABYyK1dn') format('svg'); 
    font-weight: normal; 
    font-style: normal; 

다른 스타일 시트는 다음과 같이 폰트를 호출? 물론 글꼴을 설치했기 때문에 내 컴퓨터에서 로컬로 작동합니다.

답변

8

#merchandise h1에서 font-family: "Bebas Neue"@font-face에서 font-family: "BebasNeueRegular"

또는

, font-family: 'BebasNeueRegular' 필요 font-family: 'Bebas Neue'

+0

감사합니다 조쉬 할 필요가있다. 바보. 폰트는 BebasNeueRegular로 이름 지어 졌기 때문에 폰트를 호출 할 때 Bebas Neue를 잘못 사용했기 때문에 내가 참조했던 다른 것이었을 것입니다. 또한, "BebasNeueRegular"대신 "BebasNeueRegular"와 같은 작은 따옴표를 사용해야했습니다. 그것을 가르쳐 주셔서 고마워요 :) 너무 많은 프로젝트, 충분한 수면! –