3편까지 쓸 생각은 없었지만 조금 보안해야겠다는 생각에 보안을 하고 3편을 작성하게 되었다.

단순히 font-face 만 만들어주니 뭔가 기능이 부족하다 생각하였고 각 폰트의 font-weight, font-display 같은 font style 을 주려고 하다보니 고민이 많이 되었다.

그러다가 config.json 같은 파일을 만들어서 명세를 적으면 그에 따라 해주면 좋겠다라는 생각이 들어서 바로 개발을 진행 하게 되었다.

config.json

일단 컨셉은 기본적인 dir, output, font weight offset, font style 을 명세할 수 있도록 해야겠다고 생각했다.
그래서 결론부터 말하자면 다음과 같다.

{
  "dir" // 파싱하기 위한 폰트들을 모아놓은 font dir
  "weight" // font weight offset
  "style" // 추가적인 font style
  "output" // font.css output dir
}

그러고 만약 config.json 대신 다른 json 방식으로 하고 싶으면 그 json 파일을 불러올 수 있도록 -c, --config 옵션을 받을 수 있도록도 추가하였다.

데모 및 결론

{
  "dir": "fonts", // Specify the directory to parse
  "weight": {
    // font-weight offset
    "Thin": 100,
    "Light": 300,
    "Regular": 400
  },
  "style": {
    // Additional font style
    "font-display": "swap"
  },
  "output": "dist" // Specify the output directory
}

위와 같이 json 파일이 있다고 가정하면 generate 한 font.css 파일은 다음과 같이 generate 된다.

@font-face {
  font-family: 'FontName';
  src: url('fonts/FontName.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'FontNameWithWeight';
  src: url('fonts/FontNameWithWeight-Thin.woff2') format('woff2');
  font-weight: 100;
  font-display: swap;
}

@font-face {
  font-family: 'FontNameWithWeight';
  src: url('fonts/FontNameWithWeight-Light.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: 'FontNameWithWeight';
  src: url('fonts/FontNameWithWeight-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

특이한 점이 weight 인데 각 weight 에 key (Thin, Light, Regular) 에 따라서 value (100, 300, 400) 을 font-weight 에 적어주도록 하였다.
또한 style 부분은 단순하게 font style 로 붙여주도록 변경하였다.
만약 style 을 다음과 같이 명세하면...

{
  style: {
    "font-display": "swap",
    "line-height": 30
  }
}

font.css 파일에는 다음과 같이 단순하게 추가가 된다.

@font-face {
  font-family: 'FontName';
  src: url('fonts/FontName.woff2') format('woff2');
  font-display: swap,
  line-height: 30
}

조금 더 다양한 기능이 들어가고 실제 font-face 정의시에 필요한 부분들을 적용할 수 있게 기능을 업그레이드 한것이다.
조금 더 기능을 추가하거나 같이 발전시키고 싶으면 누구나 참여하면 좋을것 같다. 그게 오픈소스에 장점 이지 않나 싶다 ㅎㅎ (제발 해달라는 말임 ㅋㅋㅋ)

gen-font-face

• 참고로 물론 당연하게도 node package 에 추가하여 npm run, yarn 명령어로도 실행할 수 있다!