Skip to content
Submitted 12 months ago

Margin

pstar8•260
@pstar8
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

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

Community feedback

  • Uwuigbe Julius Osemwengie•380
    @Call4juliusPosted 12 months ago

    To use an online font:

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

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

    1
  • Sailmaster91•140
    @Sailmaster91Posted 12 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');

    1

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