@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 200;
  src: url('OpenSans-Light.eot'); /* IE9 Compat Modes */
  src: url('OpenSans-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('OpenSans-Light.woff') format('woff'), /* Modern Browsers */
    url('OpenSans-Light.ttf')  format('truetype'), /* Safari, Android, iOS */
    url('OpenSans-Light.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 200;
  src: url('OpenSans-LightItalic.eot'); /* IE9 Compat Modes */
  src: url('OpenSans-LightItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('OpenSans-LightItalic.woff') format('woff'), /* Modern Browsers */
    url('OpenSans-LightItalic.ttf')  format('truetype'), /* Safari, Android, iOS */
    url('OpenSans-LightItalic.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('OpenSans-Regular.eot'); /* IE9 Compat Modes */
  src: url('OpenSans-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('OpenSans-Regular.woff') format('woff'), /* Modern Browsers */
    url('OpenSans-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
    url('OpenSans-Regular.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url('OpenSans-Italic.eot'); /* IE9 Compat Modes */
  src: url('OpenSans-Italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('OpenSans-Italic.woff') format('woff'), /* Modern Browsers */
    url('OpenSans-Italic.ttf')  format('truetype'), /* Safari, Android, iOS */
    url('OpenSans-Italic.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('OpenSans-Semibold.eot'); /* IE9 Compat Modes */
  src: url('OpenSans-Semibold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('OpenSans-Semibold.woff') format('woff'), /* Modern Browsers */
    url('OpenSans-Semibold.ttf')  format('truetype'), /* Safari, Android, iOS */
    url('OpenSans-Semibold.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  src: url('OpenSans-SemiboldItalic.eot'); /* IE9 Compat Modes */
  src: url('OpenSans-SemiboldItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('OpenSans-SemiboldItalic.woff') format('woff'), /* Modern Browsers */
    url('OpenSans-SemiboldItalic.ttf')  format('truetype'), /* Safari, Android, iOS */
    url('OpenSans-SemiboldItalic.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('OpenSans-Bold.eot'); /* IE9 Compat Modes */
  src: url('OpenSans-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('OpenSans-Bold.woff') format('woff'), /* Modern Browsers */
    url('OpenSans-Bold.ttf')  format('truetype'), /* Safari, Android, iOS */
    url('OpenSans-Bold.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: url('OpenSans-BoldItalic.eot'); /* IE9 Compat Modes */
  src: url('OpenSans-BoldItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('OpenSans-BoldItalic.woff') format('woff'), /* Modern Browsers */
    url('OpenSans-BoldItalic.ttf')  format('truetype'), /* Safari, Android, iOS */
    url('OpenSans-BoldItalic.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  src: url('OpenSans-ExtraBold.eot'); /* IE9 Compat Modes */
  src: url('OpenSans-ExtraBold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('OpenSans-ExtraBold.woff') format('woff'), /* Modern Browsers */
    url('OpenSans-ExtraBold.ttf')  format('truetype'), /* Safari, Android, iOS */
    url('OpenSans-ExtraBold.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 800;
  src: url('OpenSans-ExtraBoldItalic.eot'); /* IE9 Compat Modes */
  src: url('OpenSans-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('OpenSans-ExtraBoldItalic.woff') format('woff'), /* Modern Browsers */
    url('OpenSans-ExtraBoldItalic.ttf')  format('truetype'), /* Safari, Android, iOS */
    url('OpenSans-ExtraBoldItalic.svg#svgFontName') format('svg'); /* Legacy iOS */
}

p{
  font-family: 'Open Sans';
  font-size: 13px;
  line-height: 1.35;
}
.charContainer{
  display: inline-block;
  background: #c0c0c0;
  width: 80px;
  text-align: center;
  margin: 5px;
  padding: 0;
  border: 1px solid #000;
  border-radius: 10px;
}
.charContainer > p{
  display: inline-block;
  font-size: 30px;
  background: #a0a0a0;
}

.font100 { font-weight: 100; }
.font200 { font-weight: 200; }
.font300 { font-weight: 300; }
.font400 { font-weight: 400; }
.font500 { font-weight: 500; }
.font600 { font-weight: 600; }
.font700 { font-weight: 700; }
.font800 { font-weight: 800; }
.font900 { font-weight: 900; }
.italic { font-style: italic; }