Search code examples
htmlcssfontsfont-facetruetype

Local font-face for Chinese fonts does not apply to the text

I want to serve local Chinese fonts to the browser, but it does not seem that chrome or firefox load them. What might have gone wrong here?

I have tried writing the path in various ways - absolute/relative paths, but it still won't work. Network tab of chrome doesn't seem to reflect loading any local font files.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="font_face_index.css">
</head>
<body>
    <svg width="800" height="400">
        <text font-family='5' font-size="20px" y="50" x="50">咬释征巩个第涉景试为工给期催音足疗牛</text>
    </svg>

    <h2 style="font-family:'KaiTi';">咬释征巩个第涉景试为工给期催音足疗牛</h2> 
</body>
</html>

////////////////////// font_face_index.css /////////////////////

@font-face{font-family:"0";font-style:normal;font-weight:400;src:url("subset_fonts_chinese_2700_glyphs/A Li Da Slender Bold Elegant Chinese Font -Simplified Chinese Fonts.ttf")format("ttf");}
@font-face{font-family:"1";font-style:normal;font-weight:400;src:url("subset_fonts_chinese_2700_glyphs/Aa Aquarius Chinese Font-Simplified Chinese Fonts.ttf")format("ttf");}
@font-face{font-family:"2";font-style:normal;font-weight:400;src:url("subset_fonts_chinese_2700_glyphs/Aa Devil May Cry Art Chinese Font – Simplified Chinese Fonts.ttf")format("ttf");}
@font-face{font-family:"3";font-style:normal;font-weight:400;src:url("subset_fonts_chinese_2700_glyphs/Aa Energetic Cute Chinese Font – Simplified Chinese Fonts.ttf")format("ttf");}
@font-face{font-family:"4";font-style:normal;font-weight:400;src:url("subset_fonts_chinese_2700_glyphs/Aa Pisces Bubble Chinese Font-Simplified Chinese Fonts.ttf")format("ttf");}
@font-face{font-family:"5";font-style:normal;font-weight:400;src:url("subset_fonts_chinese_2700_glyphs/Accompany you forever Font-Simplified Chinese.ttf")format("ttf");}

'KaiTi' that is locally installed on my machine is working whereas the text defaults to whatever the default font is. (I have tried all of the fonts listed here).

Solution

  • For Windows system, use escape character in the file name, or rewrite with hyphens.

    For example:

    @font-face {
    font-family: 'A-Li-Da-Slender';
    src: url(font/A-Li-Da-Slender-Bold-Elegant-Chinese-Font-Simplified-Chinese-Fonts.ttf);
}

    or

    @font-face {
    font-family: 'A-Li-Da-Slender';
    src: url(font/Aa\ Aquarius\ Chinese\ Font-Simplified\ Chinese\ Fonts.ttf);
}