发表新帖
发表新帖

To use local font in HTML using font face

后端 未结
关注
3 1263
傲寒
傲寒 2020-12-29 08:25

I trying to use local font to apply styles in html, below is the code.Font is not getting applied for harlow class used element
相关标签:
3条回答
  • 伪装坚强ぢ
    2020-12-29 08:49

    Use font face in all the format types according to the browser compatibility

    - Just add bellow code before all the styling of your css file and then you can use this font family for any selector inside within your css file.

    @font-face {
         font-family: 'CustomHeading';
         src: url('./fonts/SFAtarianSystem.ttf') format('embedded-opentype'), /* Internet Explorer */
         url('./fonts/SFAtarianSystem.ttf') format('woff2'), /* Super Modern Browsers */
         url('./fonts/SFAtarianSystem.ttf') format('woff'), /* Pretty Modern Browsers */
         url('./fonts/SFAtarianSystem.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('./fonts/SFAtarianSystem.ttf') format('svg'); /* Legacy iOS */
}
    0 讨论(0)
  • 野趣味
    2020-12-29 08:56

    I made the following changes and I got the result

    • Quotation marks for font-family
    • Using of URL instead of local
    • Changing of "\" to "/"

    Note: Use of the local css function throws an error in the developer console saying resource is not loaded. See the modified code below.

    <!DOCTYPE html>
<html>
<head>
<style>
@font-face {
    font-family: "myFirstFont";
    src: url("C:/Users/Desktop/Website/fonts/Harlow_Solid_Italic.ttf");
}

.harlow {
    font-family: "myFirstFont";
}
</style>
</head>
<body>
<div>With CSS3, websites can finally use fonts other than the pre selected "web-safe" fonts.</div>
<p><b class="harlow">Note:</b> Internet Explorer 8 and earlier, do not support the @font-face rule with the WOFF format (only support for EOT format).</p>
</body>
</html>

    0 讨论(0)
  • 别跟我提以往
    2020-12-29 09:00

    Use the correct path for file. your path does not work on the host. because your host has no drive 'c:/...' or anythings like this. so you can use 

    <!DOCTYPE html>
<html>
<head>
<style>
@font-face {
    font-family: myFirstFont;
    src:url("/fonts/Harlow_Solid_Italic.ttf");
}

.harlow{
    font-family: myFirstFont;
}
</style>
</head>
<body>
<div>With CSS3, websites can finally use fonts other than the pre selected "web-safe" fonts.</div>
<p><b class="harlow">Note:</b> Internet Explorer 8 and earlier, do not support the @font-face rule with the WOFF format (only support for EOT format).</p>
</body>
</html>
    0 讨论(0)
 看不清?
提交回复
热议问题