Скачать Overused Grotesk - Загрузка исходного кода Overused Grotesk

Overused Grotesk

Загрузка шрифта

v0.5-alpha.1

Скачать

Чрезмерный grotesk

От глупого издевательства над чрезмерным «швейцарским» дизайном типа до полусердечной рабочей лошадки, чрезмерная grotesk превращается в подражатель, имитируя самые отличительные черты повсеместной Helvetica. Тем не менее, шрифт не останавливается, чтобы быть подражателем; Он хочет быть многоцелевым и многоязычным, хотя и причудливым и несчастным.

Этот шрифт был первоначально служил в качестве формы «выставки» для замечательных пользователей Fontforge. К сожалению, из -за великолепно быстрой разработки, наряду с плохим рабочим процессом и плохим управлением, проект быстро стал непостижимым для абсолютного новичка. Оооо упсии

Шрифты бесплатны и с открытым исходным кодом, и любой вклад будет высоко ценится. Если вы планируете показать этот шрифт кому -либо или отправить его в коллекцию шрифтов, не забудьте связать этот репозиторий . Это не обязательно, но это спасает много головных болей (поверьте мне).

Чрезмерный grotesk

Стили

Название стиля	wght	Wdth	-	Название стиля	wght	Wdth	СЛАНТ
Свет	300	100	-	Легкий курсив	300	100	-10
Книга	350	100	-	Бронируйте курсив	350	100	-10
Римский	400	100	-	Курсив	400	100	-10
Середина	500	100	-	Средний курсив	500	100	-10
Семипод	600	100	-	Семиболд курсив	600	100	-10
Смелый	700	100	-	Смелый курсив	700	100	-10
Вытягивает	800	100	-	Вытягивает курсив	800	100	-10
Черный	900	100	-	Черный курсив	900	100	-10

Примечательные функции и дополнения

Включает вьетнамские и кириллические буквы (с локализованными формами)
12 стилистических наборов + 5 вариантов персонажа
Sub- & Superscript, знаменатели и числители, срезанные ноль, табличные фигуры, математические обозначения, фракции
.ttf, .otf, .woff, .woff2 и переменная .ttf шрифты
Буквы IPA (полуфункциональная диаклитическая и тональная буква, все еще очень простые)
Символы валюты: $ ¢ £ ¤ ¥ ֏฿₠₡₢₣₤₥₦₧₨₩₪₫ € ₭₮₯₰₱₲₳₴₵₶₷₸ ₹ ₹
Стрелки (слишком много из них, 84, если быть точным)
Скрипт-дискреционные лигатуры (FI, FF, FL, FFI, FFL)

Планы

После v1.0 - до v2.0

Больше ширины (5 статическая ширина: сжатая - конденсированная - нормальная - расширенная - широкая)
Греческий
Маленькие кепки
Строительство более акцентированных букв (латинская специфическая)

⏳ в процессе

Тонкая настройка
Отделение курсива

Переменные шрифты для Интернета

И источник, и папка «Выпуск» включают в себя шрифт переменной .woff2, который вы можете включить в свой веб -сайт, и обратитесь к использованию CSS, включив что -то вроде:

base.css

 : root {
    --font-sans : "Overused Grotesk" , -apple-system , BlinkMacSystemFont , "Segoe UI" , "Roboto" , "Oxygen" , "Ubuntu" , "Cantarell" , "Fira Sans" , "Droid Sans" , "Helvetica Neue" , sans-serif;
    --font-serif : Georgia , Times , serif;
    --font-mono : Menlo , Courier , monospace;
}

@font-face {
  font-family : "Overused Grotesk" ;
  src :
    url ( "../fonts/OverusedGrotesk-VF.woff2" ) format ( "woff2 supports variations" ) ,
    url ( "../fonts/OverusedGrotesk-VF.woff2" ) format ( "woff2-variations" );
  font-weight : 300 900 ;
}

Чтобы уменьшить кумулятивную сдвигу макета, вы можете предварительно загружать шрифт и использовать наблюдатель для лица шрифта, чтобы отображать шрифт, яростно быстро.

base.html

 <!DOCTYPE html >
< html lang =" en " >
  < head >
    < title > Static HTML is King ? </ title >
    < meta charset =" UTF-8 " >
    < meta name =" viewport " content =" width=device-width " >
    < link rel =" stylesheet " href =" /css/base.css " >
    < link rel =" preload " href =" /fonts/OverusedGrotesk-VF.woff2 " as =" font " type =" font/woff2 " crossorigin >
  </ head >
  < body >

    < main >
      < h1 > Static HTML is King ? </ h1 >
    </ main >
 
    <!--
    https://fontfaceobserver.com/
    To load a font, call the load method on a FontFaceObserver instance.
    It’ll return a promise that resolves when the font loads, or rejected when the font fails to load.
    -->
   < script src =" /js/fontfaceobserver.js " > </ script >
   < script >
   var font = new FontFaceObserver ( 'Overused Grotesk' ) ;

   font . load ( ) . then ( function ( ) {
     console . log ( 'Overused Grotesk has loaded.' ) ;
   } ) . catch ( function ( ) {
     console . log ( 'Overused Grotesk failed to load.' ) ;
   } ) ;
   </ script >

  </ body >
</ html >