[생활코딩] 타이포그래피 - 웹폰트
본문 바로가기
프레임워크/CSS

[생활코딩] 타이포그래피 - 웹폰트

by 은돌1113 2022. 1. 25.

  [ 웹폰트란? ]  

: 웹폰트는 사용자가 가지고 있지 않은 폰트를 웹페이지에서 사용 할 수 있는 방법입니다.

폰트를 서버에서 다운로드 하는 방식이라고 할 수 있습니다.

(구글에서 제공하는 무료 웹폰트 서비스인 google fonts를 이용 했습니다.)

 

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com


<!DOCTYPE html>
<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Indie+Flower|Londrina+Outline|Open+Sans+Condensed:300" rel="stylesheet">
    <style>
      #font1{
        font-family: 'Open Sans Condensed', sans-serif;
      }
      #font2{
        font-family: 'Indie Flower', cursive;
      }
    </style>
  </head>
  <body>
    <p id="font1">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis lacus eu ex rhoncus pretium. Sed vestibulum risus pharetra, consequat nibh ac, ornare nunc. Nunc eu dui eget lorem aliquet finibus.
    </p>
    <p id="font2">
      Quisque nec arcu felis. Vestibulum gravida, augue eu facilisis tempus, neque erat tincidunt nunc, consequat ultrices felis urna eu augue. Nulla ut urna purus. Curabitur ultricies rutrum orci malesuada tempor.
    </p>
  </body>
</html>

'프레임워크 > CSS' 카테고리의 다른 글

[생활코딩] 캐스케이딩(Cascading)  (0) 2022.01.28
[생활코딩] 상속  (0) 2022.01.26
[CSS] linear-gradient  (0) 2022.01.25
[생활코딩] 타이포그래피 - font  (0) 2022.01.24
[생활코딩] 타이포그래피 - text-align  (0) 2022.01.24

댓글