To use local font in HTML using font face

问题

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

<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
    font-family: myFirstFont;
    src:local("C:\Users\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>

回答1:

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>

回答2:

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>

来源：https://stackoverflow.com/questions/38086083/to-use-local-font-in-html-using-font-face

标签

html

css

font-face