웹폰트(Web Font) 적용하기

가벼운 나눔고딕 사용

• _layouts/default.html 내에 아래 추가

     <!-- Web Fonts  -->
     <link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/nanumgothic.css">
     <!-- swap방식이 느리다고 하긴 하는데..-.-;
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nanum+Gothic&display=swap">
     -->
  

참고. 아이콘 폰트 (Font Awesome)

아이콘을 폰트처럼 사용가능하도록 Vector 이미지로 서비스

• _layouts/default.html 내에 아래 추가

      <!-- Font Awesome -->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />
  

• Font Awsome 5 버전에서는

     <i class="fas fa-camera"></i>
  

  • 태그 fas 클래스 속성을 사용해서 아이콘 사용함

  • 아이콘 크기 변경하기 위해 fa-숫자x를 class 속성에 추가

    • ex. 2배크기로 키우려면 fa-2x 추가

      <i class="fas fa-camera fa-2x"></i>
      

• 아이콘 검색하기

  • http://fontawesome.com/icons
  • Ctrl+f 로 검색가능한 사이트
    • http://fontawesome.com/cheatsheet