Cormorant Font Family

Use "Cormorant" font as a Webfont

You can create beautiful websites with great typography using the @font-face kit of Cormorant font. Webfont and @font-face supported all up-to-date browsers can use comfortably.

@font-face is very easy to use, click here to download Cormorant webfont kit. The following example will guide you to the css and html codes.

Ensuring the maximum cross browser typography support, WOFF (Web OpenFont Format) works with all up-to-date browsers. You can check the versions by clicking here.

Using this font on your website is your own legal responsibility. You can check the license information of the font.

@font-face kit

@font-face {
    font-family: 'Cormorant Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Cormorant Regular'), url('Cormorant-Regular.woff') format('woff');
}
@font-face {
    font-family: 'Cormorant Regular Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Cormorant Regular Italic'), url('Cormorant-RegularItalic.woff') format('woff');
}
@font-face {
    font-family: 'Cormorant Light';
    font-style: normal;
    font-weight: normal;
    src: local('Cormorant Light'), url('Cormorant-Light.woff') format('woff');
}
@font-face {
    font-family: 'Cormorant Light Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Cormorant Light Italic'), url('Cormorant-LightItalic.woff') format('woff');
}
@font-face {
    font-family: 'Cormorant Medium';
    font-style: normal;
    font-weight: normal;
    src: local('Cormorant Medium'), url('Cormorant-Medium.woff') format('woff');
}
@font-face {
    font-family: 'Cormorant Medium Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Cormorant Medium Italic'), url('Cormorant-MediumItalic.woff') format('woff');
}
@font-face {
    font-family: 'Cormorant Semi';
    font-style: normal;
    font-weight: normal;
    src: local('Cormorant Semi'), url('Cormorant-Semi.woff') format('woff');
}
@font-face {
    font-family: 'Cormorant Semi Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Cormorant Semi Italic'), url('Cormorant-SemiItalic.woff') format('woff');
}
@font-face {
    font-family: 'Cormorant Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Cormorant Bold'), url('Cormorant-Bold.woff') format('woff');
}
@font-face {
    font-family: 'Cormorant Bold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Cormorant Bold Italic'), url('Cormorant-BoldItalic.woff') format('woff');
}
@font-face {
    font-family: 'Cormorant Infant Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Cormorant Infant Regular'), url('CormorantInfant-Regular.woff') format('woff');
}
@font-face {
    font-family: 'Cormorant SC Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Cormorant SC Regular'), url('CormorantSC-Regular.woff') format('woff');
}
@font-face {
    font-family: 'Cormorant Unicase Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Cormorant Unicase Regular'), url('CormorantUnicase-Regular.woff') format('woff');
}
@font-face {
    font-family: 'Cormorant Upright Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Cormorant Upright Regular'), url('CormorantUpright-Regular.woff') format('woff');
}
@font-face {
    font-family: 'Cormorant Infant Light';
    font-style: normal;
    font-weight: normal;
    src: local('Cormorant Infant Light'), url('CormorantInfant-Light.woff') format('woff');
}
@font-face {
    font-family: 'Cormorant SC Light';
    font-style: normal;
    font-weight: normal;
    src: local('Cormorant SC Light'), url('CormorantSC-Light.woff') format('woff');
}
@font-face {
    font-family: 'Cormorant Unicase Light';
    font-style: normal;
    font-weight: normal;
    src: local('Cormorant Unicase Light'), url('CormorantUnicase-Light.woff') format('woff');
}
@font-face {
    font-family: 'Cormorant Upright Light';
    font-style: normal;
    font-weight: normal;
    src: local('Cormorant Upright Light'), url('CormorantUpright-Light.woff') format('woff');
}
@font-face {
    font-family: 'Cormorant Infant Medium';
    font-style: normal;
    font-weight: normal;
    src: local('Cormorant Infant Medium'), url('CormorantInfant-Medium.woff') format('woff');
}
@font-face {
    font-family: 'Cormorant SC Medium';
    font-style: normal;
    font-weight: normal;
    src: local('Cormorant SC Medium'), url('CormorantSC-Medium.woff') format('woff');
}
@font-face {
    font-family: 'Cormorant Unicase Medium';
    font-style: normal;
    font-weight: normal;
    src: local('Cormorant Unicase Medium'), url('CormorantUnicase-Medium.woff') format('woff');
}
@font-face {
    font-family: 'Cormorant Upright Medium';
    font-style: normal;
    font-weight: normal;
    src: local('Cormorant Upright Medium'), url('CormorantUpright-Medium.woff') format('woff');
}
@font-face {
    font-family: 'Cormorant Infant Semi';
    font-style: normal;
    font-weight: normal;
    src: local('Cormorant Infant Semi'), url('CormorantInfant-Semi.woff') format('woff');
}
@font-face {
    font-family: 'Cormorant SC Semi';
    font-style: normal;
    font-weight: normal;
    src: local('Cormorant SC Semi'), url('CormorantSC-Semi.woff') format('woff');
}
@font-face {
    font-family: 'Cormorant Unicase Semi';
    font-style: normal;
    font-weight: normal;
    src: local('Cormorant Unicase Semi'), url('CormorantUnicase-Semi.woff') format('woff');
}
@font-face {
    font-family: 'Cormorant Upright Semi';
    font-style: normal;
    font-weight: normal;
    src: local('Cormorant Upright Semi'), url('CormorantUpright-Semi.woff') format('woff');
}
@font-face {
    font-family: 'Cormorant Infant Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Cormorant Infant Bold'), url('CormorantInfant-Bold.woff') format('woff');
}
@font-face {
    font-family: 'Cormorant SC Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Cormorant SC Bold'), url('CormorantSC-Bold.woff') format('woff');
}
@font-face {
    font-family: 'Cormorant Unicase Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Cormorant Unicase Bold'), url('CormorantUnicase-Bold.woff') format('woff');
}
@font-face {
    font-family: 'Cormorant Upright Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Cormorant Upright Bold'), url('CormorantUpright-Bold.woff') format('woff');
}

