곽로그

[CSS] font-face 적용예제 본문

language/HTML,CSS

[CSS] font-face 적용예제

일도이동 2020. 10. 30. 16:35
반응형

요새 jsp공부를 하고 있는데 예제 페이지가 너무 안예쁘게 나와서 폰트라도 예쁘게 해서 출력하려고 하고 있다. 

근데 구글에서 링크로 가져올 수 있는 폰트는 한정적이기도 하고 안예뻐서 폰트 파일을 다운 받고 사용 중이다. 

 

1. 폰트 다운로드

 사용하고 싶은 무료 폰트를 다운로드 받는다. 나는 'RIDIBatang'이 마음에 들어서 이 폰트를 다운로드 받았다.

 

 

리디바탕

더 선명하고, 긴 문장도 잘 읽을 수 있는 전자책 전용 글꼴 리디바탕을 소개합니다.

www.ridicorp.com

 

2. 파일 저장 

프로젝트에 폴더를 만들고 다운로드 받은 폰트파일을 옮겨 놓는다. 

 

3. font-face 태그 추가

 아직은 허접이라 html에 바로 적용하지만, 정석은 css를 따로 만들어서 사용해야하는 걸로 알고있다. html파일에 적용을 하려면, 아래의 코드를 <head>태그 사이에 복붙하면 된다. 

 

<style>
            @font-face {
                font-family: "RIDIBatang";
                src: url("../image/RIDIBatang.otf");
                font-style: normal;
                font-weight: normal;
            }
</style>

font- family: 적용하고자 하는 폰트의 이름

src: 2번에서 폰트파일을 저장한 경로

 

 

 

반응형
저작자표시 비영리 변경금지

'language > HTML,CSS' 카테고리의 다른 글

[CSS] 혼자 할 수 있을 때 까지  (0) 2021.08.26
[HTML] disabled 와 readonly의 차이  (0) 2020.11.06
'language/HTML,CSS' Related Articles more
Comments