$dir-fonts: '/public/assets/fonts/'; $dir-img: '/public/assets/img/'; $yellow: #fce767; $red: #e73452; $orange: #dc5b2f; $blue: #17428c; $green: #568b6f; $maron: #925038; $headerheight: 122px; @font-face { font-family: 'dinregular'; src: url($dir-fonts + 'din_regular-webfont.eot'); src: url($dir-fonts + 'din_regular-webfont.eot?#iefix') format('embedded-opentype'), url($dir-fonts +'din_regular-webfont.woff2') format('woff2'), url($dir-fonts +'din_regular-webfont.woff') format('woff'), url($dir-fonts +'din_regular-webfont.ttf') format('truetype'), url($dir-fonts +'din_regular-webfont.svg#dinregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'dinbold'; src: url($dir-fonts + 'din_bold-webfont.eot'); src: url($dir-fonts + 'din_bold-webfont.eot?#iefix') format('embedded-opentype'), url($dir-fonts +'din_bold-webfont.woff2') format('woff2'), url($dir-fonts +'din_bold-webfont.woff') format('woff'), url($dir-fonts +'din_bold-webfont.ttf') format('truetype'), url($dir-fonts +'din_bold-webfont.svg#dinregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'FranklinGothic'; src: url($dir-fonts + 'franklingothic-webfont.eot'); src: url($dir-fonts + 'franklingothic-webfont.eot?#iefix') format('embedded-opentype'), url($dir-fonts +'franklingothic-webfont.woff2') format('woff2'), url($dir-fonts +'franklingothic-webfont.woff') format('woff'), url($dir-fonts +'franklingothic-webfont.ttf') format('truetype'), url($dir-fonts +'franklingothic-webfont.svg#dinregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Georgia'; src: url($dir-fonts + 'georgia-webfont.eot'); src: url($dir-fonts + 'georgia-webfont.eot?#iefix') format('embedded-opentype'), url($dir-fonts +'georgia-webfont.woff2') format('woff2'), url($dir-fonts +'georgia-webfont.woff') format('woff'), url($dir-fonts +'georgia-webfont.ttf') format('truetype'), url($dir-fonts +'georgia-webfont.svg#dinregular') format('svg'); font-weight: normal; font-style: normal; }