How to Use Custom Fonts in Hyvä theme?
Chapters Close

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:

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:

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

Google fonts

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

<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.

<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:

<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:

@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:

  1. Place the font files into a ‘fonts/’ directory within your theme’s ‘web/’ folder.
  2. Integrate the @font-face styles into a CSS file, such as ‘web/tailwind/components/typography.css’.
  3. 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:

<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:

<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:

<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:

  1. Check out the InstaBuild for Hyvä Themes: Ready-made Hyva theme templates for faster storefront development!
  2. Hyva Themes Development – For Online Merchants
  3. Hyvä Theme Benefits that your store needs
  4. 10 Best Hyva Compatibility Extension Providers For Magento 2 Stores
  5. Hyvä VS PWA: Where to Invest?
  6. How a Slow Magento Website Can Cost You Advertising Dollars
  7. Mobile Commerce: How Hyva Themes Boost Mobile Conversions
Speak your Mind

Post a Comment

Got a question? Have a feedback? Please feel free to leave your ideas, opinions, and questions in the comments section of our post! ❤️

* This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Grow your online business like 3,930 subscribers

    * This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.
    envelope

    Thank You!

    We are reviewing your submission, and will be in touch shortly.