sample html

<h3 style="font-family: 'Cormorant Regular'">Consequatur et velit sed non.</h3>
<h3 style="font-family: 'Cormorant Regular Italic'">Aut doloremque est et dolorem enim.</h3>
<h3 style="font-family: 'Cormorant Light'">Vel mollitia illum saepe quo vel veniam.</h3>
<h3 style="font-family: 'Cormorant Light Italic'">Sit porro labore assumenda.</h3>
<h3 style="font-family: 'Cormorant Medium'">Id vero veritatis culpa ut.</h3>
<h3 style="font-family: 'Cormorant Medium Italic'">Harum eligendi velit sit nesciunt dignissimos.</h3>
<h3 style="font-family: 'Cormorant Semi'">Ut quia et sit totam nobis doloribus ut.</h3>
<h3 style="font-family: 'Cormorant Semi Italic'">Quam sequi numquam consequatur et ducimus.</h3>
<h3 style="font-family: 'Cormorant Bold'">Sed ea enim occaecati quasi.</h3>
<h3 style="font-family: 'Cormorant Bold Italic'">Officia veritatis et non in et.</h3>
<h3 style="font-family: 'Cormorant Infant Regular'">Enim odit voluptas repellendus quidem cum totam.</h3>
<h3 style="font-family: 'Cormorant SC Regular'">Ab assumenda deserunt itaque sed.</h3>
<h3 style="font-family: 'Cormorant Unicase Regular'">Blanditiis blanditiis repellendus quia eveniet.</h3>
<h3 style="font-family: 'Cormorant Upright Regular'">Voluptatem libero minima rerum quod ipsam vel.</h3>
<h3 style="font-family: 'Cormorant Infant Light'">Modi nam id est consequuntur ut sit.</h3>
<h3 style="font-family: 'Cormorant SC Light'">Sapiente velit dolorum ut dolorem accusantium.</h3>
<h3 style="font-family: 'Cormorant Unicase Light'">Consequatur iure ut saepe ea quod minus quia.</h3>
<h3 style="font-family: 'Cormorant Upright Light'">Placeat debitis et harum autem tempora.</h3>
<h3 style="font-family: 'Cormorant Infant Medium'">Quis et aliquam aut quis nostrum dolorem ad.</h3>
<h3 style="font-family: 'Cormorant SC Medium'">Nesciunt sapiente optio eos ipsum.</h3>
<h3 style="font-family: 'Cormorant Unicase Medium'">Modi quod accusantium velit ea.</h3>
<h3 style="font-family: 'Cormorant Upright Medium'">Ut ad incidunt incidunt voluptas ratione.</h3>
<h3 style="font-family: 'Cormorant Infant Semi'">Cupiditate blanditiis quia molestiae amet.</h3>
<h3 style="font-family: 'Cormorant SC Semi'">Minus assumenda ut quis commodi.</h3>
<h3 style="font-family: 'Cormorant Unicase Semi'">Molestiae et ut earum cumque. Ut illum quasi et.</h3>
<h3 style="font-family: 'Cormorant Upright Semi'">Iure reprehenderit porro omnis aut labore.</h3>
<h3 style="font-family: 'Cormorant Infant Bold'">Ut occaecati iusto omnis rem voluptatem hic est.</h3>
<h3 style="font-family: 'Cormorant SC Bold'">Fugit exercitationem eum non necessitatibus.</h3>
<h3 style="font-family: 'Cormorant Unicase Bold'">Dolorum atque mollitia iure omnis.</h3>
<h3 style="font-family: 'Cormorant Upright Bold'">Veritatis qui tempora quasi expedita.</h3>

Preview

License

Copyright (c) 2015, Christian Thalmann ([email protected]), OFL (SIL Open Font License)

Created by Christian Thalmann with Glyphs in 2014–2015.

http://scripts.sil.org/OFL