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'">Earum quisquam eius recusandae corporis.</h3>
<h3 style="font-family: 'Cormorant Regular Italic'">Laboriosam aliquid eum ipsam nam praesentium.</h3>
<h3 style="font-family: 'Cormorant Light'">Eum corporis sed sunt et nemo.</h3>
<h3 style="font-family: 'Cormorant Light Italic'">Et enim dolor enim labore omnis.</h3>
<h3 style="font-family: 'Cormorant Medium'">Qui eaque minus aspernatur rerum at temporibus.</h3>
<h3 style="font-family: 'Cormorant Medium Italic'">Minus magni et ipsum ea.</h3>
<h3 style="font-family: 'Cormorant Semi'">Aperiam vel consequatur velit corporis ut.</h3>
<h3 style="font-family: 'Cormorant Semi Italic'">Quo ex et consequatur.</h3>
<h3 style="font-family: 'Cormorant Bold'">Deleniti neque qui vero dolores ratione fuga et.</h3>
<h3 style="font-family: 'Cormorant Bold Italic'">Labore nam dolorum et temporibus.</h3>
<h3 style="font-family: 'Cormorant Infant Regular'">Saepe eum iste culpa natus.</h3>
<h3 style="font-family: 'Cormorant SC Regular'">Quis tenetur asperiores excepturi animi a.</h3>
<h3 style="font-family: 'Cormorant Unicase Regular'">Repellat omnis ex ut optio porro.</h3>
<h3 style="font-family: 'Cormorant Upright Regular'">Eos voluptas cumque ullam asperiores.</h3>
<h3 style="font-family: 'Cormorant Infant Light'">Omnis est ipsum voluptatem.</h3>
<h3 style="font-family: 'Cormorant SC Light'">Omnis rem rem minima natus qui sit odio.</h3>
<h3 style="font-family: 'Cormorant Unicase Light'">Totam autem perspiciatis ea ut totam ut officia.</h3>
<h3 style="font-family: 'Cormorant Upright Light'">Ut enim ex ut voluptas in.</h3>
<h3 style="font-family: 'Cormorant Infant Medium'">Sit velit officiis enim vel. Quis ipsa ut est.</h3>
<h3 style="font-family: 'Cormorant SC Medium'">Pariatur omnis vel explicabo reiciendis et totam.</h3>
<h3 style="font-family: 'Cormorant Unicase Medium'">Odit ducimus sunt dicta eum dolor.</h3>
<h3 style="font-family: 'Cormorant Upright Medium'">Mollitia delectus dolor impedit.</h3>
<h3 style="font-family: 'Cormorant Infant Semi'">Aliquid necessitatibus incidunt vero dolor.</h3>
<h3 style="font-family: 'Cormorant SC Semi'">Sequi sed eum molestiae quidem nesciunt.</h3>
<h3 style="font-family: 'Cormorant Unicase Semi'">Cum rerum expedita magni provident nam.</h3>
<h3 style="font-family: 'Cormorant Upright Semi'">Omnis quia labore qui qui sunt est.</h3>
<h3 style="font-family: 'Cormorant Infant Bold'">Qui suscipit assumenda rerum sint.</h3>
<h3 style="font-family: 'Cormorant SC Bold'">Voluptas et et et voluptas fuga.</h3>
<h3 style="font-family: 'Cormorant Unicase Bold'">Sunt aliquam libero nisi.</h3>
<h3 style="font-family: 'Cormorant Upright Bold'">Omnis at dolor repudiandae sit hic ut.</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