Создание сложных стилей для списков со встроенными шрифтами и динамическим содержимым

Демонстрация работы дополнительных символов для задания стилей нумерованному списку, адаптация примера из урока Dudley Storey, специально для сайта dejurka.ru

HTML

<div id="catsteeth">
<h2>Смена зубов у котят</h2>
<ol>
<li>Появление зубов в 2-12 недель</li><li>Смена молочных зубов в 3-5 месяцев</li><li>Формирование коренной зубной системы в 5-8 месяцев</li></ol>
</div>

CSS

@font-face {
		font-family: 'Libertad Book';
		src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/TipoType_-_Libertad-Book.woff') format('woff');
		font-style: normal;
		font-weight: 400;
		}
#catsteeth {
    width: 80%;
    background: none repeat scroll 0% 0% #E8E2E2;
    margin: 0px auto;
    border: 2px solid;
    padding: 2rem;
}
#catsteeth h2 {
    margin-top: 0px;
}
ol {
    list-style-type: none;
}
article ol li:before {
    position: absolute;
    margin-left: -2.7rem;
    margin-top: -.7rem;
    font-size: 2rem;
    font-weight: 100;
}
ol li:nth-child(1):before {
    content: '\2460';
}
ol li:nth-child(2):before {
    content: '\2461';
}
ol li:nth-child(3):before {
    content: '\2462';
}