Skip to content

Instantly share code, notes, and snippets.

@mike-moreau
Created December 16, 2024 19:46
Show Gist options
  • Select an option

  • Save mike-moreau/28a55cdb115e291f0eb6ed71bd0ad51b to your computer and use it in GitHub Desktop.

Select an option

Save mike-moreau/28a55cdb115e291f0eb6ed71bd0ad51b to your computer and use it in GitHub Desktop.
Non-blocking web font rendering for performance based on Craft CMS .env vars
{# Non-blocking Web Fonts - check to ensure display:swap is also used #}
{% if getenv('ADOBE_FONTS_URL') %}
<link rel="preconnect" href="https://use.typekit.net" crossorigin>
<link rel="preconnect" href="https://p.typekit.net" crossorigin>
<link rel="preload" href="{{ getenv('ADOBE_FONTS_URL') }}" as="style">
<link rel="stylesheet" href="{{ getenv('ADOBE_FONTS_URL') }}" media="print" onload="this.media = 'all'" />
<noscript>
<link rel="stylesheet" href="{{ getenv('ADOBE_FONTS_URL') }}">
</noscript>
{% endif %}
{% if getenv('GOOGLE_FONTS_URL') %}
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" as="style" href="{{ getenv('GOOGLE_FONTS_URL') }}">
<link rel="stylesheet" href="{{ getenv('GOOGLE_FONTS_URL') }}" media="print" onload="this.media = 'all'">
<noscript>
<link rel="stylesheet" href="{{ getenv('GOOGLE_FONTS_URL') }}">
</noscript>
{% endif %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment