To use local font in HTML using font face

Question

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>

`local` can't be used to access files by path. That would be a security flaw. You can only give the font name. First make sure the font is installed on your computer and not just downloaded. — 4castle, Jun 28 '16 at 20:54
Try that : font-family: "myFirstFont"; Font name must be in quotation marks. Check this one http://stackoverflow.com/questions/3698319/css-font-face-what-does-src-local-mean 4castle have right — , Jun 28 '16 at 20:54
use `url` instead of local, and wrap `myFirstFont` in quotation. — M.Tanzil, Jun 28 '16 at 20:57
@M.Tanzil Neither of those are necessary. Quotes are only needed when the font name contains a space. Look at some [examples](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face#Examples) — 4castle, Jun 28 '16 at 21:02
@Bálint The console won't always show CSS errors like that. Chrome didn't when I tested the code. — 4castle, Jun 28 '16 at 21:06
Duplicate of several answered questions. This one's probably useful http://stackoverflow.com/questions/11812111/font-face-url-pointing-to-local-file — henry, Jun 28 '16 at 21:11
You can't use `c:\path\file`, you need to use `file:///path/file` — Asons, Jun 28 '16 at 21:17

score 27 · Accepted Answer · edited Apr 15 '19 at 10:59

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>

You should change `src:url("C:/path/to/ttf");` to `src:url("file:///path/to/file")`. — Micheal O'Dwyer, Feb 11 '18 at 20:32

score 10 · Answer 2 · answered Apr 15 '19 at 11:16

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>

score 4 · Answer 3 · edited May 06 '20 at 18:40

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 */
}

To use local font in HTML using font face

3 Answers3

Linked