CSS에서 사용자 정의 글꼴을 사용하는 방법은 무엇입니까?

Question

가장 아름다운 글꼴 here을 찾았습니다. 나는 그것을 사용하고 싶다. 나는 다음과 같은 시도 :

@font-face { 
    font-family: myFirstFont; 
    src: url(http://fontsforweb.com/font/show/?id=78041); 
} 

div { 
    font-family: myFirstFont; 
} 

(출처 : https://www.w3schools.com/css/css3_fonts.asp) 당신이 그것을 다운로드 할 수있는 폰트는 단지 웹 사이트를 소스되지

Answer 1

. 글꼴을 다운로드하고 폴더 글꼴에 넣은 다음 코드 src를 해당 경로로 변경하십시오.

Answer 2

그 다음 다음이 코드를 사용하여 프로젝트에 넣어 추출, 전체 zip 파일을 다운로드 : 당신은 어떤에 당신을 브라우저를 따라 글꼴 파일을 다운로드하여 다양한 형식으로 링크를 추가 할 필요가

@font-face { 
    font-family: myFirstFont; 
    src: url(MonsieurPomme.woff); 
} 

div { 
font-family: myFirstFont; 
} 

Answer 3

을 지원하려는 :

@font-face { 
    font-family: 'MyWebFont'; 
    src: url('webfont.eot'); /* IE9 Compat Modes */ 
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
     url('webfont.woff2') format('woff2'), /* Super Modern Browsers */ 
     url('webfont.woff') format('woff'), /* Pretty Modern Browsers */ 
     url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ 
     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ 
} 

더 많은 정보를 원하시면 https://css-tricks.com/snippets/css/using-font-face/를 참조하십시오.

Answer 4

글꼴 - 얼굴 사용.

@font-face{ 
    font-family: ((fontName)); 
    src: url(fontname.woff); 
} 

다른 글꼴을 호출하는 방법과 마찬가지로 호출 할 수 있습니다.

Answer 5

웹 페이지가 아닌 글꼴 파일에 직접 링크해야합니다.

@font-face { 
    font-family: myFont; 
    src: url('font.eot'); /* IE9 Compatible Modes */ 
    src: url('font.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
     url('font.woff2') format('woff2'), /* Super Modern Browsers */ 
     url('font.woff') format('woff'), /* Pretty Modern Browsers */ 
     url('font.ttf') format('truetype'), /* Safari, Android, iOS */ 
     url('font.svg#svgFontName') format('svg'); /* Legacy iOS */ 

} 
div { 
    font-family: 'myFont', serif; 
}