i am trying to embed custom font on my next.js project using #font-face in css.
it works on desktop (windows & macos), working on android but not working on iPhone device.
this is my code:
#font-face {
font-family: 'EnSpoiler';
src: url('../assets/fonts/spoiler/EnSpoiler.eot');
src: url('../assets/fonts/spoiler/EnSpoiler.eot') format('embedded-opentype'),
url('../assets/fonts/spoiler/EnSpoiler.woff2') format('woff2'),
url('../assets/fonts/spoiler/EnSpoiler.woff') format('woff'),
url('../assets/fonts/spoiler/EnSpoiler.ttf') format('truetype'),
url('../assets/fonts/spoiler/EnSpoiler.svg#EnSpoiler') format('svg');
}
#font-face {
font-family: 'FbSpoilerRegular';
src: url('../assets/fonts/spoiler/FbSpoilerRegular.eot');
src: url('../assets/fonts/spoiler/FbSpoilerRegular.eot')
format('embedded-opentype'),
url('../assets/fonts/spoiler/FbSpoilerRegular.woff2') format('woff2'),
url('../assets/fonts/spoiler/FbSpoilerRegular.woff') format('woff'),
url('../assets/fonts/spoiler/FbSpoilerRegular.ttf') format('truetype'),
url('../assets/fonts/spoiler/FbSpoilerRegular.svg#FbSpoilerRegular')
format('svg');
}
#font-face {
font-family: 'EnSpoilerBold';
src: url('../assets/fonts/spoiler/EnSpoilerBold.eot');
src: url('../assets/fonts/spoiler/EnSpoilerBold.eot')
format('embedded-opentype'),
url('../assets/fonts/spoiler/EnSpoilerBold.woff2') format('woff2'),
url('../assets/fonts/spoiler/EnSpoilerBold.woff') format('woff'),
url('../assets/fonts/spoiler/EnSpoilerBold.ttf') format('truetype'),
url('../assets/fonts/spoiler/EnSpoilerBold.svg#EnSpoilerBold') format('svg');
}
#font-face {
font-family: 'FbSpoilerBold';
src: url('../assets/fonts/spoiler/FbSpoilerBold.eot');
src: url('../assets/fonts/spoiler/FbSpoilerBold.eot')
format('embedded-opentype'),
url('../assets/fonts/spoiler/FbSpoilerBold.woff2') format('woff2'),
url('../assets/fonts/spoiler/FbSpoilerBold.woff') format('woff'),
url('../assets/fonts/spoiler/FbSpoilerBold.ttf') format('truetype'),
url('../assets/fonts/spoiler/FbSpoilerBold.svg#FbSpoilerBold') format('svg');
}
html {
margin: 0;
padding: 0;
}
body {
font-family: 'FbSpoilerRegular', 'EnSpoiler';
margin: 0;
padding: 0;
}
any help please?
Related
I'm trying to declare various forms of the same font in my project. I want a normal and italic version of each font type under the same BrandonText name. As soon as I add the italic version in, the normal version is completely ignored.
#font-face {
font-family: 'BrandonText';
src: url('/fonts/BrandonText-Thin.eot?#iefix') format('embedded-opentype'),
url('/fonts/BrandonText-Thin.otf') format('opentype'),
url('/fonts/BrandonText-Thin.woff') format('woff'),
url('/fonts/BrandonText-Thin.ttf') format('truetype'),
url('/fonts/BrandonText-Thin.svg#BrandonText-Thin') format('svg');
font-weight: 100;
font-style: normal;
}
#font-face {
font-family: 'BrandonText';
src: url('/fonts/BrandonText-Thin.eot?#iefix') format('embedded-opentype'),
url('/fonts/BrandonText-Thin.otf') format('opentype'),
url('/fonts/BrandonText-Thin.woff') format('woff'),
url('/fonts/BrandonText-Thin.ttf') format('truetype'),
url('/fonts/BrandonText-Thin.svg#BrandonText-Thin') format('svg');
font-weight: 100;
font-style: italic;
}
Why is this, and is there any way to work around this?
You're overriding your normal #font-face by italic. Instead, just declare it once:
#font-face {
font-family: 'BrandonText';
src: url('/fonts/BrandonText-Thin.eot?#iefix') format('embedded-opentype'),
url('/fonts/BrandonText-Thin.otf') format('opentype'),
url('/fonts/BrandonText-Thin.woff') format('woff'),
url('/fonts/BrandonText-Thin.ttf') format('truetype'),
url('/fonts/BrandonText-Thin.svg#BrandonText-Thin') format('svg');
font-weight: 100;
}
Then you can use same declaration for both cases. When you want italic, just add font-style: italic to element's css.
You have given both fonts the same name. Change to this.
#font-face {
font-family: 'BrandonText';
src: url('/fonts/BrandonText-Thin.eot?#iefix') format('embedded-opentype'),
url('/fonts/BrandonText-Thin.otf') format('opentype'),
url('/fonts/BrandonText-Thin.woff') format('woff'),
url('/fonts/BrandonText-Thin.ttf') format('truetype'),
url('/fonts/BrandonText-Thin.svg#BrandonText-Thin') format('svg');
font-weight: 100;
font-style: normal;
}
#font-face {
font-family: 'BrandonTextItalic';
src: url('/fonts/BrandonText-Thin.eot?#iefix') format('embedded-opentype'),
url('/fonts/BrandonText-Thin.otf') format('opentype'),
url('/fonts/BrandonText-Thin.woff') format('woff'),
url('/fonts/BrandonText-Thin.ttf') format('truetype'),
url('/fonts/BrandonText-Thin.svg#BrandonText-Thin') format('svg');
font-weight: 100;
font-style: italic;
}
Both are declared with the same name
Change your second font-family: 'BrandonText'; to font-family: 'BrandonTextItalic';
I am using this code as below
#font-face {
font-family: 'icomoon';
src:url('/../fonts/icomoon.eot') format('embedded-opentype'),
url('/../fonts/icomoon.ttf') format('truetype'),
url('/../fonts/icomoon.woff') format('woff'),
url('/../fonts/icomoon.svg') format('svg');
font-weight: normal;
font-style: normal;
}
if i use this code
#font-face {
font-family: 'icomoon';
src:url('icon-fonts/icomoon.html');
src:url('icon-fonts/icomoond41d.html?#iefix') format('embedded-opentype'),
url('icon-fonts/icomoon-2.html') format('truetype'),
url('icon-fonts/icomoon-3.html') format('woff'),
url('icon-fonts/icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
error shows in hosting server and runs normal in local system
I have been using #font-face for a while now and have not had any issues when viewing my files online. But #font-face has never worked locally.
I don't understand why I cannot get #font-face to work locally. I am using Visual Studio 2012 Ultimate for my dev.
CSS:
/* Include Fonts */
#font-face {
font-family: 'SansationRegular';
src: url('/Shared/Assets/Fonts/Sansation_Regular-webfont.eot');
src: url('/Shared/Assets/Fonts/Sansation_Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('/Shared/Assets/Fonts/Sansation_Regular-webfont.woff') format('woff'),
url('/Shared/Assets/Fonts/Sansation_Regular-webfont.ttf') format('truetype'),
url('/Shared/Assets/Fonts/Sansation_Regular-webfont.svg#SansationRegular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'SansationLight';
src: url('/Shared/Assets/Fonts/Sansation_Light-webfont.eot');
src: url('/Shared/Assets/Fonts/Sansation_Light-webfont.eot?#iefix') format('embedded-opentype'),
url('/Shared/Assets/Fonts/Sansation_Light-webfont.woff') format('woff'),
url('/Shared/Assets/Fonts/Sansation_Light-webfont.ttf') format('truetype'),
url('/Shared/Assets/Fonts/Sansation_Light-webfont.svg#SansationLight') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'SansationBold';
src: url('/Shared/Assets/Fonts/Sansation_Bold-webfont.eot');
src: url('/Shared/Assets/Fonts/Sansation_Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('/Shared/Assets/Fonts/Sansation_Bold-webfont.woff') format('woff'),
url('/Shared/Assets/Fonts/Sansation_Bold-webfont.ttf') format('truetype'),
url('/Shared/Assets/Fonts/Sansation_Bold-webfont.svg#SansationBold') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'SansationLightLightItalic';
src: url('/Shared/Assets/Fonts/Sansation_Light_Italic-webfont.eot');
src: url('/Shared/Assets/Fonts/Sansation_Light_Italic-webfont.eot?#iefix') format('embedded-opentype'),
url('/Shared/Assets/Fonts/Sansation_Light_Italic-webfont.woff') format('woff'),
url('/Shared/Assets/Fonts/Sansation_Light_Italic-webfont.ttf') format('truetype'),
url('/Shared/Assets/Fonts/Sansation_Light_Italic-webfont.svg#SansationLightLightItalic') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'SansationItalic';
src: url('/Shared/Assets/Fonts/Sansation_Italic-webfont.eot');
src: url('/Shared/Assets/Fonts/Sansation_Italic-webfont.eot?#iefix') format('embedded-opentype'),
url('/Shared/Assets/Fonts/Sansation_Italic-webfont.woff') format('woff'),
url('/Shared/Assets/Fonts/Sansation_Italic-webfont.ttf') format('truetype'),
url('/Shared/Assets/Fonts/Sansation_Italic-webfont.svg#SansationItalic') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'SansationBoldItalic';
src: url('/Shared/Assets/Fonts/Sansation_Bold_Italic-webfont.eot');
src: url('/Shared/Assets/Fonts/Sansation_Bold_Italic-webfont.eot?#iefix') format('embedded-opentype'),
url('/Shared/Assets/Fonts/Sansation_Bold_Italic-webfont.woff') format('woff'),
url('/Shared/Assets/Fonts/Sansation_Bold_Italic-webfont.ttf') format('truetype'),
url('/Shared/Assets/Fonts/Sansation_Bold_Italic-webfont.svg#SansationBoldItalic') format('svg');
font-weight: normal;
font-style: normal;
}
/* Set Fonts */
a, p, li, text, label, input, submit, textarea/* DEPRECATED:, #PositionPayRange*/ {
font-family: 'SansationLight';
}
h1, h2, h3, h4, h5, h6, .PositionPayRange {
font-family: 'SansationBold';
}
/* Font sizing */
a, p, li, label {
font-size: small;
}
/* Set Font Colors */
a, p, li, text, label, input {
color: #111111;
}
h1, h2, h3, h4, h5, h6 {
color: #444444;
}
Can someone please explain why it works perfectly fine on the server, but never locally?
It does not matter which browser, or which version of a browser I use. Same results.
Edit:
My directory structure is:
root/
Shared/
Assets/
Fonts/
*fonts are in here.*
CSS/
* css files are in here. *
Home.cshtml
This should work for your current directory structure.
#font-face {
font-family: 'SansationRegular';
src: url('../Fonts/Sansation_Regular-webfont.eot');
src: url('../Fonts/Sansation_Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../Fonts/Sansation_Regular-webfont.woff') format('woff'),
url('../Fonts/Sansation_Regular-webfont.ttf') format('truetype'),
url('../Fonts/Sansation_Regular-webfont.svg#SansationRegular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'SansationLight';
src: url('../Fonts/Sansation_Light-webfont.eot');
src: url('../Fonts/Sansation_Light-webfont.eot?#iefix') format('embedded-opentype'),
url('../Fonts/Sansation_Light-webfont.woff') format('woff'),
url('../Fonts/Sansation_Light-webfont.ttf') format('truetype'),
url('../Fonts/Sansation_Light-webfont.svg#SansationLight') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'SansationBold';
src: url('../Fonts/Sansation_Bold-webfont.eot');
src: url('../Fonts/Sansation_Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../Fonts/Sansation_Bold-webfont.woff') format('woff'),
url('../Fonts/Sansation_Bold-webfont.ttf') format('truetype'),
url('../Fonts/Sansation_Bold-webfont.svg#SansationBold') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'SansationLightLightItalic';
src: url('../Fonts/Sansation_Light_Italic-webfont.eot');
src: url('../Fonts/Sansation_Light_Italic-webfont.eot?#iefix') format('embedded-opentype'),
url('../Fonts/Sansation_Light_Italic-webfont.woff') format('woff'),
url('../Fonts/Sansation_Light_Italic-webfont.ttf') format('truetype'),
url('../Fonts/Sansation_Light_Italic-webfont.svg#SansationLightLightItalic') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'SansationItalic';
src: url('../Fonts/Sansation_Italic-webfont.eot');
src: url('../Fonts/Sansation_Italic-webfont.eot?#iefix') format('embedded-opentype'),
url('../Fonts/Sansation_Italic-webfont.woff') format('woff'),
url('../Fonts/Sansation_Italic-webfont.ttf') format('truetype'),
url('../Fonts/Sansation_Italic-webfont.svg#SansationItalic') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'SansationBoldItalic';
src: url('../Fonts/Sansation_Bold_Italic-webfont.eot');
src: url('../Fonts/Sansation_Bold_Italic-webfont.eot?#iefix') format('embedded-opentype'),
url('../Fonts/Sansation_Bold_Italic-webfont.woff') format('woff'),
url('../Fonts/Sansation_Bold_Italic-webfont.ttf') format('truetype'),
url('../Fonts/Sansation_Bold_Italic-webfont.svg#SansationBoldItalic') format('svg');
font-weight: normal;
font-style: normal;
}
Try path like this
src: url('../Shared/Assets/Fonts/Sansation_Regular-webfont.eot');
I have added with #fontface an iconfont. The only problem is, that it is not visible under firefox. I have the newest version of firefox. Safari and Chrome are working perfectly fine.
#font-face {
font-family: 'iconFont';
src: url('../fonts/iconFont.eot');
src: url('../fonts/iconFont.eot?#iefix') format('embedded-opentype'), url('../fonts/iconFont.svg#iconFont') format('svg'), url('../fonts/iconFont.woff') format('woff'), url('/fonts/iconFont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'iconFont';
src: url('../fonts/iconFont.eot');
src: url('../fonts/iconFont.eot?#iefix') format('embedded-opentype'),
url('../fonts/iconFont.woff') format('woff'),
url('../fonts/iconFont.ttf') format('truetype'),
url('../fonts/iconFont.svg#iconFont') format('svg');
font-weight: normal;
font-style: normal;
}
For font-face kit generations you can use:
http://www.fontsquirrel.com/fontface/generator
http://fontface.codeandmore.com/index.php
Try this:
#font-face {
font-family: 'iconFont';
src: url('../fonts/iconFont.eot');
src: url('../fonts/iconFont.eot') format('embedded-opentype'), url('../fonts/iconFont.svg') format('svg'), url('../fonts/iconFont.woff') format('woff'), url('/fonts/iconFont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
avoid the shorthand font format
#font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9 */
}
I've a problem with #font-face. In ie7 and ie8 it does not work. In 9 and all other browsers it works.
My code is:
#font-face {
font-family: 'KSD-Avenir-Roman';
src: url('fonts/KSD-Avenir-Roman.eot');
src: local('?'), url('fonts/KSD-Avenir-Roman.woff') format('woff'), url('fonts/KSD-Avenir-Roman.ttf') format('truetype'), url('fonts/KSD-Avenir-Roman.svg') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'KSD-Avenir-Black';
src: url('fonts/KSD-Avenir-Black.eot');
src: url('fonts/KSD-Avenir-Black.eot?#iefix') format('embedded-opentype'),
url('fonts/KSD-Avenir-Black.woff') format('woff'),
url('fonts/KSD-Avenir-Black.ttf') format('truetype'),
url('fonts/KSD-Avenir-Black.svg#open_sans_condensedbold') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'KSD-Avenir-Light';
src: url('fonts/KSD-Avenir-Light.eot');
src: url('fonts/KSD-Avenir-Light.eot?#iefix') format('embedded-opentype'),
url('fonts/KSD-Avenir-Light.woff') format('woff'),
url('fonts/KSD-Avenir-Light.ttf') format('truetype'),
url('fonts/KSD-Avenir-Light.svg#open_sans_condensedbold') format('svg');
font-weight: normal;
font-style: normal;
}
Can someone fix me?
Thank you!
Just a guess, but maybe:
src: local('?')
should be
src: url('fonts/KSD-Avenir-Roman.eot?#iefix')