[CSS] Set font face to display specified font

 CSS   font-face   font-family

▌Introduction

---

Sometimes we would like to apply new font on our SPA website for better UI for end-users.

The @font-face CSS at-rule allows us to specify the online font(s) and display them on the website.

In this article, we will set the css to display globally the specified fonts by @font-face and set font-family.

▌Implement

---

▋Copy the font into Website

For example, I would like to use the PingFangTC (萍方繁體字型) -> PingFangSC (萍方簡體字型) on my website.

▋CSS

Define the location of the font inside @font-face and set font-family:

▋set-font-face.css

@font-face {

  font-family: 'PingFangTC';

  src: url("./assets/fonts/PingFang-TC/PingFangTC.ttf") format('truetype');

  font-weight: normal;

  font-style: normal;

}

@font-face {

  font-family: 'PingFangSC';

  src: url("./assets/fonts/PingFang-SC/PingFangSC.ttf") format('truetype');

  font-weight: normal;

  font-style: normal;

}

* {

  font-family: "Arial","PingFangTC","PingFangSC";

}

▋Import globally

<link rel="stylesheet" type="text/css" href="../set-font-face.css"  />

Or for example, import the CSS file in main.ts in Vue CLI

import './set-font-face.css';

Result:

▌Reference

---

▋CSS 網頁字型 @font-face 使用教學與範例