To Use Local Font in HTML Using Font Face

To use local font in HTML using font face

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>

How could I use local fonts in website

Paste all these font formates in your css folder otf/ttf/woff.

Add in your stylesheet:-

@font-face {
font-family: 'MTCORSVA';
src: url('./MTCORSVA.eot');
src: local('MTCORSVA'), url('./MTCORSVA.woff') format('woff'), url('./MTCORSVA.ttf') format('truetype');
}

now use this to apply font family font-family: 'MTCORSVA';

@font-face src: local - How to use the local font if the user already has it?

If you want to check for local files first do:

@font-face {
font-family: 'Green Sans Web';
src:
local('Green Web'),
local('GreenWeb-Regular'),
url('GreenWeb.ttf');
}

There is a more elaborate description of what to do here.

font-face for local fonts

Your update is still wrong. You need the following:

@font-face {
font-family: 'myOwnFontSet';
src: local('Verdana'), local('Arial'), local(sans-serif); }

How to add some non-standard font to a website?

This could be done via CSS:

<style type="text/css">
@font-face {
font-family: "My Custom Font";
src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
p.customfont {
font-family: "My Custom Font", Verdana, Tahoma;
}
</style>
<p class="customfont">Hello world!</p>

It is supported for all of the regular browsers if you use TrueType-Fonts (TTF), the Web Open Font Format (WOFF) or Embedded Opentype (EOT).



Related Topics



Leave a reply



Submit