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'">Nemo libero non deserunt sint distinctio.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 1 Regular It'">Et maxime quis voluptatem est enim.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 1 Thin'">Est itaque molestiae est.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 1 Thin It'">Voluptas aperiam animi nemo.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 1 Extra Light'">Delectus qui nam occaecati debitis amet velit.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 1 Extra Light It'">Quae ipsam rem error possimus.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 1 Light'">Sed beatae voluptatem eveniet.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 1 Light It'">Asperiores quo neque aut est.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 1 Semi Bold'">Fuga et velit pariatur reprehenderit ut.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 1 Semi Bold It'">Qui a omnis non asperiores et.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 1 Bold'">Aliquam quia sit cupiditate quia dolore.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 1 Bold It'">Porro dignissimos ex aliquam eius rerum.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 1 Black'">Libero aut quaerat rerum totam ex suscipit.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 1 Black It'">Ea qui perspiciatis sunt optio quibusdam.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 2 Regular'">Est accusantium necessitatibus est.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 3 Regular'">Debitis eius in rerum debitis et nam.</h3>
<h3 style="font-family: 'Lota Grotesque Regular'">Sequi vero ut illum et vitae.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 2 Regular It'">Voluptas recusandae et doloribus non.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 3 Regular It'">Explicabo laborum temporibus aut quas nihil quia.</h3>
<h3 style="font-family: 'Lota Grotesque Regular It'">Et maxime velit optio et quia sit non.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 2 Thin'">Magni voluptates vel inventore ut non.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 3 Thin'">Omnis est et sequi sed labore ipsam hic.</h3>
<h3 style="font-family: 'Lota Grotesque Thin'">Odit sit minus asperiores eius quas.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 2 Thin It'">Quibusdam ut unde et et sint non.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 3 Thin It'">Doloribus officiis et et vero voluptatem.</h3>
<h3 style="font-family: 'Lota Grotesque Thin It'">Vitae culpa in tempore quis numquam aut.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 2 Extra Light'">Pariatur possimus magni et nobis iusto.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 3 Extra Light'">Consequatur sit sint sunt doloribus.</h3>
<h3 style="font-family: 'Lota Grotesque Extra Light'">Debitis ullam ea repellat qui distinctio.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 2 Extra Light It'">Ut voluptas iste voluptates sunt.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 3 Extra Light It'">Qui qui soluta odit voluptas.</h3>
<h3 style="font-family: 'Lota Grotesque Extra Light It'">Sapiente incidunt nam autem dolorem non nisi.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 2 Light'">Et qui dolores repudiandae sit fugit.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 3 Light'">Laborum dolore ut laboriosam dolorem.</h3>
<h3 style="font-family: 'Lota Grotesque Light'">Vitae in magnam eius vitae in officiis ab.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 2 Light It'">Ab vel quis exercitationem.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 3 Light It'">Quia soluta omnis pariatur aut.</h3>
<h3 style="font-family: 'Lota Grotesque Light It'">Sapiente sit eius quis autem quae.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 2 Semi Bold'">Eum omnis illum vel beatae quis atque facere.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 3 Semi Bold'">Non dicta accusamus aut saepe.</h3>
<h3 style="font-family: 'Lota Grotesque Semi Bold'">Fuga commodi deserunt quasi.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 2 Semi Bold It'">Sequi officia ratione quasi temporibus similique.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 3 Semi Bold It'">Asperiores iure eos sunt maiores.</h3>
<h3 style="font-family: 'Lota Grotesque Semi Bold It'">Sint dolore itaque ducimus.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 2 Bold'">Aut consequatur quod dolor sit aut maiores ut.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 3 Bold'">Vel dolore vero ullam atque nemo.</h3>
<h3 style="font-family: 'Lota Grotesque Bold'">Recusandae molestiae non et laudantium incidunt.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 2 Bold It'">Ut autem aperiam expedita veritatis vel hic.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 3 Bold It'">Officia ut nisi esse itaque et qui.</h3>
<h3 style="font-family: 'Lota Grotesque Bold It'">Et et vitae similique id qui.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 2 Black'">Aut asperiores eveniet similique cupiditate cum.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 3 Black'">Explicabo expedita et dolor et est sed qui.</h3>
<h3 style="font-family: 'Lota Grotesque Black'">Doloribus enim ab optio assumenda in et.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 2 Black It'">Non ut molestiae aut nihil saepe distinctio.</h3>
<h3 style="font-family: 'Lota Grotesque Alt 3 Black It'">Repellendus reiciendis eos qui.</h3>
<h3 style="font-family: 'Lota Grotesque Black It'">Excepturi expedita quibusdam voluptas.</h3>

Preview

License

Copyright © 2017 by Daniel Hernandez. All rights reserved.