Skip to content
OverviewSolutions
0
Comments
1
Rodrigo Coreas
@WildOne777

All comments

  • Mario Hernandez•180
    @Ryoma1512Submitted about 3 years ago

    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

    Solution Using TailWind CSS and Grid

    2
    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