How to introduce external fonts into a mini program

Preface:

In actual projects, sometimes we may need to use artistic fonts, so how do we introduce third-party artistic fonts?

(Learning video sharing: Programming video)

Artistic font as shown in the picture:

Specific implementation :

Of course, you can also use WeChat API wx.loadFontFace directly. Please check the official sample document for details.

Introduce a set of third-party fonts (I only provide the third-party fonts shown in the picture above), there are many font libraries on the Internet. Write custom font styles in CSS files. transfer.

Specific demonstration code:

<view class="main-title">店内自取</view>

/* 字体封装 */
@font-face {
  font-family: "blod";
  src: url('https://static.heytea.com/taro_trial/v1/font/WenYue-XinQingNianTi-NC-W8_1.otf');
}
/* END */

/* 使用 */
.main-title {
  font-family: 'blod';
  font-size: 55rpx;
  padding-bottom: 20rpx;
}
/* END */

Achievement effect:

##Related recommendations:

Small program development tutorial

The above is the detailed content of How to introduce external fonts into a mini program. For more information, please follow other related articles on the PHP Chinese website!