Vision Font Family

Use "Vision" font as a Webfont

You can create beautiful websites with great typography using the @font-face kit of Vision 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 Vision 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: 'Vision Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Vision Regular'), url('Vision.woff') format('woff');
}
@font-face {
    font-family: 'Vision Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Vision Italic'), url('Vision-Regular italic.woff') format('woff');
}
@font-face {
    font-family: 'Vision Thin Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Vision Thin Italic'), url('Vision-Thin italic.woff') format('woff');
}
@font-face {
    font-family: 'Vision Thin';
    font-style: normal;
    font-weight: normal;
    src: local('Vision Thin'), url('Vision-Thin.woff') format('woff');
}
@font-face {
    font-family: 'Vision Light';
    font-style: normal;
    font-weight: normal;
    src: local('Vision Light'), url('Vision-Light.woff') format('woff');
}
@font-face {
    font-family: 'Vision Light Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Vision Light Italic'), url('Vision-LightItalic.woff') format('woff');
}
@font-face {
    font-family: 'Vision Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Vision Bold'), url('Vision-Bold.woff') format('woff');
}
@font-face {
    font-family: 'Vision Bold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Vision Bold Italic'), url('Vision-BoldItalic.woff') format('woff');
}
@font-face {
    font-family: 'Vision Black Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Vision Black Italic'), url('Vision-Black italic.woff') format('woff');
}
@font-face {
    font-family: 'Vision Heavy';
    font-style: normal;
    font-weight: normal;
    src: local('Vision Heavy'), url('Vision-Heavy.woff') format('woff');
}
@font-face {
    font-family: 'Vision Heavy Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Vision Heavy Italic'), url('Vision-HeavyItalic.woff') format('woff');
}
@font-face {
    font-family: 'Vision Black';
    font-style: normal;
    font-weight: normal;
    src: local('Vision Black'), url('Vision-Black.woff') format('woff');
}

sample html

<h3 style="font-family: 'Vision Regular'">Itaque non autem et veniam.</h3>
<h3 style="font-family: 'Vision Italic'">Blanditiis autem quam cupiditate accusantium.</h3>
<h3 style="font-family: 'Vision Thin Italic'">Molestiae non id atque aut laudantium ea.</h3>
<h3 style="font-family: 'Vision Thin'">Dolorem explicabo quo quo delectus et id est.</h3>
<h3 style="font-family: 'Vision Light'">Et est qui odit sapiente.</h3>
<h3 style="font-family: 'Vision Light Italic'">Quaerat sed animi dolor iusto.</h3>
<h3 style="font-family: 'Vision Bold'">Eos consequatur illum nesciunt itaque.</h3>
<h3 style="font-family: 'Vision Bold Italic'">Repellat consequatur aut dolore.</h3>
<h3 style="font-family: 'Vision Black Italic'">Ratione rerum qui optio sit laboriosam.</h3>
<h3 style="font-family: 'Vision Heavy'">Eligendi occaecati omnis ab minus tempore.</h3>
<h3 style="font-family: 'Vision Heavy Italic'">Perspiciatis quos aut eos est molestiae.</h3>
<h3 style="font-family: 'Vision Black'">Pariatur nostrum deleniti eos.</h3>

Preview

License