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'">Aut sed dolore ut ipsam porro voluptas.</h3>
<h3 style="font-family: 'Cormorant Regular Italic'">Est quia culpa maxime aut sed aperiam.</h3>
<h3 style="font-family: 'Cormorant Light'">Quia non eaque id ut quia nihil.</h3>
<h3 style="font-family: 'Cormorant Light Italic'">Amet sint et enim placeat sit ex.</h3>
<h3 style="font-family: 'Cormorant Medium'">Harum expedita debitis et dicta eum.</h3>
<h3 style="font-family: 'Cormorant Medium Italic'">Minus placeat unde a quasi neque autem dolorem.</h3>
<h3 style="font-family: 'Cormorant Semi'">Et quis sint qui aut rerum voluptatem.</h3>
<h3 style="font-family: 'Cormorant Semi Italic'">Et eveniet esse fugit amet nostrum inventore.</h3>
<h3 style="font-family: 'Cormorant Bold'">Neque sunt fugit totam aut consequatur dolorem.</h3>
<h3 style="font-family: 'Cormorant Bold Italic'">Non recusandae explicabo autem debitis.</h3>
<h3 style="font-family: 'Cormorant Infant Regular'">Mollitia saepe possimus illo ab illum deleniti.</h3>
<h3 style="font-family: 'Cormorant SC Regular'">Et enim voluptas ea aliquid.</h3>
<h3 style="font-family: 'Cormorant Unicase Regular'">Consequatur facilis ut qui ab.</h3>
<h3 style="font-family: 'Cormorant Upright Regular'">Repellendus labore et minus possimus eveniet sed.</h3>
<h3 style="font-family: 'Cormorant Infant Light'">Modi et esse quia id sapiente.</h3>
<h3 style="font-family: 'Cormorant SC Light'">Quia harum omnis eaque.</h3>
<h3 style="font-family: 'Cormorant Unicase Light'">Et suscipit et quia similique unde.</h3>
<h3 style="font-family: 'Cormorant Upright Light'">Et voluptates fugiat doloribus et pariatur.</h3>
<h3 style="font-family: 'Cormorant Infant Medium'">Sequi debitis adipisci aspernatur provident.</h3>
<h3 style="font-family: 'Cormorant SC Medium'">Doloremque veniam voluptate inventore ut.</h3>
<h3 style="font-family: 'Cormorant Unicase Medium'">Dolor sit est sit ea excepturi quos.</h3>
<h3 style="font-family: 'Cormorant Upright Medium'">Quia labore iure quo.</h3>
<h3 style="font-family: 'Cormorant Infant Semi'">Deleniti sit qui modi qui atque.</h3>
<h3 style="font-family: 'Cormorant SC Semi'">Voluptas ut molestias ad et.</h3>
<h3 style="font-family: 'Cormorant Unicase Semi'">Voluptatem non enim id aliquam.</h3>
<h3 style="font-family: 'Cormorant Upright Semi'">Doloremque voluptas quisquam assumenda animi.</h3>
<h3 style="font-family: 'Cormorant Infant Bold'">Dolor cupiditate et ipsa et sequi recusandae.</h3>
<h3 style="font-family: 'Cormorant SC Bold'">Facere eaque quasi assumenda ea.</h3>
<h3 style="font-family: 'Cormorant Unicase Bold'">Harum at et sint veniam.</h3>
<h3 style="font-family: 'Cormorant Upright Bold'">Dolore expedita possimus omnis fugiat earum.</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