Submitted 10 months ago

Margin

pstar8• 150

@pstar8

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

How do I use an online font? I tried using @fontface feature but it didn't work out.

Community feedback

Uwuigbe Julius Osemwengie• 380

@Call4julius

Posted 10 months ago

To use an online font:

go to fonts.google.com
search the font you want to use by typing the name in the search field
Once you are the font type, click on it and then you will be shown various font-weight (thickness) of the font.
select the various font-weight you would like for your project by clicking the "+" icon at the end of each font.
finally look at the right hand pane, you will find an online url link for the font/s you just selected.
copy and paste the link in the <head> tag of your html
That's it, you can start using the font-family in your css to style.

Marked as helpful

Lakshmi susmitha• 50

@susmitha168

Posted 10 months ago

You can check the style guide under the project for the font family. Use Google fonts for the font family

Sailmaster91• 140

@Sailmaster91

Posted 10 months ago

You can try this too: go to GoogleFont.

Pick the font that you like and select de method @import copy and paste in your css in first line, without the tags

Example: @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Lexend+Deca&family=Red+Hat+Display:wght@500;700;900&display=swap');

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