Lota Grotesque Alt 1 Font Family

Use "Lota Grotesque Alt 1" font as a Webfont

You can create beautiful websites with great typography using the @font-face kit of Lota Grotesque Alt 1 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 Lota Grotesque Alt 1 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: 'Lota Grotesque Alt 1 Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Alt 1 Regular'), url('Los Andes  Lota Grotesque Alt 1 Regular.woff') format('woff');
}
@font-face {
    font-family: 'Lota Grotesque Alt 1 Regular It';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Alt 1 Regular It'), url('Los Andes  Lota Grotesque Alt 1 Regular Italic.woff') format('woff');
}
@font-face {
    font-family: 'Lota Grotesque Alt 1 Thin';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Alt 1 Thin'), url('Los Andes  Lota Grotesque Alt 1 Thin.woff') format('woff');
}
@font-face {
    font-family: 'Lota Grotesque Alt 1 Thin It';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Alt 1 Thin It'), url('Los Andes  Lota Grotesque Alt 1 Thin Italic.woff') format('woff');
}
@font-face {
    font-family: 'Lota Grotesque Alt 1 Extra Light';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Alt 1 Extra Light'), url('Los Andes  Lota Grotesque Alt 1 Extra Light.woff') format('woff');
}
@font-face {
    font-family: 'Lota Grotesque Alt 1 Extra Light It';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Alt 1 Extra Light It'), url('Los Andes  Lota Grotesque Alt 1 Extra Light Italic.woff') format('woff');
}
@font-face {
    font-family: 'Lota Grotesque Alt 1 Light';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Alt 1 Light'), url('Los Andes  Lota Grotesque Alt 1 Light.woff') format('woff');
}
@font-face {
    font-family: 'Lota Grotesque Alt 1 Light It';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Alt 1 Light It'), url('Los Andes  Lota Grotesque Alt 1 Light Italic.woff') format('woff');
}
@font-face {
    font-family: 'Lota Grotesque Alt 1 Semi Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Alt 1 Semi Bold'), url('Los Andes  Lota Grotesque Alt 1 Semi Bold.woff') format('woff');
}
@font-face {
    font-family: 'Lota Grotesque Alt 1 Semi Bold It';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Alt 1 Semi Bold It'), url('Los Andes  Lota Grotesque Alt 1 Semi Bold Italic.woff') format('woff');
}
@font-face {
    font-family: 'Lota Grotesque Alt 1 Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Alt 1 Bold'), url('Los Andes  Lota Grotesque Alt 1 Bold.woff') format('woff');
}
@font-face {
    font-family: 'Lota Grotesque Alt 1 Bold It';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Alt 1 Bold It'), url('Los Andes  Lota Grotesque Alt 1 Bold Italic.woff') format('woff');
}
@font-face {
    font-family: 'Lota Grotesque Alt 1 Black';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Alt 1 Black'), url('Los Andes  Lota Grotesque Alt 1 Black.woff') format('woff');
}
@font-face {
    font-family: 'Lota Grotesque Alt 1 Black It';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Alt 1 Black It'), url('Los Andes  Lota Grotesque Alt 1 Black Italic.woff') format('woff');
}
@font-face {
    font-family: 'Lota Grotesque Alt 2 Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Alt 2 Regular'), url('Los Andes  Lota Grotesque Alt 2 Regular.woff') format('woff');
}
@font-face {
    font-family: 'Lota Grotesque Alt 3 Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Alt 3 Regular'), url('Los Andes  Lota Grotesque Alt 3 Regular.woff') format('woff');
}
@font-face {
    font-family: 'Lota Grotesque Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Regular'), url('Los Andes  Lota Grotesque Regular.woff') format('woff');
}
@font-face {
    font-family: 'Lota Grotesque Alt 2 Regular It';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Alt 2 Regular It'), url('Los Andes  Lota Grotesque Alt 2 Regular Italic.woff') format('woff');
}
@font-face {
    font-family: 'Lota Grotesque Alt 3 Regular It';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Alt 3 Regular It'), url('Los Andes  Lota Grotesque Alt 3 Regular Italic.woff') format('woff');
}
@font-face {
    font-family: 'Lota Grotesque Regular It';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Regular It'), url('Los Andes  Lota Grotesque Regular Italic.woff') format('woff');
}
@font-face {
    font-family: 'Lota Grotesque Alt 2 Thin';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Alt 2 Thin'), url('Los Andes  Lota Grotesque Alt 2 Thin.woff') format('woff');
}
@font-face {
    font-family: 'Lota Grotesque Alt 3 Thin';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Alt 3 Thin'), url('Los Andes  Lota Grotesque Alt 3 Thin.woff') format('woff');
}
@font-face {
    font-family: 'Lota Grotesque Thin';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Thin'), url('Los Andes  Lota Grotesque Thin.woff') format('woff');
}
@font-face {
    font-family: 'Lota Grotesque Alt 2 Thin It';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Alt 2 Thin It'), url('Los Andes  Lota Grotesque Alt 2 Thin Italic.woff') format('woff');
}
@font-face {
    font-family: 'Lota Grotesque Alt 3 Thin It';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Alt 3 Thin It'), url('Los Andes  Lota Grotesque Alt 3 Thin Italic.woff') format('woff');
}
@font-face {
    font-family: 'Lota Grotesque Thin It';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Thin It'), url('Los Andes  Lota Grotesque Thin Italic.woff') format('woff');
}
@font-face {
    font-family: 'Lota Grotesque Alt 2 Extra Light';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Alt 2 Extra Light'), url('Los Andes  Lota Grotesque Alt 2 Extra Light.woff') format('woff');
}
@font-face {
    font-family: 'Lota Grotesque Alt 3 Extra Light';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Alt 3 Extra Light'), url('Los Andes  Lota Grotesque Alt 3 Extra Light.woff') format('woff');
}
@font-face {
    font-family: 'Lota Grotesque Extra Light';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Extra Light'), url('Los Andes  Lota Grotesque Extra Light.woff') format('woff');
}
@font-face {
    font-family: 'Lota Grotesque Alt 2 Extra Light It';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Alt 2 Extra Light It'), url('Los Andes  Lota Grotesque Alt 2 Extra Light Italic.woff') format('woff');
}
@font-face {
    font-family: 'Lota Grotesque Alt 3 Extra Light It';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Alt 3 Extra Light It'), url('Los Andes  Lota Grotesque Alt 3 Extra Light Italic.woff') format('woff');
}
@font-face {
    font-family: 'Lota Grotesque Extra Light It';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Extra Light It'), url('Los Andes  Lota Grotesque Extra Light Italic.woff') format('woff');
}
@font-face {
    font-family: 'Lota Grotesque Alt 2 Light';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Alt 2 Light'), url('Los Andes  Lota Grotesque Alt 2 Light.woff') format('woff');
}
@font-face {
    font-family: 'Lota Grotesque Alt 3 Light';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Alt 3 Light'), url('Los Andes  Lota Grotesque Alt 3 Light.woff') format('woff');
}
@font-face {
    font-family: 'Lota Grotesque Light';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Light'), url('Los Andes  Lota Grotesque Light.woff') format('woff');
}
@font-face {
    font-family: 'Lota Grotesque Alt 2 Light It';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Alt 2 Light It'), url('Los Andes  Lota Grotesque Alt 2 Light Italic.woff') format('woff');
}
@font-face {
    font-family: 'Lota Grotesque Alt 3 Light It';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Alt 3 Light It'), url('Los Andes  Lota Grotesque Alt 3 Light Italic.woff') format('woff');
}
@font-face {
    font-family: 'Lota Grotesque Light It';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Light It'), url('Los Andes  Lota Grotesque Light Italic.woff') format('woff');
}
@font-face {
    font-family: 'Lota Grotesque Alt 2 Semi Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Alt 2 Semi Bold'), url('Los Andes  Lota Grotesque Alt 2 Semi Bold.woff') format('woff');
}
@font-face {
    font-family: 'Lota Grotesque Alt 3 Semi Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Alt 3 Semi Bold'), url('Los Andes  Lota Grotesque Alt 3 Semi Bold.woff') format('woff');
}
@font-face {
    font-family: 'Lota Grotesque Semi Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Semi Bold'), url('Los Andes  Lota Grotesque Semi Bold.woff') format('woff');
}
@font-face {
    font-family: 'Lota Grotesque Alt 2 Semi Bold It';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Alt 2 Semi Bold It'), url('Los Andes  Lota Grotesque Alt 2 Semi Bold Italic.woff') format('woff');
}
@font-face {
    font-family: 'Lota Grotesque Alt 3 Semi Bold It';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Alt 3 Semi Bold It'), url('Los Andes  Lota Grotesque Alt 3 Semi Bold Italic.woff') format('woff');
}
@font-face {
    font-family: 'Lota Grotesque Semi Bold It';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Semi Bold It'), url('Los Andes  Lota Grotesque Semi Bold Italic.woff') format('woff');
}
@font-face {
    font-family: 'Lota Grotesque Alt 2 Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Alt 2 Bold'), url('Los Andes  Lota Grotesque Alt 2 Bold.woff') format('woff');
}
@font-face {
    font-family: 'Lota Grotesque Alt 3 Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Alt 3 Bold'), url('Los Andes  Lota Grotesque Alt 3 Bold.woff') format('woff');
}
@font-face {
    font-family: 'Lota Grotesque Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Bold'), url('Los Andes  Lota Grotesque Bold.woff') format('woff');
}
@font-face {
    font-family: 'Lota Grotesque Alt 2 Bold It';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Alt 2 Bold It'), url('Los Andes  Lota Grotesque Alt 2 Bold Italic.woff') format('woff');
}
@font-face {
    font-family: 'Lota Grotesque Alt 3 Bold It';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Alt 3 Bold It'), url('Los Andes  Lota Grotesque Alt 3 Bold Italic.woff') format('woff');
}
@font-face {
    font-family: 'Lota Grotesque Bold It';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Bold It'), url('Los Andes  Lota Grotesque Bold Italic.woff') format('woff');
}
@font-face {
    font-family: 'Lota Grotesque Alt 2 Black';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Alt 2 Black'), url('Los Andes  Lota Grotesque Alt 2 Black.woff') format('woff');
}
@font-face {
    font-family: 'Lota Grotesque Alt 3 Black';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Alt 3 Black'), url('Los Andes  Lota Grotesque Alt 3 Black.woff') format('woff');
}
@font-face {
    font-family: 'Lota Grotesque Black';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Black'), url('Los Andes  Lota Grotesque Black.woff') format('woff');
}
@font-face {
    font-family: 'Lota Grotesque Alt 2 Black It';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Alt 2 Black It'), url('Los Andes  Lota Grotesque Alt 2 Black Italic.woff') format('woff');
}
@font-face {
    font-family: 'Lota Grotesque Alt 3 Black It';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Alt 3 Black It'), url('Los Andes  Lota Grotesque Alt 3 Black Italic.woff') format('woff');
}
@font-face {
    font-family: 'Lota Grotesque Black It';
    font-style: normal;
    font-weight: normal;
    src: local('Lota Grotesque Black It'), url('Los Andes  Lota Grotesque Black Italic.woff') format('woff');
}

