Skip to content
Submitted about 3 years ago

Solution Using TailWind CSS and Grid

Mario Hernandez•180
@Ryoma1512
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

This is my first project using a framework

  • I have problem adding google fonts, i saw some videos about it but i can't add it.

Please, feel free to say some tips to improve

Community feedback

  • Account deleted

    Hi,

    On google fonts it shown how to add a font in two ways, either by html <link> or an import in css, and that link in the readme file takes you to it.

    Marked as helpful
    0
  • Rodrigo Coreas•0
    @WildOne777Posted about 3 years ago

    You will do a 2-3 step process with the last step as a helpful way to archive/refer to fonts used.

    STEP ONE:

    Go to Google Fonts and choose one or more families of fonts. every time you add a font family, the engine will generate an updated instance of the code(html/css) you will need. You will copy and paste the code generated and place them in the appropriate documents pertaining to your site. Below is an example of code I generated using (1)one font family.

    (html) <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@200&display=swap" rel="stylesheet">

    (css) font-family: 'Tajawal', sans-serif;

    STEP TWO (two-part step)

    part 1(html) paste the html code into the <head></head> section of your html document: ex:

    <head>

    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@200&display=swap" rel="stylesheet">

    <head>

    This is kind of like directing the document to a stylesheet that is hosted on Google Fonts rather than one stored in your site's directory.

    part 2(CSS) paste the CSS code in whichever selector/element/class/id you desire it's content's font to be expressed as such:

    ex.

    .class { font-family: 'Tajawal', sans-serif; }

    Result: Your content's text should display the desired typeface, given that font's browser or OS compatibility. I will dare to say that most fonts on Google Fonts are for the most part safe.

    STEP THREE(optional)

    create a .txt file called Fonts, font-families, or whatever you like and begin to save all fonts you have found and implemented throughout all your projects in that text file and store it appropriately within your drive, aka within a folder in your computer that is for web site design/dev. only. You might find yourself in need of that code again and this will save lots of time.

    example of what that file would look like:

    FF1:

    html -

    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@200&display=swap" rel="stylesheet">

    css -

    font-family: 'Tajawal', sans-serif;

    Boom, you have a database of fonts.

    I certainly hope this helps.

    0

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