Loading an External Font via Inline CSS

Loading an external font via inline CSS

Is it possible loading an external font with inline css? NOT with an external CSS file [....].

Yes, you can base64 encode a font or fonts as shown in this article from Stephen Scaff and drop them into a style block in your page to avoid the external request.

It may also be possible to use this technique in the way you describe if the browser you're using supports it.

<style>
  @font-face {
    font-family: 'PT Sans';
    font-style: normal;
    font-weight: normal;
    src: local('PT Sans'), local('PTSans-Regular'),
      url(data:application/font-woff2;charset=utf-8;base64,d09GRgABAAAAAHowABMAAAAA+OAA) format('woff2');
  }
  @font-face {
    font-family: 'PT Serif';
    font-style: normal;
    font-weight: normal;
    src: local('PT Serif'), local('PTSerif-Regular'),
      url(data:application/font-woff2;charset=utf-8;base64,d09GRgABAAAAAIQYABMAAAAA/MAA) format('woff2');
  }
</style>

Every modern browser supports WOFF2, so you should probably use that and only that for the foreseeable future. Also, this technique will improve your page speed scores, but will degrade performance overall (even for first page loads), unless you're only base64-encoding critical page assets (e.g. glyphs of the font shown above the fold) and asynchronously load the rest.

Performance-wise your best bet right now is to use Brotli compression and pipe the webfont stylesheet down with HTTP/2 Server Push.

How to use @face-font inline as inline style specifications?

Put them in a style element placed inside the head element, e.g.

<!doctype html>
<title>Your title</title>
<style>
  /* put your CSS code here */
</style>
<h1>Hello world</h1>

If you cannot set elements into the head part (as you might be, when compositing email in HTML format, depending on the composing program), then you could try putting the style element inside the body. That would be invalid, but it still works in browsers.

Whether email clients will recognize it and use a downloadable font is a different issue – and depends on the client.

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>

Inline Custom CSS Fonts In HTML5

Stick this in the style tags:

@font-face {
font-family: MinecrafterReg;
src: url(MinecrafterReg.ttf);
font-weight:400;

Then stick this in the h1 tag:

<h1 style="text-align: center; font-family: MinecrafterReg">Welcome to Ben's Minecraft</h1>

Loading an External Font via Inline CSS