Skip to content
Submitted almost 2 years ago

Mobile-first solution using CSS Flexbox

Ibrahim Herith•150
@ibrahimherith
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

Hello, what is the best practice between adding google fonts links in html file and in css file?

Community feedback

  • Syed Umair•180
    @SYEDUMAIR007Posted almost 2 years ago

    Hi Ibrahim, I have a couple of suggestions for you to improve your code:

    1. Always have a main section in your HTML file. (You could replace your section tag with the main tag)
    2. Try using rems or ems to set font size instead of pixels.
    3. Use min-width instead of max-width, and always use percentages as units to set the size of the containers as well as elements.
    4. The best practice concerning google fonts is always to add the HTML link given in google forms eg: ( <link rel="preconnect" href="https://fonts.googleapis.com">)into your head of the HTML file and the CSS link in the CSS file eg:(@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@500;600&display=swap');). Hope you like my feedback, thank you for reading!!!
    Marked as helpful
    1
    Ibrahim Herith•150
    @ibrahimherithPosted almost 2 years ago

    @SYEDUMAIR007 Hello Syed, thanks for your feedback I found it very helpful.

    0
  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted almost 2 years ago

    Hello there 👋. Good job on completing the challenge !

    The best practice is to add the Google Fonts link in the HTML file, as this will ensure that the font is loaded before any other content on the page. This will help to ensure that the font is displayed correctly and quickly. Additionally, adding the link in the HTML file will also help with SEO, as search engines can more easily detect and index fonts when they are included in the HTML.

    Happy coding!

    Marked as helpful
    0
    Ibrahim Herith•150
    @ibrahimherithPosted almost 2 years ago

    @MelvinAguilar Thanks for your feedback Melvin. Happy coding!

    0
  • Kaio Murillo•50
    @DrimzartPosted almost 2 years ago

    you need to copy the link and put in the <head> of your HTML

    Example:

    <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=Fraunces:opsz,[email protected],700&display=swap" rel="stylesheet">

    after this you can use the font-family in your css file.

    Example: font-family: 'Fraunces', serif;

    Marked as helpful
    0
    Ibrahim Herith•150
    @ibrahimherithPosted almost 2 years ago

    @Drimzart Hello Kaio, Thanks for your feedback.

    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