About Googles Font and material icons [ Curious Coders]

Fonts & icons

Introduction to google font

How to use ?

More about google fonts

introduction to material + icons

How to use Material + icons ?

more about material + icons

Created by ANMOL

Introduction to google font

We all use so many fonts to make aur website look beautiful . Now there are soo many fonts you can use to decorate your web codes these fonts are supported by google. in this code you will learn about how to use google fonts in your web page . You can see this code letters are good then normal fonts the font which is used in this code is "Cairo" . Real website of google font https://fonts.google.com/

Hello im in Cairo
hello im in Tangerine

How to use ?

For using google font we have to use <link>. this tag is used in <head>

  <html> 
                
      <head> 
                    
            <title> 
                    
             page title
                       
              </title> 
                        
            <link href='https://fonts.googleapis.com/css?family=Cairo' rel='stylesheet'>
                                    
          </head> 
                      
                <body>
                         
                    <style> body{ font-family:'Cairo'; } </style> 
                            
                    <p> hello world </p> 
                        
               </body> 
                          
      </html>

How to copy link

For getting link of font you can visit W3.school.com website click the link to go and visit

More about google fonts

as you can see different inputs have different style of fonts you can use more than one fonts in your webpage for that you have to use their links too . you can know their font names in this link W3.school.com.fonts

Hope you will like my tutorial if you feel some problems you can ~ comment in this code

©ANMOL 2021

introduction to material + icons

You always see so many icons in webpage like a symbol of menu, back arrow , help , star , hearts etc; you know these are easy to use in our webpage and these are supported by google. in this tutorial we will learn about material + icons

How to use material + icons

How To Use ?

You can use material + icons by using <link> tag and you have to place link tag in <head> tag

You have to use

Every material icons have their name and you have to write correct names of them else they will not appear

Material icons are generally placed in tag and tag but you can use them in any inline element. you have to write like example below :-

     <html> 
                
        <head> 
                    
            <title>          
             page title         
             </title> 
                        
        <link href=https://fonts.googleapis.com/icon?family=Material+Icons rel='stylesheet'>
                                    
       </head> 
                      
            <body>
                            
                    <i class="material-icons"> menu </i> 
                    
           </body> 
                          
     </html>

output :-

You have to use a class name "material-icons" in any inline element. and tag are generally used .

you have to write its name in center of any inline tag like :- help

How To Know Icons Name

You can visit https://material.io/resources/icons/ website to know names of every icons that are available

more about material + icons

You can use so many icons in your webpage note :- the default size of material icons are 24px

Although the material icons can be scaled to any size, the recommended font-size is either 18, 24, 36 or 48px:

you can change the color too same like the texts you write in codes

you can aslo visit https://www.w3schools.com/icons/google_icons_intro.asp to know about materials + icons

⭐📒About google fonts and icons 📖