I have a font-face generated file (.css) for a custom font that I want to use for my CSS/HTML UI, but putting my required fonts within the same folder as my css webfont file doesn’t seem to work. Do i need to change the URL link ? is it even possible to do so in a project.
Here is my CSS stylesheet source code. The required files are in the same folder.
@font-face {
font-family: 'Avenir Next Ultra';
src: url('AvenirNext-UltraLight.eot');
src: url('AvenirNext-UltraLight.eot?#iefix') format('embedded-opentype'),
url('AvenirNext-UltraLight.woff2') format('woff2'),
url('AvenirNext-UltraLight.woff') format('woff'),
url('AvenirNext-UltraLight.ttf') format('truetype');
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: 'Avenir Next';
src: url('AvenirNext-Bold.eot');
src: url('AvenirNext-Bold.eot?#iefix') format('embedded-opentype'),
url('AvenirNext-Bold.woff2') format('woff2'),
url('AvenirNext-Bold.woff') format('woff'),
url('AvenirNext-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Avenir Next';
src: url('AvenirNext-Regular.eot');
src: url('AvenirNext-Regular.eot?#iefix') format('embedded-opentype'),
url('AvenirNext-Regular.woff2') format('woff2'),
url('AvenirNext-Regular.woff') format('woff'),
url('AvenirNext-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Avenir Next Demi';
src: url('AvenirNext-DemiBold.eot');
src: url('AvenirNext-DemiBold.eot?#iefix') format('embedded-opentype'),
url('AvenirNext-DemiBold.woff2') format('woff2'),
url('AvenirNext-DemiBold.woff') format('woff'),
url('AvenirNext-DemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Avenir Next';
src: url('AvenirNext-MediumItalic.eot');
src: url('AvenirNext-MediumItalic.eot?#iefix') format('embedded-opentype'),
url('AvenirNext-MediumItalic.woff2') format('woff2'),
url('AvenirNext-MediumItalic.woff') format('woff'),
url('AvenirNext-MediumItalic.ttf') format('truetype');
font-weight: 500;
font-style: italic;
}
@font-face {
font-family: 'Avenir Next';
src: url('AvenirNext-Italic.eot');
src: url('AvenirNext-Italic.eot?#iefix') format('embedded-opentype'),
url('AvenirNext-Italic.woff2') format('woff2'),
url('AvenirNext-Italic.woff') format('woff'),
url('AvenirNext-Italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'Avenir Next Ultra';
src: url('AvenirNext-UltraLightItalic.eot');
src: url('AvenirNext-UltraLightItalic.eot?#iefix') format('embedded-opentype'),
url('AvenirNext-UltraLightItalic.woff2') format('woff2'),
url('AvenirNext-UltraLightItalic.woff') format('woff'),
url('AvenirNext-UltraLightItalic.ttf') format('truetype');
font-weight: 200;
font-style: italic;
}
@font-face {
font-family: 'Avenir Next Demi';
src: url('AvenirNext-DemiBoldItalic.eot');
src: url('AvenirNext-DemiBoldItalic.eot?#iefix') format('embedded-opentype'),
url('AvenirNext-DemiBoldItalic.woff2') format('woff2'),
url('AvenirNext-DemiBoldItalic.woff') format('woff'),
url('AvenirNext-DemiBoldItalic.ttf') format('truetype');
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: 'Avenir Next';
src: url('AvenirNext-Bold_1.eot');
src: url('AvenirNext-Bold_1.eot?#iefix') format('embedded-opentype'),
url('AvenirNext-Bold_1.woff2') format('woff2'),
url('AvenirNext-Bold_1.woff') format('woff'),
url('AvenirNext-Bold_1.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Avenir Next';
src: url('AvenirNext-Medium.eot');
src: url('AvenirNext-Medium.eot?#iefix') format('embedded-opentype'),
url('AvenirNext-Medium.woff2') format('woff2'),
url('AvenirNext-Medium.woff') format('woff'),
url('AvenirNext-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Avenir Next';
src: url('AvenirNext-Heavy.eot');
src: url('AvenirNext-Heavy.eot?#iefix') format('embedded-opentype'),
url('AvenirNext-Heavy.woff2') format('woff2'),
url('AvenirNext-Heavy.woff') format('woff'),
url('AvenirNext-Heavy.ttf') format('truetype');
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: 'Avenir Next';
src: url('AvenirNext-BoldItalic.eot');
src: url('AvenirNext-BoldItalic.eot?#iefix') format('embedded-opentype'),
url('AvenirNext-BoldItalic.woff2') format('woff2'),
url('AvenirNext-BoldItalic.woff') format('woff'),
url('AvenirNext-BoldItalic.ttf') format('truetype');
font-weight: bold;
font-style: italic;
}
@font-face {
font-family: 'Avenir Next';
src: url('AvenirNext-HeavyItalic.eot');
src: url('AvenirNext-HeavyItalic.eot?#iefix') format('embedded-opentype'),
url('AvenirNext-HeavyItalic.woff2') format('woff2'),
url('AvenirNext-HeavyItalic.woff') format('woff'),
url('AvenirNext-HeavyItalic.ttf') format('truetype');
font-weight: 900;
font-style: italic;
}
If anyone could help me, would be greatly appreciated.
Best,
Tristan