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. — castletheperson
– castletheperson, Commented Jun 28, 2016 at 20:54
use url instead of local, and wrap myFirstFont in quotation. — M.Tanzil
– M.Tanzil, Commented Jun 28, 2016 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 — castletheperson
– castletheperson, Commented Jun 28, 2016 at 21:02
Duplicate of several answered questions. This one's probably useful stackoverflow.com/questions/11812111/… — henry
– henry, Commented Jun 28, 2016 at 21:11

Philip Stratford · Accepted Answer · 2019-04-15 10:59:36Z

53

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>

edited Apr 15, 2019 at 10:59

Philip Stratford

4,8105 gold badges52 silver badges80 bronze badges

answered Jun 28, 2016 at 21:20

anavaras lamurep

1,5333 gold badges20 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user8390068 Over a year ago

You should change src:url("C:/path/to/ttf"); to src:url("file:///path/to/file").

Mark A. Donohoe · Accepted Answer · 2022-07-29 03:57:57Z

17

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

edited Jul 29, 2022 at 3:57

Mark A. Donohoe

30.8k29 gold badges165 silver badges317 bronze badges

answered May 6, 2020 at 17:42

wahsandaruwan

6896 silver badges7 bronze badges

Comments

MN. Vala · Accepted Answer · 2019-04-15 11:16:10Z

14

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>

answered Apr 15, 2019 at 11:16

MN. Vala

1491 silver badge7 bronze badges

Comments

Supreet Kumar · Accepted Answer · 2023-02-22 12:20:33Z

1

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, 2023 at 12:20

answered Feb 22, 2023 at 12:19

Supreet Kumar

112 bronze badges

Collectives™ on Stack Overflow

To use local font in HTML using font face

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related