Skip to content

Instantly share code, notes, and snippets.

@praveenscience
Last active August 3, 2025 19:30
Show Gist options
  • Select an option

  • Save praveenscience/cd2336477c0baf94a580d809de63041c to your computer and use it in GitHub Desktop.

Select an option

Save praveenscience/cd2336477c0baf94a580d809de63041c to your computer and use it in GitHub Desktop.
Operator Mono WebFont

Quick Example & Demo

Preview

<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

Back to Amazing Web Fonts from Praveen's Collection

@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")
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment