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

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

HTML

<div id="commoncats">
<h2>Распространенные породы кошек</h2>
<ul>
<li>Сибирская кошка</li><li>Британская короткошерстная кошка</li><li>Норвежская лесная кошка</li></ul>
</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;
		}
#commoncats {
    width: 80%;
    background: none repeat scroll 0% 0% #E8E2E2;
    margin: 0px auto;
    border: 2px solid;
    padding: 2rem;
}
#commoncons h2 {
    margin-top: 0px;
}
ul {
    list-style-type: none;
}
ul li:before {
    position: absolute;
    margin-left: -2.5rem;
    content: "\2192";
}