sample html

<h3 style="font-family: 'Lota Grotesque Alt 1 Regular'">Est dolores rerum architecto blanditiis.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 1 Regular It'">Ipsam quia velit nulla similique non.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 1 Thin'">Modi est cupiditate ipsam qui repudiandae.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 1 Thin It'">Blanditiis facere omnis reprehenderit est.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 1 Extra Light'">Sequi blanditiis est illo modi quas quasi.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 1 Extra Light It'">Qui dolorum unde omnis modi porro deserunt eum.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 1 Light'">Cumque autem et a ea eligendi.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 1 Light It'">Quam omnis necessitatibus laborum qui ea.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 1 Semi Bold'">Cum error aperiam cum numquam et hic optio.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 1 Semi Bold It'">Dolor vitae soluta et quam.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 1 Bold'">Dolor vitae sit nihil quos est.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 1 Bold It'">In dolorem quo veniam quia.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 1 Black'">Nesciunt quo doloremque aut hic architecto sed.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 1 Black It'">Corrupti sed enim qui nulla.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 2 Regular'">Omnis earum in cumque maxime labore.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 3 Regular'">Molestiae aut sit sint aut.</h3>
<h3 style="font-family: 'Lota Grotesque Regular'">Laudantium quas sint rerum maiores officia.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 2 Regular It'">Aut temporibus earum cumque id ut similique.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 3 Regular It'">Ex quae aperiam culpa qui.</h3>
<h3 style="font-family: 'Lota Grotesque Regular It'">Est ipsa excepturi ut ratione quia.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 2 Thin'">Ratione consequatur ut voluptatibus pariatur.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 3 Thin'">Sunt dicta ut et ab optio et.</h3>
<h3 style="font-family: 'Lota Grotesque Thin'">Mollitia repellendus modi laborum beatae.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 2 Thin It'">Iusto quia pariatur sed explicabo.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 3 Thin It'">Sequi qui aut ratione quasi ut.</h3>
<h3 style="font-family: 'Lota Grotesque Thin It'">Quis aut eos officiis dicta.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 2 Extra Light'">Dolorem dolorem laudantium sint.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 3 Extra Light'">Saepe in animi alias et.</h3>
<h3 style="font-family: 'Lota Grotesque Extra Light'">Aut et dicta sit. Quam nesciunt in numquam.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 2 Extra Light It'">Dolor occaecati perferendis incidunt.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 3 Extra Light It'">Perferendis et rerum qui sed.</h3>
<h3 style="font-family: 'Lota Grotesque Extra Light It'">Ut impedit illum aut iusto id et.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 2 Light'">Ipsam reiciendis odio rerum velit.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 3 Light'">Quo occaecati reiciendis architecto pariatur.</h3>
<h3 style="font-family: 'Lota Grotesque Light'">Doloremque suscipit rerum nisi sed mollitia vel.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 2 Light It'">Cumque blanditiis minima et sapiente.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 3 Light It'">Voluptas animi facilis et placeat optio ut.</h3>
<h3 style="font-family: 'Lota Grotesque Light It'">Cum adipisci est ut impedit necessitatibus.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 2 Semi Bold'">Minima dolor voluptatem alias et.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 3 Semi Bold'">Magnam quia corrupti rerum ea.</h3>
<h3 style="font-family: 'Lota Grotesque Semi Bold'">Debitis ut veritatis libero expedita neque quia.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 2 Semi Bold It'">Voluptates et fuga quae consequatur non.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 3 Semi Bold It'">Tempora consequatur asperiores nostrum est.</h3>
<h3 style="font-family: 'Lota Grotesque Semi Bold It'">Quis quia voluptate vero cupiditate quae.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 2 Bold'">Et necessitatibus non assumenda nisi non a ipsam.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 3 Bold'">Et illum incidunt nobis excepturi ad.</h3>
<h3 style="font-family: 'Lota Grotesque Bold'">Aut perferendis repellat id perspiciatis dolor.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 2 Bold It'">Facilis voluptatem modi sed libero repudiandae.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 3 Bold It'">Qui officia veritatis veniam esse sint enim.</h3>
<h3 style="font-family: 'Lota Grotesque Bold It'">Cumque dignissimos aut odio illo sint.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 2 Black'">Qui quod facere id quia optio.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 3 Black'">Ut nihil ipsum dicta cumque sit.</h3>
<h3 style="font-family: 'Lota Grotesque Black'">Suscipit a voluptas perferendis ducimus ad est.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 2 Black It'">Quia excepturi consequatur id omnis in qui et.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 3 Black It'">Odit ea nemo nam ab non voluptatum cum.</h3>
<h3 style="font-family: 'Lota Grotesque Black It'">Et et in optio ipsam magni.</h3>

Preview

License

Copyright © 2017 by Daniel Hernandez. All rights reserved.