Font CSS Global Config File example

예제 1

@font-face {
 font-family: 'NanumSquare';
 font-weight: 400;
 src: url(NanumSquareR.eot);
 src: local('☺'),
      url(NanumSquareR.eot?#iefix) format('embedded-opentype'),
      url(NanumSquareR.woff2) format('woff2'),
      url(NanumSquareR.woff) format('woff'),
      url(NanumSquareR.ttf) format('truetype');
}
@font-face {
 font-family: 'NanumSquare';
 font-weight: 700;
 src: url(NanumSquareB.eot);
 src: local('☺'),
      url(NanumSquareB.eot?#iefix) format('embedded-opentype'),
      url(NanumSquareB.woff2) format('woff2'),
      url(NanumSquareB.woff) format('woff'),
      url(NanumSquareB.ttf) format('truetype');
}
@font-face {
 font-family: 'NanumSquare';
 font-weight: 800;
 src: url(NanumSquareEB.eot);
 src: local('☺'),
      url(NanumSquareEB.eot?#iefix) format('embedded-opentype'),
      url(NanumSquareEB.woff2) format('woff2'),
      url(NanumSquareEB.woff) format('woff'),
      url(NanumSquareEB.ttf) format('truetype');
}
@font-face {
 font-family: 'NanumSquare';
 font-weight: 300;
 src: url(NanumSquareL.eot);
 src: local('☺'),
      url(NanumSquareL.eot?#iefix) format('embedded-opentype'),
      url(NanumSquareL.woff2) format('woff2'),
      url(NanumSquareL.woff) format('woff'),
      url(NanumSquareL.ttf) format('truetype');
}
/* AC */
@font-face {
 font-family: 'NanumSquareAc';
 font-weight: 400;
 src: url(NanumSquareAcR.eot);
 src: local('☺'),
      url(NanumSquareAcR.eot?#iefix) format('embedded-opentype'),
      url(NanumSquareAcR.woff2) format('woff2'),
      url(NanumSquareAcR.woff) format('woff'),
      url(NanumSquareAcR.ttf) format('truetype');
}
@font-face {
 font-family: 'NanumSquareAc';
 font-weight: 700;
 src: url(NanumSquareAcB.eot);
 src: local('☺'),
      url(NanumSquareAcB.eot?#iefix) format('embedded-opentype'),
      url(NanumSquareAcB.woff2) format('woff2'),
      url(NanumSquareAcB.woff) format('woff'),
      url(NanumSquareAcB.ttf) format('truetype');
}
@font-face {
 font-family: 'NanumSquareAc';
 font-weight: 800;
 src: url(NanumSquareAcEB.eot);
 src: local('☺'),
      url(NanumSquareAcEB.eot?#iefix) format('embedded-opentype'),
      url(NanumSquareAcEB.woff2) format('woff2'),
      url(NanumSquareAcEB.woff) format('woff'),
      url(NanumSquareAcEB.ttf) format('truetype');
}
@font-face {
 font-family: 'NanumSquareAc';
 font-weight: 300;
 src: url(NanumSquareAcL.eot);
 src: local('☺'),
      url(NanumSquareAcL.eot?#iefix) format('embedded-opentype'),
      url(NanumSquareAcL.woff2) format('woff2'),
      url(NanumSquareAcL.woff) format('woff'),
      url(NanumSquareAcL.ttf) format('truetype');
}

예제2)

@font-face {
    font-family: 'NanumSquare';
    font-weight: 300; 
    font-style: normal; 
    src: url(https://cdn.jsdelivr.net/gh/webfontworld/naver/NanumSquare_acL.woff2) format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'NanumSquare';
    font-weight: 400; 
    font-style: normal; 
    src: url(https://cdn.jsdelivr.net/gh/webfontworld/naver/NanumSquare_acR.woff2) format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'NanumSquare';
    font-weight: 500; 
    font-style: normal; 
    src: url(https://cdn.jsdelivr.net/gh/webfontworld/naver/NanumSquare_acB.woff2) format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'NanumSquare';
    font-weight: 700; 
    font-style: normal; 
    src: url(https://cdn.jsdelivr.net/gh/webfontworld/naver/NanumSquare_acEB.woff2) format('woff2');
    font-display: swap;
}

실제 사용

<link
            rel="stylesheet"
            type="text/css"
            href="https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@2.0/nanumsquare.css"
          />