How to Use Custom Fonts in Hyvä theme?

General

Hyva Tutorials
-
General
-
How to Use Custom Fonts in Hyvä theme?

There are multiple methods to integrate a custom font into the theme, each viable.

However, if implemented without due diligence, it may adversely affect Google ranking metrics.

The impact on performance is contingent not solely on the inclusion method but also on factors such as server setup and caching configuration. Generally, the disparities in performance among the choices are minimal, occasionally scarcely perceptible within the typical Pagespeed fluctuations.

Tailwind configuration

Irrespective of the method employed for adding font files, it is imperative to utilize the font within your CSS files by specifying the font-family, such as font-family: ‘Inter’,.

To integrate it with Tailwind, include the font in your tailwind.config.js file. Refer to the Tailwind documentation for various methods to declare the font, especially for utilizing it as the default font-sans, for example:

Copy Code

theme: {
   extend: {
     fontFamily: {
       sans: ['Roboto', ...defaultTheme.fontFamily.sans]
    }
  }
}

To enable this functionality, it’s essential to import the defaultTheme object. Insert the following at the beginning of the file to accomplish this:

Copy Code

const defaultTheme = require('tailwindcss/defaultTheme');

Google fonts

When choosing a Google Font on fonts.google.com, an initial implementation is provided by default:

Copy Code

<head>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect"href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">

   <!-- Occasionally, certain Google Fonts may fail to load through the link tag, prompting the need to apply CSS directly through the 'src' attribute.-->
   <css src="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet" type="text/css" />
</head>

You can incorporate a slightly modified version in your Magento_Theme/layout/default_head_blocks.xml file.

Please be aware that in the URL, the ampersand is represented as the HTML & notation.

Copy Code

<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet" type="text/css" src_type="url">

To include the preconnect resources, append a custom block to the head.

For example:

Copy Code

<referenceBlock name="head.additional">
   <block class="Magento\Framework\View\Element\Text" name="custom.fonts">
       <arguments>
           <argument name="text" xsi:type="string">
               <![CDATA[
               <link rel="preconnect" href="https://fonts.googleapis.com">
               <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
               ]]>
           </argument>
       </arguments>
   </block>
</referenceBlock>

New to Hyvä?? Learn about the Hyvä Theme from scratch!

Local font files

You have the flexibility to employ custom font files or utilize downloaded Google font files, incorporating them directly from your web server.

Utilize @font-face CSS rules to officially register the desired fonts and specify the precise location of the font files.

For Example:

Copy Code

@font-face {
   font-family: 'Inter';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url(../fonts/Inter-Bold.woff2) format('woff2');
}

Each variant within the font family, distinguished by differences in font-weight and font-style, necessitates its individual declaration. It’s important to note that these declarations do not trigger automatic font loading. The font is loaded exclusively when referenced in the CSS through the ‘font-family’ property, such as ‘font-family: “Inter”;’ or by applying the corresponding Tailwind CSS class.

Although there were previously various formats for font files (.ttf, .otf, .eot), it is now advisable to exclusively utilize woff2 or woff files.

To implement this, follow these steps:

Place the font files into a ‘fonts/’ directory within your theme’s ‘web/’ folder.
Integrate the @font-face styles into a CSS file, such as ‘web/tailwind/components/typography.css’.
Ensure the accuracy of the file paths. Given that the generated CSS file will reside in ‘web/css,’ references to ‘../fonts/’ will correctly point to ‘web/fonts/’.

Preloading/preconnect

It is commonly advised to preload fonts utilized in the above-the-fold content to optimize delivery speed, minimizing the potential for layout shifts.

To preload local fonts, incorporate the following snippet into the <head> section of your Magento_Theme/layout/default_head_blocks.xml file:

Copy Code

<font src="fonts/inter.woff2"/>

This action preloads the specified URL. When employing files containing multiple font formats, it is preferable to utilize preconnect. To implement this, you need to employ a custom block:

Copy Code

<referenceBlock name="head.additional">
   <block class="Magento\Framework\View\Element\Template"
          name="custom.fonts"
          template="Magento_Theme::head.phtml" />
</referenceBlock>

Where in head.phtml you can use something like:

Copy Code

<link rel="preconnect” href="<?= $block->getViewFileUrl('fonts/inter.woff2') ?>">

Diverse perspectives exist regarding the use of preloading. Conduct thorough testing in your environment to confirm that it yields the intended results.

That’s it !!

Thanks & Happy Coding!

Read more resources on Hyva themes: