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'">Velit repellendus delectus enim labore.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 1 Regular It'">Necessitatibus veniam aperiam magnam perferendis.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 1 Thin'">Deleniti ducimus aut ea nemo nobis labore aut.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 1 Thin It'">Reiciendis vel earum atque.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 1 Extra Light'">Rerum in pariatur qui ab asperiores ut totam.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 1 Extra Light It'">Laborum ullam enim ut autem esse.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 1 Light'">Accusamus ut dolor eos suscipit.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 1 Light It'">At voluptatem exercitationem accusamus hic alias.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 1 Semi Bold'">Omnis ut quia quisquam dolorem sit impedit eum.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 1 Semi Bold It'">Nulla perferendis non laborum ut.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 1 Bold'">Dolorem ea pariatur a ut eveniet.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 1 Bold It'">Voluptatem recusandae eos nam.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 1 Black'">Sequi aliquid commodi dolore quisquam voluptatem.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 1 Black It'">Animi laboriosam illum sed ut quo voluptas.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 2 Regular'">Eligendi omnis in blanditiis voluptas id ea.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 3 Regular'">Error sequi qui nam iusto sit consequatur.</h3>
<h3 style="font-family: 'Lota Grotesque Regular'">Voluptatum iure eveniet amet aut quia sed beatae.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 2 Regular It'">Totam earum deleniti facere.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 3 Regular It'">Iure consectetur ad provident eos.</h3>
<h3 style="font-family: 'Lota Grotesque Regular It'">Id et amet sunt veritatis quo consequatur animi.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 2 Thin'">Occaecati qui occaecati cum.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 3 Thin'">Quam et placeat id quisquam nisi quia.</h3>
<h3 style="font-family: 'Lota Grotesque Thin'">Aut culpa fuga qui veniam.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 2 Thin It'">Facilis officia doloribus placeat vitae.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 3 Thin It'">Ut quis exercitationem voluptatem sed fuga enim.</h3>
<h3 style="font-family: 'Lota Grotesque Thin It'">Voluptas quos ab occaecati incidunt vitae.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 2 Extra Light'">Et autem porro qui ratione omnis cum at.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 3 Extra Light'">Sint et adipisci voluptatem qui porro totam aut.</h3>
<h3 style="font-family: 'Lota Grotesque Extra Light'">Veritatis dolorum vel in vel doloremque velit.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 2 Extra Light It'">Et rerum sequi eum quis repudiandae accusantium.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 3 Extra Light It'">Animi facilis numquam molestiae rerum itaque.</h3>
<h3 style="font-family: 'Lota Grotesque Extra Light It'">Autem ea vel assumenda iusto repellendus.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 2 Light'">Nam voluptate delectus animi adipisci.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 3 Light'">Nemo quasi numquam voluptates doloribus.</h3>
<h3 style="font-family: 'Lota Grotesque Light'">Tempore eligendi nostrum dolores quis dolores.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 2 Light It'">Asperiores voluptatem ea et doloribus doloremque.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 3 Light It'">Est perspiciatis fuga vel et aut omnis provident.</h3>
<h3 style="font-family: 'Lota Grotesque Light It'">Tempora et ut voluptatem qui.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 2 Semi Bold'">Eos ut sint nesciunt repudiandae minima.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 3 Semi Bold'">Deserunt qui quia est provident odio.</h3>
<h3 style="font-family: 'Lota Grotesque Semi Bold'">Nulla optio enim minima accusamus libero et.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 2 Semi Bold It'">Error molestiae iste quasi minima ipsa.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 3 Semi Bold It'">Qui nihil id et tenetur ad iste accusamus.</h3>
<h3 style="font-family: 'Lota Grotesque Semi Bold It'">Sed voluptatum sint aperiam harum odio hic.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 2 Bold'">Illo aut in ex rerum.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 3 Bold'">Debitis sed eveniet suscipit et possimus quas.</h3>
<h3 style="font-family: 'Lota Grotesque Bold'">Aspernatur praesentium dolorem enim sint.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 2 Bold It'">Molestiae corrupti rerum asperiores.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 3 Bold It'">Quo est est amet non.</h3>
<h3 style="font-family: 'Lota Grotesque Bold It'">Nesciunt est molestias fuga qui ut.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 2 Black'">Ea repellendus cum nostrum voluptas.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 3 Black'">Enim nemo maiores eius est laborum nihil.</h3>
<h3 style="font-family: 'Lota Grotesque Black'">Ut eum non occaecati qui.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 2 Black It'">Voluptatum quam accusantium voluptates.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 3 Black It'">Et exercitationem qui qui numquam quae.</h3>
<h3 style="font-family: 'Lota Grotesque Black It'">Aut culpa assumenda quos veniam est corporis.</h3>

Preview

License

Copyright © 2017 by Daniel Hernandez. All rights reserved.