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 46 · 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 12 · 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 11 · Answer 3 · edited Jul 29 '22 at 03:57

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

Supreet Kumar · Answer 4 · 2023-02-22T12:20:33.063

0

You can do that with this code. I tried it on multiple sites and it worked pretty well.

@font-face {
  font-family: myFirstFont;
  src:url("D:\Files\Design\Fonts\SF-Pro-Text-Font-Family");
}

* {
  font-family: myFirstFont !important;
}

edited Feb 22 '23 at 12:20

answered Feb 22 '23 at 12:19

Supreet Kumar

1
1

To use local font in HTML using font face

4 Answers4

Linked