css web fonts code example

Example 1: otf css3 font-face

@font-face {
    font-family: GraublauWeb;
    src: url("path/GraublauWeb.otf") format("opentype");
}

Example 2: import font css

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}

Example 3: how to link fonts css

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

div {
  font-family: myFirstFont;
}
/*Name the font-family and link the font file in the @font-face rule*/

Example 4: how to link fonts css

@import url(//fonts.googleapis.com/css?family=Open+Sans);
/*When not hosting on my own server use the @import rule which is Google Fonts Versionn and hosted on their server*/

Example 5: how to add fonts like mac in your web page using html css

Browse google fonts and search for Roboto family 


go to google fonts: https://fonts.google.com
					/specimen/Roboto?selection.family=Raleway:wght@200

add font with thickness 100

import link:<link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com
/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">



CSS rules to specify families( add the below code in your css files )

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