Quick Example & Demo
<style>
@font-face {
font-family: Operator Symbols;
font-style: normal;
font-weight: 400;
src: url(https://www.typography.com/fonts/woff2/OperatorSSm-BookItalic-Pro_Web.woff2) format("woff2"),url(https://www.typography.com/fonts/woff/OperatorSSm-BookItalic-Pro_Web.woff) format("woff");
unicode-range: U+e10c
}
@font-face {
font-family: Operator SSm Light;
font-style: normal;
font-weight: 400;
src: url(https://www.typography.com/fonts/woff2/OperatorSSm-Light-Pro_Web.woff2) format("woff2"),url(https://www.typography.com/fonts/woff/OperatorSSm-Light-Pro_Web.woff) format("woff")
}
@font-face {
font-family: Operator SSm Medium;
font-style: normal;
font-weight: 400;
src: url(https://www.typography.com/fonts/woff2/OperatorSSm-Medium-Pro_Web.woff2) format("woff2"),url(https://www.typography.com/fonts/woff/OperatorSSm-Medium-Pro_Web.woff) format("woff")
}
@font-face {
font-family: Operator SSm Medium Italic;
font-style: normal;
font-weight: 400;
src: url(https://www.typography.com/fonts/woff2/OperatorSSm-MediumItalic-Pro_Web.woff2) format("woff2"),url(https://www.typography.com/fonts/woff/OperatorSSm-MediumItalic-Pro_Web.woff) format("woff")
}
@font-face {
font-family: Operator Mono SSm Book;
font-style: normal;
font-weight: 400;
src: url(https://www.typography.com/fonts/woff2/OperatorMonoSSm-Book_Web.woff2) format("woff2"),url(https://www.typography.com/fonts/woff/OperatorMonoSSm-Book_Web.woff) format("woff")
}
@font-face {
font-family: Operator Mono SSm Book Italic;
font-style: normal;
font-weight: 400;
src: url(https://www.typography.com/fonts/woff2/OperatorMonoSSm-BookItalic_Web.woff2) format("woff2"),url(https://www.typography.com/fonts/woff/OperatorMonoSSm-BookItalic_Web.woff) format("woff")
}
@font-face {
font-family: Operator Mono SSm Bold;
font-style: normal;
font-weight: 400;
src: url(https://www.typography.com/fonts/woff2/OperatorMonoSSm-Bold_Web.woff2) format("woff2"),url(https://www.typography.com/fonts/woff/OperatorMonoSSm-Bold_Web.woff) format("woff")
}
@font-face {
font-family: Operator Mono SSm Bold Italic;
font-style: normal;
font-weight: 400;
src: url(https://www.typography.com/fonts/woff2/OperatorMonoSSm-BoldItalic_Web.woff2) format("woff2"),url(https://www.typography.com/fonts/woff/OperatorMonoSSm-BoldItalic_Web.woff) format("woff")
}
* {font-family: 'Operator Mono SSm Book Italic'; font-size: 30pt;}
.OperatorSymbols {font-family: "Operator Symbols";}
.OperatorSSmLight {font-family: "Operator SSm Light";}
.OperatorSSmMedium {font-family: "Operator SSm Medium";}
.OperatorSSmMediumItalic {font-family: "Operator SSm Medium Italic";}
.OperatorMonoSSmBook {font-family: "Operator Mono SSm Book";}
.OperatorMonoSSmBookItalic {font-family: "Operator Mono SSm Book Italic";}
.OperatorMonoSSmBold {font-family: "Operator Mono SSm Bold";}
.OperatorMonoSSmBoldItalic {font-family: "Operator Mono SSm Bold Italic";}
</style>
<p>Hello Praveen Kumar, I’m Operator Mono!</p>
<p class="OperatorSymbols">Hello Praveen Kumar, I’m Operator Symbols!</p>
<p class="OperatorSSmLight">Hello Praveen Kumar, I’m Operator SSm Light!</p>
<p class="OperatorSSmMedium">Hello Praveen Kumar, I’m Operator SSm Medium!</p>
<p class="OperatorSSmMediumItalic">Hello Praveen Kumar, I’m Operator SSm Medium Italic!</p>
<p class="OperatorMonoSSmBook">Hello Praveen Kumar, I’m Operator Mono SSm Book!</p>
<p class="OperatorMonoSSmBookItalic">Hello Praveen Kumar, I’m Operator Mono SSm Book Italic!</p>
<p class="OperatorMonoSSmBold">Hello Praveen Kumar, I’m Operator Mono SSm Bold!</p>
<p class="OperatorMonoSSmBoldItalic">Hello Praveen Kumar, I’m Operator Mono SSm Bold Italic!</p>Demo: JSBin
