DEFAULT

NORMAL TEXT:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem donec massa sapien faucibus et molestie ac feugiat.

LIGHT TEXT:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem donec massa sapien faucibus et molestie ac feugiat.

ITALIC TEXT:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem donec massa sapien faucibus et molestie ac feugiat.

BOLD TEXT:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem donec massa sapien faucibus et molestie ac feugiat.

LIGHT ITALIC TEXT:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem donec massa sapien faucibus et molestie ac feugiat.

BOLD ITALIC TEXT:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem donec massa sapien faucibus et molestie ac feugiat.

.normal-text { font-style: normal; font-weight: normal; }
.light-text { font-style: normal; font-weight: light; }
.italic-text { font-style: italic; font-weight: normal; }
.bold-text { font-style: normal; font-weight: bold; }
.light-italic-text { font-style: italic; font-weight: light; }
.bold-italic-text { font-style: italic; font-weight: bold; }

WRONG APPROACH

NORMAL TEXT (Sansation):

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem donec massa sapien faucibus et molestie ac feugiat.

LIGHT TEXT (Sansation):

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem donec massa sapien faucibus et molestie ac feugiat.

ITALIC TEXT (Sansation):

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem donec massa sapien faucibus et molestie ac feugiat.

BOLD TEXT (Sansation):

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem donec massa sapien faucibus et molestie ac feugiat.

LIGHT ITALIC TEXT (Sansation):

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem donec massa sapien faucibus et molestie ac feugiat.

BOLD ITALIC TEXT (Sansation):

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem donec massa sapien faucibus et molestie ac feugiat.

.normal-text { font-style: normal; font-weight: normal; }
.light-text { font-style: normal; font-weight: light; }
.italic-text { font-style: italic; font-weight: normal; }
.bold-text { font-style: normal; font-weight: bold; }
.light-italic-text { font-style: italic; font-weight: light; }
.bold-italic-text { font-style: italic; font-weight: bold; }
@font-face {
font-family: "Sansation-Regular";
src: url("Sansation-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Sansation-Italic";
src: url("Sansation-Italic.ttf") format("truetype");
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: "Sansation-Bold";
src: url("Sansation-Bold.ttf") format("truetype");
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: "Sansation-BoldItalic";
src: url("Sansation-BoldItalic.ttf") format("truetype");
font-weight: bold;
font-style: italic;
}
@font-face {
font-family: "Sansation-LightItalic";
src: url("Sansation-LightItalic.ttf") format("truetype");
font-weight: light;
font-style: italic;
}
.normal-text.sansation-wrong {font-family: 'Sansation-Regular'; }
.light-text.sansation-wrong {font-family: 'Sansation-Light'; }
.italic-text.sansation-wrong {font-family: 'Sansation-Italic'; }
.bold-text.sansation-wrong {font-family: 'Sansation-Bold'; }
.light-italic-text.sansation-wrong {font-family: 'Sansation-LightItalic'; }
.bold-italic-text.sansation-wrong {font-family: 'Sansation-BoldItalic'; }

CORRECT APPROACH

NORMAL TEXT (Sansation):

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem donec massa sapien faucibus et molestie ac feugiat.

LIGHT TEXT (Sansation):

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem donec massa sapien faucibus et molestie ac feugiat.

ITALIC TEXT (Sansation):

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem donec massa sapien faucibus et molestie ac feugiat.

BOLD TEXT (Sansation):

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem donec massa sapien faucibus et molestie ac feugiat.

LIGHT ITALIC TEXT (Sansation):

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem donec massa sapien faucibus et molestie ac feugiat.

BOLD ITALIC TEXT (Sansation):

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem donec massa sapien faucibus et molestie ac feugiat.

.normal-text { font-style: normal; font-weight: normal; }
.light-text { font-style: normal; font-weight: light; }
.italic-text { font-style: italic; font-weight: normal; }
.bold-text { font-style: normal; font-weight: bold; }
.light-italic-text { font-style: italic; font-weight: light; }
.bold-italic-text { font-style: italic; font-weight: bold; }
@font-face {
font-family: "Sansation";
src: url("Sansation-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Sansation";
src: url("Sansation-Italic.ttf") format("truetype");
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: "Sansation";
src: url("Sansation-Bold.ttf") format("truetype");
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: "Sansation";
src: url("Sansation-BoldItalic.ttf") format("truetype");
font-weight: bold;
font-style: italic;
}
@font-face {
font-family: "Sansation";
src: url("Sansation-LightItalic.ttf") format("truetype");
font-weight: light;
font-style: italic;
}
.sansation { font-family: "Sansation"; }