Skip to content
Submitted almost 2 years ago

first solution using CSS flexbox and google font API

BeubRunner•10
@BeubRunner
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

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
    @htmlarsPosted almost 2 years ago

    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•10
    @BeubRunnerPosted over 1 year ago

    @htmlars thanks for your help

    0

Please log in to post a comment

Log in with GitHub

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