CSS

웹폰트

이 수업은 다소 난이도가 있고 덜 중요하기 때문에 나중에 보는 것을 추천드립니다. 하지만 재미는 있을꺼예요. ㅎ 

웹폰트란?

웹폰트는 사용자가 가지고 있지 않은 폰트를 웹페이지에서 사용할 수 있는 방법입니다. 폰트를 서버에서 다운로드하는 방식이라고 할 수 있습니다. 

본 수업에서는 구글에서 제공하는 무료 웹폰트 서비스인 google fonts를 이용해서 웹폰트를 설명합니다. 

google fonts

예제 - web-font.html

<!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>

댓글

댓글 본문
작성자
비밀번호
  1. 이성준
    완전 재밌습니다. 감사합니다.
  2. 오빠는다르다
    감사합니다~!
  3. MunBe
    <!--영어는 사이즈가 작기때문에 괜찮지만 한글폰트는 사이즈가 커서 문제가 될수도 있다.-->
    <!--폰트 생성기 툴 : https://www.web-font-generator.com/-->
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!--이 link가 없으면 적용이 안되요.-->
    <link href="https://fonts.googleapis.com/css?family=Encode+Sans+Expanded|Modak|Source+Sans+Pro" rel="stylesheet">
    <style>
    #font1 {
    font-family: 'Encode Sans Expanded', sans-serif;
    }

    #font2 {
    font-family: 'Source Sans Pro', sans-serif;

    }

    #font3 {
    font-family: 'Modak', cursive;
    }
    </style>
    </head>

    <body>
    <p id="font1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, delectus recusandae maxime hic necessitatibus cupiditate iusto neque quam eaque, adipisci impedit sunt provident nobis quae! Aperiam iure dolore repudiandae neque.</p>
    <p id="font2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, delectus recusandae maxime hic necessitatibus cupiditate iusto neque quam eaque, adipisci impedit sunt provident nobis quae! Aperiam iure dolore repudiandae neque.</p>
    <p id="font3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, delectus recusandae maxime hic necessitatibus cupiditate iusto neque quam eaque, adipisci impedit sunt provident nobis quae! Aperiam iure dolore repudiandae neque.</p>
    </body>
    </html>
  4. jimmyzip
    맞아요!! 순간 가지고 있던 폰트가 잘못됐나 싶었는데, 다시 생각해보니 preview.html에는 meta태그가 없더군요 ㅋㅋ
    대화보기
    • mirong1
      실행해보니 한글이 깨지네요. head 밑에 ,

      <meta charset="utf-8"> 을 넣었더니 해결됐습니다. 이고잉님 HTML 수업에서 가르켜 주신게 큰 도움이 됐습니다.
    • 쿠쿠다스
      흠..한번들었는데
      살짝어렵네요ㅎㅎ
      일단 나중에 다시 들어야겠네요
      감사합니다~
    • 14번째
      5.18.
    • php가 첫취업?
      웹폰트...신입입장에선 쓸일이 없겠지만....언젠가 쓸일을 위해;;;재강의 해야할듯 싶습니다..
    • 차보람
      와 진짜 최고네요!
    • 임지호
      웹폰트 : 개발자가 선정한 폰트를 사용자가 가지고 있지 않을 때를 대비해 서버에서 해당 폰트를 다운받을 수 있게 하는 것
      - 구글 폰트를 사용하면 공짜로 웹폰트 사용 가능
      - 내가 가지고 있는 폰트를 웹폰트로 만들 때 web font generator를 사용하면 된다.
    • 박상준
      항상 구글에서 다른사람이 올린 글만 복사해서 썼는데 사이트까지 알려주시고 자세히 알려주셔서 혼자서도 할 수 있게 되었습니다. 감사합니다.!!
    • 최현승
      161009 완료
    • 마엘
      찾던 내용이에요! 감사합니다.
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기