昭源黑體及宋體均提供適用於網頁的網頁字型 (webfont) 版本，只須載入相關的 CSS 檔案再在 stylesheet 指定字體即可使用。
WOFF2_OTF 目錄下的網頁字型是 OTF 檔的子集版，涵蓋整個 Big-5/HKSCS-2016 字集，其餘為《康熙字典》字頭、特殊粵語專用字等。日本平假/片假名屬於 HKSCS 字集，亦有收入。網頁字型針對繁體中文用途，不支援簡體中文、諺文等。至於 WOFF2_TTF 目錄下的網頁字型則是 TrueType 檔的子集版，特性和 OTF 版本相同。
根據安裝頁面的指示下載字體壓縮檔並解壓縮後，WOFF2_OTF/ 及 WOFF2_TTF 目錄內的就是昭源字體網頁字型，用家可按需要選擇使用任一版本。下文以 WOFF2_OTF/ 為例。
字體屬可變式字型格式，因此只需載入「正體」(WOFF2_OTF/css/vf.css) 及「斜體」(WOFF2_OTF/css/vf-italic.css) 兩個 CSS 檔案（用家可按需要決定是否載入斜體），就可以任意調整字重。
順帶一提，WOFF2_OTF/ 目錄內的 demo/ 子目錄有兩個 HTML 檔案，分別使用正體和斜體字型印出所有網頁字型的覆蓋字元，作為應用示範。
本字體亦備有 npm 套件可供使用（宋體，黑體）。安裝方法如下：
# 安裝宋體字型
npm install chiron-sung-hk-webfont
# 安裝黑體字型
npm install chiron-hei-hk-webfont然後就可以在適當位置載入樣式檔，例如：
@import '~chiron-sung-hk-webfont/css/vf.css'; // 宋體正體
@import '~chiron-sung-hk-webfont/css/vf-italic.css'; // 宋體斜體
@import '~chiron-hei-hk-webfont/css/vf.css'; // 黑體正體
@import '~chiron-hei-hk-webfont/css/vf-italic.css'; // 黑體斜體本字體亦提供 TrueType 外框格式的 Webfont 檔案，套件名稱分別是 chiron-sung-hk-webfont-truetype 及 chiron-hei-hk-webfont-truetype。
# 安裝宋體字型 (TrueType outline)
npm install chiron-sung-hk-webfont-truetype
# 安裝黑體字型 (TrueType outline)
npm install chiron-hei-hk-webfont-truetype@import '~chiron-sung-hk-webfont-truetype/css/vf.css'; // 宋體正體
@import '~chiron-sung-hk-webfont-truetype/css/vf-italic.css'; // 宋體斜體
@import '~chiron-hei-hk-webfont-truetype/css/vf.css'; // 黑體正體
@import '~chiron-hei-hk-webfont-truetype/css/vf-italic.css'; // 黑體斜體除了下載字型檔，網頁開發者也可以利用 jsDelivr 提供的免費 CDN 服務使用昭源黑體網頁字型。方法如下：
vf.css / vf-italic.css）。使用者可以同時加入不同專案的 CSS 檔案，換言之可以同時將宋體、黑體的正體和斜體加入。<link> 標籤，並在樣式表的 font-family 指定字體家族即可。以下是簡單用例。
body {
/* 黑體的字體家族名稱是 "Chiron Hei HK WS"，宋體是 "Chiron Sung HK WS" */
font-family: "Chiron Sung HK WS";
/* 指定字重。由於是 VF 字型，字重值可在 250 至 900 間任意調整 */
font-weight: 310;
/* 如有載入斜體就可以通過 “font-style: italic” 宣吿在中英混排時使用真正的斜體英數字 */
font-style: normal;
/* 指定「字面調整軸」變化，有效值為 0 至 10 之間，Text 分支字面率等同本軸的 “6” */
font-variation-settings: "PADG" 4; /* 意即將字面縮小 2% */
}