Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

first solution using CSS flexbox and google font API

@BeubRunner

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Thx for that first challenge, it was fun

I had some difficulties with the google font import and some CORS issues. I solved it add a link to google font API in the index.html header and using @font-face into my style.css file. Do I really need to do both ?

Community feedback

Lars 60

@htmlars

Posted

Hey, first of all congratulations on beating this challenge!

In order to add custom fonts to your webpage, you can add the @import code provided on https://fonts.google.com/ to the top of your css. In this case it would be:

@import url('https://fonts.googleapis.com/css2 family=Outfit:wght@400;700&display=swap');

Next, you simply want to declare the font-family in lets say your body tag like this:

font-family: 'Outfit', sans-serif;

Done. The font will now apply to every text that you put on your webpage. If you only want it to apply to certain parts, make sure to declare it in a specific tag that is not the body tag. Gl

Marked as helpful

0

@BeubRunner

Posted

@htmlars thanks for your help

0

Please log in to post a comment

Log in with GitHub
Discord logo

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