Skip to content
Submitted 7 months ago

QR code component solution using HTML and CSS

Ayodeji Elegbede•40
@Goodboy619
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)
Code

Please log in to post a comment

Log in

Community feedback

  • P
    finkusuma-dev•130
    @finkusuma-dev

    Hey, your solution is good overall. But I noticed that you haven't setup the font as described on the challenge. It's actually pretty simple, you can just follow these steps:

    1. Go to the Google Font page: https://fonts.google.com/specimen/Outfit (You can get this link on the style-guide.md). Click "Get Font" on the top right. Then click "Get Embedded Code".
    2. You will see the instruction to embed code, copy the code and put it on html head like this:
    <head>
  ...
  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <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=Outfit:wght@100..900&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="styles.css">
  <title>Frontend Mentor | QR code component</title>
</head>

    On the styles.css you can just use the font, and don't forget to add the fallback font as well. Fallback font is font that will be used when the font that we specified is not available. Such as when we use the Google Online Font, there might be problem with the internet connection, so the font fail to be downloaded. sans-serif is the fallback font on the example code below.

    body {
  font-family: Outfit, sans-serif;
}
    Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord