lxgw-wenkai-webfont

A webfont package for the LXGW WenKai typeface.

For more information about the typeface, see LXGW WenKai's website.

Usage

Use NPM

First, install the package via npm or yarn.

npm install --save lxgw-wenkai-webfont
# or Lite version
npm install --save lxgw-wenkai-lite-webfont
# or TC version
npm install --save lxgw-wenkai-tc-webfont
# or Screen version
npm install --save lxgw-wenkai-screen-webfont

Then import style.css to your main css style file and update the font-family.

@import 'lxgw-wenkai-webfont/style.css';
/* Lite version */
@import 'lxgw-wenkai-lite-webfont/style.css';
/* TC version */
@import 'lxgw-wenkai-tc-webfont/style.css';
/* Screen version */
@import 'lxgw-wenkai-screen-webfont/style.css';
body {
  font-family: "LXGW WenKai", sans-serif;
  /* Lite version */
  font-family: "LXGW WenKai Lite", sans-serif;
  /* TC version */
  font-family: "LXGW WenKai TC", sans-serif;
  /* Screen version */
  font-family: "LXGW WenKai Screen", sans-serif;
}

/* Mono font (optional) */
pre,code {
  font-family: "LXGW WenKai Mono", sans-serif;
  /* Lite version */
  font-family: "LXGW WenKai Mono Lite", sans-serif;
  /* TC version */
  font-family: "LXGW WenKai Mono TC", sans-serif;
}

Use CDN

Put the jsDelivr <link> into your html head, then update the font-family.

<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/style.css" />
  <!-- Lite version -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/style.css" />
  <!-- TC version -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/style.css" />
  <!-- Screen version -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/style.css" />
  <style>
    body {
      font-family: "LXGW WenKai", sans-serif;
      /* Lite version */
      font-family: "LXGW WenKai Lite", sans-serif;
      /* TC version */
      font-family: "LXGW WenKai TC", sans-serif;
      /* Screen version */
      font-family: "LXGW WenKai Screen", sans-serif;
    }
  </style>
</head>
<body>
  <!-- blablabla -->
</body>
</html>

Use specific font weights

You can also include specific weights if you don't want to use all the font weights or don't want to use mono font. For example:

@import 'lxgw-wenkai-webfont/lxgwwenkai-regular.css';
@import 'lxgw-wenkai-webfont/lxgwwenkai-bold.css';
body {
  font-family: "LXGW WenKai", sans-serif;
}

Lite version and TC version also support the same way. To know what css modules are available, please check out the npm package.

License

lxgw-wenkai-webfont © Chawye Hsu. Released under the MIT License. The LXGW WenKai typeface is available under the SIL Open Font License 1.1 license.

Blog · GitHub @chawyehsu · Twitter @chawyehsu

Package Rankings

Top 5.06% on Npmjs.org

Badges

Extracted from project README