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:

店内自取

/* 字体封装 */ @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:

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!