Skip to content
Submitted almost 3 years ago

HTML and CSS

accessibility, cube-css, foundation
Daniel Agofure•10
@DanielAgofure
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

How can I upload fonts from google?

Code

Please log in to post a comment

Log in

Community feedback

  • Adriano•42,870
    @AdrianoEscarabote

    Hi Daniel Agofure, how are you?

    I really liked the result of your project, but I have some tips that I think you will like:

    A tip I give you to know how to use custom fonts in css, read this article: click here

    1- Page should contain a level-one heading click here

    2- Document should have one main landmark, you could have put all the content inside the main tag click here

    3- <html> element must have a lang attribute click here

    I noticed that the content was not centered, to fix this I did the following:

    body { display: flex; align-items: center; justify-content: center; min height: 100vh; }

    There is a file called style-guide.md in it it has all the colors and fonts that were used in the development of the project, it comes along with the images.

    the rest is great!

    Hope it helps...👍

  • kxnzx•870
    @kxnzx

    Hello Daniel,

    The name of the font family that is required to use in this challenge is named "Outfit" in the weights Regular (400) and Bold (700).

    • Go to https://fonts.google.com/ and type in the name of the font family in the search bar
    • Click on the font family and scroll down. You will see a list with all the font weights
    • Click on the plus + to select the font weight you need, it will be added on the menu on the right side
    • You'll see two radio buttons with <link> and <import> on the right side on that menu. Select <import> and copy the following link: @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');
    • Place the this @import link inside your css file. Now you're ready to use the font family in your styles
  • Elaine•11,360
    @elaineleung

    Hi Daniel, about your question regarding Google Fonts, simple click on the link in the style guide that's in the challenge zip file, and once you're in the font's Google page, click on the font weights that were listed in the style guide. After that, copy the link that's appears in the sidebar, and past that link in your head tag. You also have the option to use import in your CSS, and that is also fine. The key is to make sure you use one of these methods and that you use the appropriate one. After adding the link to your file, just use it by adding the name of the font to the appropriate selector in the CSS, like this:

    body {
  font-family: // name of font here
}

    One last comment I have in looking at your code: Try not to use the huge margins to position your element The best way is just to use either flexbox or grid in the body selector.

    Great work on the whole!

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