Frontend Mentor - QR code component solution

This is a solution to the QR code component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

Screenshot

Links

• Frontend Mentor solution
• GitHub repository
• Live Site

My process

The challenge for this project was to get QR code component looking as close to the design as possible, based on the following assets:

• Figma design files
• Mobile & desktop layouts
• Style guide with colors and fonts
• Optimized image assets
• HTML file with pre-written contents

Built with

• Semantic HTML5 markup
• Self-hosted static web fonts

What I learned

For this challenge, I took a deep dive into web sustainability best practices for custom web fonts.

The font family for this project is Outfit. It is available as a variable font with weight as the variable axis and as static fonts. I opted to use static fonts. The project uses only two font weights, regular 400 and bold 700. The gain in performance from using the variable font would be minimal at best, and static fonts have better browser support.

I used the Font Subsetter by Everything Fonts to select only Basic Latin glyphs within the Unicode range U+0020 to U+007E. These 85 glyphs are usually enough for English-only websites. Subsetting the fonts reduced the file size from 55kb each for the two original TTF files to 18kb each for the TTF subsets.

To convert the TTF file format to WOFF and WOFF2, I used the ttf to woff converter and the ttf to woff2 converter, both by Everything Fonts. The file conversions further reduced the file size to 11kb for the WOFF subsets, and 9kb for the WOFF2 subsets.

In the @font-face declarations in the CSS style sheet, I listed the WOFF2 files followed by the WOFF files. Browsers will go down the list until they find a file they can use.

@font-face {
  font-family: "Outfit";
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/Outfit-Regular-subset.woff2") format("woff2"), url("./fonts/Outfit-Regular-subset.woff")
      format("woff");
}

@font-face {
  font-family: "Outfit";
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/Outfit-Bold-subset.woff2") format("woff2"), url("./fonts/Outfit-Bold-subset.woff")
      format("woff");
}

I decided not to include the local() function in the font-face declaration to look for local font files. The probability for Outfit to be installed as a local font on the user's device is rather small.

In this project, both font weights are 'above the fold'. I decided to preload the WOFF2 files for both fonts. The browser will use the type attribute to check if it supports the format and only download the files if it does, ignoring them if not.

<link
  rel="preload"
  href="./fonts/Outfit-Bold-subset.woff2"
  as="font"
  type="font/woff2"
  crossorigin="anonymous"
/>
<link
  rel="preload"
  href="./fonts/Outfit-Regular-subset.woff2"
  as="font"
  type="font/woff2"
  crossorigin="anonymous"
/>

Continued development

I want to continue focusing on sustainable web development in future projects and explore more web sustainability best practices.

Useful resources

• Self-hosting fonts explained (including Google fonts) // @font-face tutorial by Kevin Powell - This 16-minute video explains the basics of self-hosting custom web fonts. It covers getting fonts from Google fonts, converting from TTF to WOFF and WOFF2, adding fonts to a project, and setting up the font-face declaration in CSS.
• The performance cost of custom web fonts, and how to solve it by Wholegrain Digital - This article from the year 2019 was the starting point for my deep dive into web sustainability best practices for custom web fonts.
• A guide to subsetting fonts by sustainable.dev - This article is a brief step-by-step guide to subsetting web fonts with FontSquirrel's Webfont Generator.
• Webfont Generator by Font Squirrel - The Expert option offers fine-grained controls for subsetting fonts and converting the font format in one go, and works with more than one file at a time. It is much more convenient than Everything Fonts. Unfortunately, it didn't work with the original TTF font files I had.
• How to load web fonts for the best page load performance by sustainable.dev - This article gives detailed instructions how to pre-load font files, use the correct font-face declaration, and avoid invisible text during font loading.

Author

I'm an aspiring web developer and a former chemist. What I bring from chemistry to software development is a systematic approach to problem solving and the perseverance to not give up easily.

• Frontend Mentor - @SabineEmden
• Personal Website - Sabine Emden
• Mastodon - @sabineemden

Acknowledgements

This project uses Josh Comeau's CSS reset.

I want to thank Kagan MacTane for the very thorough code review he gave me after I posted a link to my solution on Mastodon.