This week I’ve published a Liquid project for loading web-fonts in a respectful fashion. Check the documentation for detailed getting started and usage instructions, the source code is available on GitHub. What follows is the TLDR for installation and usage…

Clone/Install

cd <your-project>


mkdir -p _includes/modules


git submodule add -b main\
                  --name includes-font\
                  'https://github.com/liquid-utilities/includes-font.git'\
                  '_includes/modules/includes-font'

Usage

Example YAML/FrontMatter

fonts_list:
  - href: assets/fonts/custom-font.css
    preconnect: /
    filter: relative_url

  - href: https://fonts.googleapis.com/css2?family=Merriweather&display=swap
    preconnect: https://fonts.gstatic.com

Example Layout

page.html (snip)

<!DOCTYPE html>
<html lang="en">
  <head>
    </head>
</html>

Example Output

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="preconnect"
          href="/project-name"/>

    <link rel="preload"
          as="style"
          href="/project-name/assets/fonts/custom-font.css"/>

    <link rel="stylesheet"
          href="/project-name/assets/fonts/custom-font.css"
          media="print"
          onload="this.media='all'"/>

    <noscript>
      <link rel="stylesheet"
            href="/project-name/assets/fonts/custom-font.css"/>
    </noscript>


    <link rel="preconnect"
          href="https://fonts.gstatic.com"
          crossorigin/>

    <link rel="preload"
          as="style"
          href="https://fonts.googleapis.com/css2?family=Merriweather&display=swap"/>

    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css2?family=Merriweather&display=swap"
          media="print"
          onload="this.media='all'"/>

    <noscript>
      <link rel="stylesheet"
            href="https://fonts.googleapis.com/css2?family=Merriweather&display=swap"/>
    </noscript>
  </head>
</html>

Note, provided that your site is configured properly the /project-name/ portion of above href paths will be replaced automagically with the name of your repository.