Skip to content
Submitted over 2 years ago

Mobile-first solution using CSS Flexbox

Ibrahim Herith•170
@ibrahimherith
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

Code

Please log in to post a comment

Log in

Community feedback

  • Syed Umair•180
    @SYEDUMAIR007

    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
  • Melvin Aguilar 🧑🏻‍💻•61,020
    @MelvinAguilar

    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
  • Kaio Murillo•50
    @Drimzart

    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,wght@9..144,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

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