@Font-Face Src: Local - How to Use the Local Font If the User Already Has It

@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.

CSS @font-face - what does src: local('☺') mean?

if you read the notes in font-squirrel's font-face generator, you'll see that it was a gotcha by paul irish.

Here is the excerpt from his blog post:

And.. regarding @font-face syntax

I now recommend the bulletproof smiley variation over the original bulletproof syntax.
@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('☺'),
       url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}
From the bulletproof post:

Yes, it's a smiley face. The OpenType spec indicates any two-byte unicode characters won't work in a font name on Mac at all, so that lessens the likelihood that someone actually released a font with such a name.

There are a few reasons why smiley is a better solution:

Webkit+Font Management software can
mess up local references, like
turning glyphs into A blocks.

On OS X, Font Management software may
alter system settings to show a
dialog when trying to access a
local() font that's accessible
outside of Library/Fonts. More detail
on my bulletproof post.
Font Explorer X is
also known to mess up other stuff in
Firefox.

Although it's unlikely, you could
reference a local() font which is
completely different than what you
think it is. (Typophile post on
different fonts, same name) At the
very least its a risk, and you're
ceding control of the type to both
the browser and host machine. This
risk may not be worth the benefit of
avoiding the font download.

These are all pretty edge case issues, but it's worth considering.

@font-face only working if the font is installed on the local machine

It's looking like Your browser has a problem with understanding the font file. Try to make the webfont package from the font file. There is lot of tools to approach it:

https://www.fontsquirrel.com/tools/webfont-generator

Webfont package will contain the font in all major supported formats and will generate the css @font directive for You.

DISCLAIMER: Ensure that You have the rights to use the font.

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>

@font-face not working locally but works when linked externally

local() accepts locally installed fonts' system identifier, not path to file, see: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face#specifying_local_font_alternatives

@font-face only working locally

@font-face does not allow multiple src properties. Shrink it down like this:

@font-face {
  font-family: BigNoodleTitling;
  src: url('../Files/Fonts/big_noodle_titling.eot?#iefix') format('embedded-opentype'),
       url('../Files/Fonts/big_noodle_titling.woff2') format('woff2'),
       url('../Files/Fonts/big_noodle_titling.woff') format('woff'),
       url('../Files/Fonts/big_noodle_titling.ttf') format('truetype'),
       url('../Files/Fonts/big_noodle_titling.svg#svgFontName') format('svg'),
       local('BigNoodleTitling');
}

// part of old answer:

Remove the ../ and it should work, since Files and style.css are both on root level.

If your font files are still not working, try using FontSquirrel to generate your font package.

@Font-Face Src: Local - How to Use the Local Font If the User Already Has It