css with fonts

gistfile1.txt

// Avenir
@font-face {
    font-family: "Avenir";
    font-weight: 800;
    src: url(#{$font-url + "/Avenir/Avenir-Black.ttf"}) format("truetype");
}

@font-face {
    font-family: "Avenir";
    font-weight: 700;
    src: url(#{$font-url + "/Avenir/Avenir-Heavy.ttf"}) format("truetype");
}

@font-face {
    font-family: "Avenir";
    font-weight: 500;
    src: url(#{$font-url + "/Avenir/Avenir-Medium.ttf"}) format("truetype");
}

@font-face {
    font-family: "Avenir";
    font-weight: 400;
    src: url(#{$font-url + "/Avenir/Avenir-Roman.ttf"}) format("truetype");
}

// Expert Sans

@font-face {
    font-family: 'Expert Sans Light';
    src: url(#{$font-url + "/Expert-Sans/Expert-Sans-Light.woff2"}) format("woff2");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: 'Expert Sans B14';
    src: url(#{$font-url + "/Expert-Sans/Expert-Sans-B14.woff2"}) format("woff2");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: 'Expert Sans Regular';
    src: url(#{$font-url + "/Expert-Sans/Expert-Sans-Regular.woff2"}) format("woff2");
    font-weight: 400;
    font-style: normal
}

// Verdana
@font-face {
    font-family: 'Verdana';
    src: url(#{$font-url + "/Verdana/Verdana.woff2"}) format("woff2");
    font-weight: 400;
    font-style: normal
}

// Gotham
@font-face {
    font-family: "Gotham";
    font-weight: 300;
    src: url(#{$font-url + "/Gotham/Gotham-Light.otf"}) format("opentype");
}

@font-face {
    font-family: "Gotham";
    font-weight: 400;
    src: url(#{$font-url + "/Gotham/Gotham-Book.otf"}) format("opentype");
}

@font-face {
    font-family: "Gotham";
    font-weight: 500;
    src: url(#{$font-url + "/Gotham/Gotham-Medium.otf"}) format("opentype");
}

@font-face {
    font-family: "Gotham";
    font-weight: 700;
    src: url(#{$font-url + "/Gotham/Gotham-Bold.otf"}) format("opentype");
}

@font-face {
    font-family: "Gotham";
    font-weight: 800;
    src: url(#{$font-url + "/Gotham/Gotham-Black.otf"}) format("opentype");
}

// InterState
@font-face {
    font-family: "InterState";
    font-weight: 200;
    src: url(#{$font-url + "/InterState/InterState-Thin.woff"}) format("woff");
}

@font-face {
    font-family: "InterState";
    font-weight: 300;
    src: url(#{$font-url + "/InterState/InterState-Light.woff"}) format("woff");
}

@font-face {
    font-family: "InterState";
    font-weight: 400;
    src: url(#{$font-url + "/InterState/InterState-Regular.woff"}) format("woff");
}

@font-face {
    font-family: "InterState";
    font-weight: 700;
    src: url(#{$font-url + "/InterState/InterState-Bold.woff"}) format("woff");
}

@font-face {
    font-family: "InterState";
    font-weight: 800;
    src: url(#{$font-url + "/InterState/InterState-Black.woff"}) format("woff");
}


// Karbon
@font-face {
    font-family: "Karbon";
    font-weight: 300;
    src: url(#{$font-url + "/Karbon/Karbon-Light.otf"}) format("opentype");
}

@font-face {
    font-family: "Karbon";
    font-weight: 400;
    src: url(#{$font-url + "/Karbon/Karbon-Regular.otf"}) format("opentype");
}

@font-face {
    font-family: "Karbon";
    font-weight: 400;
    font-style:  italic;
    src: url(#{$font-url + "/Karbon/Karbon-RegularItalic.otf"}) format("opentype");
}

@font-face {
    font-family: "Karbon";
    font-weight: 500;
    src: url(#{$font-url + "/Karbon/Karbon-Medium.otf"}) format("opentype");
}

@font-face {
    font-family: "Karbon";
    font-weight: 700;
    src: url(#{$font-url + "/Karbon/Karbon-Bold.otf"}) format("opentype");
}


// Futura
@font-face {
    font-family: "Futura";
    font-weight: 400;
    src: url(#{$font-url + "/Futura/Futura-Light.ttf"}) format("truetype");
}

@font-face {
    font-family: "Futura";
    font-weight: 700;
    src: url(#{$font-url + "/Futura/Futura-Medium.ttf"}) format("truetype");
}

@font-face {
    font-family: "Futura";
    font-weight: 800;
    src: url(#{$font-url + "/Futura/Futura-Heavy.ttf"}) format("truetype");
}

@font-face {
    font-family: "Futura";
    font-weight: 900;
    src: url(#{$font-url + "/Futura/Futura-Bold.ttf"}) format("truetype");
}

@font-face {
    font-family: "Futura";
    font-weight: 1000;
    src: url(#{$font-url + "/Futura/Futura-Extra-Black.ttf"}) format("truetype");
}

// Maison Neue font
@font-face {
    font-family: 'Maison Neue';
    src: url(#{$font-url + '/MaisonNeue/MaisonNeue-Light.woff2'}) format('woff2'),
         url(#{$font-url + '/MaisonNeue/MaisonNeue-Light.woff'}) format('woff'),
         url(#{$font-url + '/MaisonNeue/MaisonNeue-Light.ttf'}) format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Maison Neue';
    src: url(#{$font-url + '/MaisonNeue/MaisonNeue-LightItalic.woff2'}) format('woff2'),
         url(#{$font-url + '/MaisonNeue/MaisonNeue-LightItalic.woff'}) format('woff'),
         url(#{$font-url + '/MaisonNeue/MaisonNeue-LightItalic.ttf'}) format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Maison Neue';
    src: url(#{$font-url + '/MaisonNeue/MaisonNeue-Medium.woff2'}) format('woff2'),
         url(#{$font-url + '/MaisonNeue/MaisonNeue-Medium.woff'}) format('woff'),
         url(#{$font-url + '/MaisonNeue/MaisonNeue-Medium.ttf'}) format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
	font-family: 'Maison Neue';
	src: url(#{$font-url + '/MaisonNeue/MaisonNeue-MediumItalic.woff2'}) format('woff2'),
		 url(#{$font-url + '/MaisonNeue/MaisonNeue-MediumItalic.woff'}) format('woff'),
		 url(#{$font-url + '/MaisonNeue/MaisonNeue-MediumItalic.ttf'}) format('truetype');
	font-weight: 500;
	font-style: italic;
}

@font-face {
    font-family: 'Maison Neue';
    src: url(#{$font-url + '/MaisonNeue/MaisonNeue-Book.woff2'}) format('woff2'),
         url(#{$font-url + '/MaisonNeue/MaisonNeue-Book.woff'}) format('woff'),
         url(#{$font-url + '/MaisonNeue/MaisonNeue-Book.ttf'}) format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Maison Neue';
    src: url(#{$font-url + '/MaisonNeue/MaisonNeue-BookItalic.woff2'}) format('woff2'),
         url(#{$font-url + '/MaisonNeue/MaisonNeue-BookItalic.woff'}) format('woff'),
         url(#{$font-url + '/MaisonNeue/MaisonNeue-BookItalic.ttf'}) format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Maison Neue';
    src: url(#{$font-url + '/MaisonNeue/MaisonNeue-Bold.woff2'}) format('woff2'),
         url(#{$font-url + '/MaisonNeue/MaisonNeue-Bold.woff'}) format('woff'),
         url(#{$font-url + '/MaisonNeue/MaisonNeue-Bold.ttf'}) format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
	font-family: 'Maison Neue';
	src: url(#{$font-url + '/MaisonNeue/MaisonNeue-BoldItalic.woff2'}) format('woff2'),
		 url(#{$font-url + '/MaisonNeue/MaisonNeue-BoldItalic.woff'}) format('woff'),
		 url(#{$font-url + '/MaisonNeue/MaisonNeue-BoldItalic.ttf'}) format('truetype');
	font-weight: bold;
	font-style: italic;
}

// Open Sans
@font-face {
    font-family: "Open Sans";
    font-weight: 300;
    src: url(#{$font-url + "/OpenSans/OpenSans-Light.ttf"}) format("truetype");
}

@font-face {
    font-family: "Open Sans";
    font-weight: 300;
    font-style: italic;
    src: url(#{$font-url + "/OpenSans/OpenSans-LightItalic.ttf"}) format("truetype");
}

@font-face {
    font-family: "Open Sans";
    font-weight: 400;
    src: url(#{$font-url + "/OpenSans/OpenSans-Regular.ttf"}) format("truetype");
}

@font-face {
    font-family: "Open Sans";
    font-weight: 400;
    font-style: italic;
    src: url(#{$font-url + "/OpenSans/OpenSans-Italic.ttf"}) format("truetype");
}

@font-face {
    font-family: "Open Sans";
    font-weight: 600;
    src: url(#{$font-url + "/OpenSans/OpenSans-SemiBold.ttf"}) format("truetype");
}

@font-face {
    font-family: "Open Sans";
    font-weight: 600;
    font-style: italic;
    src: url(#{$font-url + "/OpenSans/OpenSans-SemiBoldItalic.ttf"}) format("truetype");
}

@font-face {
    font-family: "Open Sans";
    font-weight: 700;
    src: url(#{$font-url + "/OpenSans/OpenSans-Bold.ttf"}) format("truetype");
}

@font-face {
    font-family: "Open Sans";
    font-weight: 700;
    font-style: italic;
    src: url(#{$font-url + "/OpenSans/OpenSans-BoldItalic.ttf"}) format("truetype");
}

@font-face {
    font-family: "Open Sans";
    font-weight: 800;
    src: url(#{$font-url + "/OpenSans/OpenSans-ExtraBold.ttf"}) format("truetype");
}

@font-face {
    font-family: "Open Sans";
    font-weight: 800;
    font-style: italic;
    src: url(#{$font-url + "/OpenSans/OpenSans-ExtraBoldItalic.ttf"}) format("truetype");
}

//Montserrat font
@font-face {
    font-family: "Montserrat";
    font-weight: 100;
    src: url(#{$font-url + "/Montserrat/Montserrat-Thin.ttf"}) format("truetype");
}

@font-face {
    font-family: "Montserrat";
    font-weight: 100;
    font-style: italic;
    src: url(#{$font-url + "/Montserrat/Montserrat-ThinItalic.ttf"}) format("truetype");
}

@font-face {
    font-family: "Montserrat";
    font-weight: 200;
    src: url(#{$font-url + "/Montserrat/Montserrat-ExtraLight.ttf"}) format("truetype");
}

@font-face {
    font-family: "Montserrat";
    font-weight: 200;
    font-style: italic;
    src: url(#{$font-url + "/Montserrat/Montserrat-ExtraLightItalic.ttf"}) format("truetype");
}

@font-face {
    font-family: "Montserrat";
    font-weight: 300;
    src: url(#{$font-url + "/Montserrat/Montserrat-Light.ttf"}) format("truetype");
}

@font-face {
    font-family: "Montserrat";
    font-weight: 300;
    font-style: italic;
    src: url(#{$font-url + "/Montserrat/Montserrat-LightItalic.ttf"}) format("truetype");
}

@font-face {
    font-family: "Montserrat";
    font-weight: 400;
    src: url(#{$font-url + "/Montserrat/Montserrat-Regular.ttf"}) format("truetype");
}

@font-face {
    font-family: "Montserrat";
    font-weight: 400;
    font-style: italic;
    src: url(#{$font-url + "/Montserrat/Montserrat-Italic.ttf"}) format("truetype");
}

@font-face {
    font-family: "Montserrat";
    font-weight: 500;
    src: url(#{$font-url + "/Montserrat/Montserrat-Medium.ttf"}) format("truetype");
}

@font-face {
    font-family: "Montserrat";
    font-weight: 500;
    font-style: italic;
    src: url(#{$font-url + "/Montserrat/Montserrat-MediumItalic.ttf"}) format("truetype");
}

@font-face {
    font-family: "Montserrat";
    font-weight: 600;
    src: url(#{$font-url + "/Montserrat/Montserrat-SemiBold.ttf"}) format("truetype");
}

@font-face {
    font-family: "Montserrat";
    font-weight: 600;
    font-style: italic;
    src: url(#{$font-url + "/Montserrat/Montserrat-SemiBoldItalic.ttf"}) format("truetype");
}

@font-face {
    font-family: "Montserrat";
    font-weight: 700;
    src: url(#{$font-url + "/Montserrat/Montserrat-Bold.ttf"}) format("truetype");
}

@font-face {
    font-family: "Montserrat";
    font-weight: 700;
    font-style: italic;
    src: url(#{$font-url + "/Montserrat/Montserrat-BoldItalic.ttf"}) format("truetype");
}

@font-face {
    font-family: "Montserrat";
    font-weight: 800;
    src: url(#{$font-url + "/Montserrat/Montserrat-ExtraBold.ttf"}) format("truetype");
}

@font-face {
    font-family: "Montserrat";
    font-weight: 800;
    font-style: italic;
    src: url(#{$font-url + "/Montserrat/Montserrat-ExtraBoldItalic.ttf"}) format("truetype");
}

@font-face {
    font-family: "Montserrat";
    font-weight: 900;
    src: url(#{$font-url + "/Montserrat/Montserrat-Black.ttf"}) format("truetype");
}

@font-face {
    font-family: "Montserrat";
    font-weight: 900;
    font-style: italic;
    src: url(#{$font-url + "/Montserrat/Montserrat-BlackItalic.ttf"}) format("truetype");
}

//Trebuchet font
@font-face {
    font-family: "Trebuchet";
    font-weight: 400;
    src: url(#{$font-url + "/Trebuchet/Trebuchet-Regular.ttf"}) format("truetype");
}

@font-face {
    font-family: "Trebuchet";
    font-weight: 400;
    font-style: italic;
    src: url(#{$font-url + "/Trebuchet/Trebuchet-Italic.ttf"}) format("truetype");
}

@font-face {
    font-family: "Trebuchet";
    font-weight: 700;
    src: url(#{$font-url + "/Trebuchet/Trebuchet-Bold.ttf"}) format("truetype");
}

@font-face {
    font-family: "Trebuchet";
    font-weight: 700;
    font-style: italic;
    src: url(#{$font-url + "/Trebuchet/Trebuchet-BoldItalic.ttf"}) format("truetype");
}


//Poppins font
@font-face {
    font-family: "Poppins";
    font-weight: 100;
    src: url(#{$font-url + "/Poppins/Poppins-Thin.ttf"}) format("truetype");
}

@font-face {
    font-family: "Poppins";
    font-weight: 100;
    font-style: italic;
    src: url(#{$font-url + "/Poppins/Poppins-ThinItalic.ttf"}) format("truetype");
}

@font-face {
    font-family: "Poppins";
    font-weight: 200;
    src: url(#{$font-url + "/Poppins/Poppins-ExtraLight.ttf"}) format("truetype");
}

@font-face {
    font-family: "Poppins";
    font-weight: 200;
    font-style: italic;
    src: url(#{$font-url + "/Poppins/Poppins-ExtraLightItalic.ttf"}) format("truetype");
}

@font-face {
    font-family: "Poppins";
    font-weight: 300;
    src: url(#{$font-url + "/Poppins/Poppins-Light.ttf"}) format("truetype");
}

@font-face {
    font-family: "Poppins";
    font-weight: 300;
    font-style: italic;
    src: url(#{$font-url + "/Poppins/Poppins-LightItalic.ttf"}) format("truetype");
}

@font-face {
    font-family: "Poppins";
    font-weight: 400;
    src: url(#{$font-url + "/Poppins/Poppins-Regular.ttf"}) format("truetype");
}

@font-face {
    font-family: "Poppins";
    font-weight: 400;
    font-style: italic;
    src: url(#{$font-url + "/Poppins/Poppins-Italic.ttf"}) format("truetype");
}

@font-face {
    font-family: "Poppins";
    font-weight: 500;
    src: url(#{$font-url + "/Poppins/Poppins-Medium.ttf"}) format("truetype");
}

@font-face {
    font-family: "Poppins";
    font-weight: 500;
    font-style: italic;
    src: url(#{$font-url + "/Poppins/Poppins-MediumItalic.ttf"}) format("truetype");
}

@font-face {
    font-family: "Poppins";
    font-weight: 600;
    src: url(#{$font-url + "/Poppins/Poppins-SemiBold.ttf"}) format("truetype");
}

@font-face {
    font-family: "Poppins";
    font-weight: 600;
    font-style: italic;
    src: url(#{$font-url + "/Poppins/Poppins-SemiBoldItalic.ttf"}) format("truetype");
}

@font-face {
    font-family: "Poppins";
    font-weight: 700;
    src: url(#{$font-url + "/Poppins/Poppins-Bold.ttf"}) format("truetype");
}

@font-face {
    font-family: "Poppins";
    font-weight: 700;
    font-style: italic;
    src: url(#{$font-url + "/Poppins/Poppins-BoldItalic.ttf"}) format("truetype");
}

@font-face {
    font-family: "Poppins";
    font-weight: 800;
    src: url(#{$font-url + "/Poppins/Poppins-ExtraBold.ttf"}) format("truetype");
}

@font-face {
    font-family: "Poppins";
    font-weight: 800;
    font-style: italic;
    src: url(#{$font-url + "/Poppins/Poppins-ExtraBoldItalic.ttf"}) format("truetype");
}

@font-face {
    font-family: "Poppins";
    font-weight: 900;
    src: url(#{$font-url + "/Poppins/Poppins-Black.ttf"}) format("truetype");
}

@font-face {
    font-family: "Poppins";
    font-weight: 900;
    font-style: italic;
    src: url(#{$font-url + "/Poppins/Poppins-BlackItalic.ttf"}) format("truetype");
}



//Quicksand font
@font-face {
    font-family: "Quicksand";
    font-weight: 300;
    src: url(#{$font-url + "/Quicksand/Quicksand-Light.ttf"}) format("truetype");
}

@font-face {
    font-family: "Quicksand";
    font-weight: 400;
    src: url(#{$font-url + "/Quicksand/Quicksand-Regular.ttf"}) format("truetype");
}

@font-face {
    font-family: "Quicksand";
    font-weight: 500;
    src: url(#{$font-url + "/Quicksand/Quicksand-Medium.ttf"}) format("truetype");
}

@font-face {
    font-family: "Quicksand";
    font-weight: 600;
    src: url(#{$font-url + "/Quicksand/Quicksand-SemiBold.ttf"}) format("truetype");
}

@font-face {
    font-family: "Quicksand";
    font-weight: 700;
    src: url(#{$font-url + "/Quicksand/Quicksand-Bold.ttf"}) format("truetype");
}


//Roboto font
@font-face {
    font-family: "Roboto";
    font-weight: 100;
    src: url(#{$font-url + "/Roboto/Roboto-Thin.ttf"}) format("truetype");
}

@font-face {
    font-family: "Roboto";
    font-weight: 100;
    font-style: italic;
    src: url(#{$font-url + "/Roboto/Roboto-ThinItalic.ttf"}) format("truetype");
}

@font-face {
    font-family: "Roboto";
    font-weight: 300;
    src: url(#{$font-url + "/Roboto/Roboto-Light.ttf"}) format("truetype");
}

@font-face {
    font-family: "Roboto";
    font-weight: 300;
    font-style: italic;
    src: url(#{$font-url + "/Roboto/Roboto-LightItalic.ttf"}) format("truetype");
}

@font-face {
    font-family: "Roboto";
    font-weight: 400;
    src: url(#{$font-url + "/Roboto/Roboto-Regular.ttf"}) format("truetype");
}

@font-face {
    font-family: "Roboto";
    font-weight: 400;
    font-style: italic;
    src: url(#{$font-url + "/Roboto/Roboto-Italic.ttf"}) format("truetype");
}

@font-face {
    font-family: "Roboto";
    font-weight: 500;
    src: url(#{$font-url + "/Roboto/Roboto-Medium.ttf"}) format("truetype");
}

@font-face {
    font-family: "Roboto";
    font-weight: 500;
    font-style: italic;
    src: url(#{$font-url + "/Roboto/Roboto-MediumItalic.ttf"}) format("truetype");
}

@font-face {
    font-family: "Roboto";
    font-weight: 700;
    src: url(#{$font-url + "/Roboto/Roboto-Bold.ttf"}) format("truetype");
}

@font-face {
    font-family: "Roboto";
    font-weight: 700;
    font-style: italic;
    src: url(#{$font-url + "/Roboto/Roboto-BoldItalic.ttf"}) format("truetype");
}

@font-face {
    font-family: "Roboto";
    font-weight: 900;
    src: url(#{$font-url + "/Roboto/Roboto-Black.ttf"}) format("truetype");
}

@font-face {
    font-family: "Roboto";
    font-weight: 900;
    font-style: italic;
    src: url(#{$font-url + "/Roboto/Roboto-BlackItalic.ttf"}) format("truetype");
}


// Dinamit font
@font-face {
    font-family: 'Dinamit';
    src: url(#{$font-url + '/Dinamit/Dinamit-Regular.woff2'}) format('woff2'),
    url(#{$font-url + '/Dinamit/Dinamit-Regular.woff'}) format('woff'),
    url(#{$font-url + '/Dinamit/Dinamit-Regular.ttf'}) format('truetype');
    font-weight: 400;
}

@font-face {
    font-family: 'Dinamit';
    src: url(#{$font-url + '/Dinamit/Dinamit-Semibold.woff2'}) format('woff2'),
    url(#{$font-url + '/Dinamit/Dinamit-Semibold.woff'}) format('woff'),
    url(#{$font-url + '/Dinamit/Dinamit-Semibold.ttf'}) format('truetype');
    font-weight: 600;
}

@font-face {
    font-family: 'Dinamit';
    src: url(#{$font-url + '/Dinamit/Dinamit-Bold.woff2'}) format('woff2'),
    url(#{$font-url + '/Dinamit/Dinamit-Bold.woff'}) format('woff'),
    url(#{$font-url + '/Dinamit/Dinamit-Bold.ttf'}) format('truetype');
    font-weight: 700;
}