생활코딩

Coding Everybody

코스 전체목록

닫기

웹폰트

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

웹폰트란?

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

본 수업에서는 구글에서 제공하는 무료 웹폰트 서비스인 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. 이현수
    2021.09.10(금)
  2. 두드
    2021.07.22 완료
  3. jeisyoon
    2021.06.21 웹 폰트 - OK
  4. barozaqu
    20210518.
  5. 완료
  6. Minint
    2021.03.14
  7. 이해는 가는데 배포?할때는 경로나.. 폰트 원본같은 것들을 어케하는지 모르겠네요, 나중에 알게되려나..@_@
  8. HyeonHui Jeong
    20210219
  9. 사용자가 없는 폰트를 다운로드하여 사용할 수 있도록 만들어주는 방법
  10. 임태경
    완료했어요 감사해요
  11. 스마일가이
    2021.01.26 완료 감사합니다
  12. datsciseol
    20210116
  13. 따뜻한츄르
    2020 12 30
  14. 몽실엄마
    12/27/2020 잘 봤습니다.
  15. switpotato
    20201122: 2차학습 완료
  16. 켄드릭
    2020년 11월 03일(화) 14:06 1차 수강완료
  17. 여니여니
    201006 감사합니다
  18. 오석민
    완료
  19. 박병진
    2020.10.03 완료
  20. 콜라
    20200926완료
  21. jaehyunlee
    완료
  22. 한강
    웹폰트 잘 배웠습니다. ^^!
    200529
  23. 노병은 살아있다
    재미가 붙어 주말에도 집에서 열심히 듣고 있습니다.
    감사합니다
  24. green diseny
    잘안됨 다시해보기
  25. 무지개반사
    완료
  26. Blanc
    2020.01.05
  27. 열렬히수강
    chrome에서는 구글한글폰트가 적용되는데,
    Internet Explorer에서는 구글한글폰트가 적용되는것도 있고 안되는것도 있네요 ㅠ
    이부분은 해결방법이 없을까요...?
  28. matrix
    수강완료
  29. bahk.jinil@gmail.com
    수강 완료
  30. alpha
    191001 영문폰트만 수강완료
  31. 치디우기
    수강완료
  32. 류석현
    수강완료
  33. FIRE
    20190729 완료
  34. 다나가
    190722 - 수업완료!!
  35. 김주엽
    수업완료
  36. 노혜주
    완료
  37. lygon
    2019-02-23 완료
  38. 김진욱
    완료!
  39. 숨이
    완료햇습니당
  40. 김민영
    완료

    감사합니다
  41. JN87
    180104 감사합니다!
  42. 푸른하늘
    10일차 공부 감사합니다
  43. Jupi
    한국어 웹폰트를 제작를 제작하고, 페이지에 적용시키실려고 하시는것 맞으시나요?

    그러시다면, 아마도 웹폰트를 만든 폴더안에 파일들이 몇개 있을거에요.
    그것도 같이 이동해 주셔야 합니다.
    대화보기
    • 고잉센세
      궁금한 점이 있습니다.
      egoing선생님께서 하신대로 하니깐 한글적용이 되긴하는데..
      그 코드를 그대로 복사해서 새로운 파일을 만들어서 붙여넣었는데 , 적용이 안되요 ㅠㅠ
      왜그런건가요?
    • 이성준
      완전 재밌습니다. 감사합니다.
    • 오빠는다르다
      감사합니다~!
    • 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>
    • jimmyzip
      맞아요!! 순간 가지고 있던 폰트가 잘못됐나 싶었는데, 다시 생각해보니 preview.html에는 meta태그가 없더군요 ㅋㅋ
      대화보기
      • mirong1
        실행해보니 한글이 깨지네요. head 밑에 ,

        <meta charset="utf-8"> 을 넣었더니 해결됐습니다. 이고잉님 HTML 수업에서 가르켜 주신게 큰 도움이 됐습니다.
      • 쿠쿠다스
        흠..한번들었는데
        살짝어렵네요ㅎㅎ
        일단 나중에 다시 들어야겠네요
        감사합니다~
      버전 관리
      egoing
      현재 버전
      선택 버전
      graphittie 자세히 보기