Symptom
The custom font registered via the @ohos.font.registerFont API fail to display correctly when their corresponding family is set in the WebView component. Setting the font-family property in the DOM style within the WebView H5 page is also ineffective.
Solution
Place the font file in the rawfile directory of the project, use @font-face in the HTML5 code to specify the custom font for displaying text, and configure the font-family attribute in the specified element that requires the custom font.
HTML5 side:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Document</title>
<style>
@font-face {
font-family: 'MaoKenWangXingYuan';src: url('./MaoKenWangXingYuan.ttf');
}
#title {
font-family: 'MaoKenWangXingYuan';
}
</style>
</head>
<body>
<h1 id="title">MaoKenWangXingYuan-Regular</h1>
</body>
</html>