Submitted 9 months ago

Responsive QR Code Page Using CSS3 and HTML5

Clever Gambe• 120

@cgambe

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

Had a problem with the Google fonts online. I was not able to use font-weight when included from the CDN. But when I downloaded them and included them locally the font-weight property started to work properly.

Am sure this is not a good approach since it will slow down the page's loading speed. So, in the next projects I will try to use the ones from the CDN and figure out why the weights are not working on them.

Community feedback

Agnik Bakshi• 480

@Agnik7

Posted 9 months ago

Hi, I think I know why the font weight was not working. When importing Google Fonts, you need to select the font weights as well. For example, A ROBOTO font will have different options, like 300 light, regular 400, bold 700 etc. You need to select all the font-weight you plan on using. Then you don't need to download the font pack, it will work with the cdn only.

Hope this helps solve your issue.

Happy Coding!!

Marked as helpful

Clever Gambe• 120

@cgambe

Posted 9 months ago

@Agnik7 Thanks a lot, but I did select 400 and 700 but it was still not working.

Agnik Bakshi• 480

@Agnik7

Posted 9 months ago

@cgambe Were you writing

font-weight: bold;

font-weight: 700;

Clever Gambe• 120

@cgambe

Posted 9 months ago

@Agnik7 font-weight: 700;

Agnik Bakshi• 480

@Agnik7

Posted 9 months ago

@cgambe how were you importing it? Using <link> or @import?

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