Search code examples
cssfont-facewebfonts

How to load a custom web font face from my server using <link href=... format inside the header tags

I don't want the render blocking of declaring a custom font using @font-face, so I've tried to copy how my google font CDN font is loaded for my custom server font, arriving at this:

    <noscript id="deferred-styles">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" type="text/css">
  <link href="../BluuNext-master/Fonts/webfonts/bluunext-bold-webfont.woff2?family=bluuNext" rel="stylesheet" type="text/css">
</noscript>

But it does not work.

I've tried changing href for src="../Bluu... But that didn't work.

I've tried omitting the type, since woff2 isn't text/css.

It's important, I'm not willing to block my page load for a 35kb font file, and there's no CDN for BluuNext, so I need to find a performant way to make this work or I'll just be resigned to a beiger website.

RIGHT!

I've tried the answers below, possibly they work for other fonts but not BluuNext. Perhaps other fonts maybe come in configurations beyond bold, unlike BluuNext, so maybe that causes the issue.

It IS possible to load BluuNext font, but so far only with render blocking @font-face method, loading betwixt the tags.

Here's a minimum example including a few of the proposed solutions not working...

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:fb="http://ogp.me/ns/fb#">
  <head>
    <title>Bluu Next test</title>

<link rel="preload" as="style" href="../BluuNext-master/Fonts/webfonts/bluunext-bold-webfont.woff2?family=bluuNext:bold"  />
<link rel="stylesheet" href="../BluuNext-master/Fonts/webfonts/bluunext-bold-webfont.woff2?family=bluuNext" media="print" onload="this.media='all'">
<link rel="stylesheet" media="print" onload="this.media='all'" href="../BluuNext-master/Fonts/webfonts/bluunext-bold-webfont.woff2?family=bluuNext:bold"  type="text/css" />
    
<noscript id="deferred-styles">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="../BluuNext-master/Fonts/webfonts/bluunext-bold-webfont.woff2?family=bluuNext:bold" type="text/css"/>
</noscript>

<script type="text/javascript">
    // Load CSS
    var loadDeferredStyles = function() {
        var addStylesNode = document.getElementById("deferred-styles");
        var replacement = document.createElement("div");
        replacement.innerHTML = addStylesNode.textContent;
        document.body.appendChild(replacement)
        addStylesNode.parentElement.removeChild(addStylesNode);
    };
    var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
    else window.addEventListener('load', loadDeferredStyles);
</script>

<style>
    h2{font-family: bluuNext; font-size: 3em;}
</style>
</head><body>
<h2>Is this Bluu Next?</h2> 
  </body>
</html>

You can see some fancy javascript governing the loading of id="deferred-styles", that came at the suggestion of Google lighthouse and works well for Google's CDN fonts, not working for BluuNext so far.

Here's the link to download BluuNext, a lovely gothic, serif font. CLICK THE DOWNLOAD ARROW TOP RIGHT.

I'd love some ideas. I'd love to use this particular font, which is for some reason seemingly resistant to existing solutions.

Solution

  • You can not load a font directly in HTML, you need help of CSS for this. And if you open the google font link you will be able to see how it's done.

    https://fonts.googleapis.com/css?family=Roboto:300,400,500

    This url is a css file not a font file. Open it and you will understand how google used @font-face to load the font.

    Here is the documentation from mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face