Submitted over 1 year ago

Mobile-first solution using CSS Flexbox

Ibrahim Herith• 150

@ibrahimherith

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

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

@SYEDUMAIR007

Posted over 1 year ago

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

Always have a main section in your HTML file. (You could replace your section tag with the main tag)
Try using rems or ems to set font size instead of pixels.
Use min-width instead of max-width, and always use percentages as units to set the size of the containers as well as elements.
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

Ibrahim Herith• 150

@ibrahimherith

Posted over 1 year ago

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

Melvin Aguilar 🧑🏻‍💻• 61,220

@MelvinAguilar

Posted over 1 year 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

Ibrahim Herith• 150

@ibrahimherith

Posted over 1 year ago

@MelvinAguilar Thanks for your feedback Melvin. Happy coding!

Kaio Murillo• 50

@Drimzart

Posted over 1 year ago

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

Example:

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

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

Marked as helpful

Ibrahim Herith• 150

@ibrahimherith

Posted over 1 year ago

@Drimzart Hello Kaio, Thanks for your feedback.

Please log in to post a comment

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