css import font code example

Example 1: how to import font awesome in html

<!-- Add this in your <head> tag -->
<link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.13.0/css/all.css"
      integrity="sha384-Bfad6CLCknfcloXFOyFnlgtENryhrpZCe29RTifKEixXQZ38WheV+i/6YWSzkz3V"
      crossorigin="anonymous"
    />

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: @font-face

@font-face {
 font-family: "The name of your font for your file";
 src: url("The link to your .ttf or .otf file");
}

Example 5: 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 6: font face html

@font-face { font-family: 'meine-schrift';
             src: url('pfad/zu/meinerschrift.ttf') format('truetype'); }

Tags:

Html Example

Recent Posts