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
Related
I am trying to improve the performance of my website and I am starting with the suggestions that Google Page Speed Insights is giving me.
I seem unable to solve this issue though:
It suggests using the font-display CSS property on this page - https://developers.google.com/web/updates/2016/02/font-display
I have done this:
#font-face {
font-family: 'Malaga OT Reg';
font-display: swap;
src: url('./MalagaOT-Reg.eot');
src: url('./MalagaOT-Reg.eot?#iefix') format('embedded-opentype'),
url('./MalagaOT-Reg.woff2') format('woff2'), url('./MalagaOT-Reg.woff') format('woff'),
url('./MalagaOT-Reg.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Museo Sans Rounded';
font-display: swap;
src: url('./MuseoSansRounded-300.eot');
src: url('./MuseoSansRounded-300.eot?#iefix') format('embedded-opentype'),
url('./MuseoSansRounded-300.woff2') format('woff2'),
url('./MuseoSansRounded-300.woff') format('woff'),
url('./MuseoSansRounded-300.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
#font-face {
font-family: 'Museo Sans Rounded';
font-display: swap;
src: url('./MuseoSansRounded-900.eot');
src: url('./MuseoSansRounded-900.eot?#iefix') format('embedded-opentype'),
url('./MuseoSansRounded-900.woff2') format('woff2'),
url('./MuseoSansRounded-900.woff') format('woff'),
url('./MuseoSansRounded-900.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'Museo Sans Rounded';
font-display: swap;
src: url('./MuseoSansRounded-700.eot');
src: url('./MuseoSansRounded-700.eot?#iefix') format('embedded-opentype'),
url('./MuseoSansRounded-700.woff2') format('woff2'),
url('./MuseoSansRounded-700.woff') format('woff'),
url('./MuseoSansRounded-700.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
#font-face {
font-family: 'Museo Sans Rounded';
font-display: swap;
src: url('./MuseoSansRounded-100.eot');
src: url('./MuseoSansRounded-100.eot?#iefix') format('embedded-opentype'),
url('./MuseoSansRounded-100.woff2') format('woff2'),
url('./MuseoSansRounded-100.woff') format('woff'),
url('./MuseoSansRounded-100.ttf') format('truetype');
font-weight: 200;
font-style: normal;
}
#font-face {
font-family: 'Museo Sans Rounded';
font-display: swap;
src: url('./MuseoSansRounded-500.eot');
src: url('./MuseoSansRounded-500.eot?#iefix') format('embedded-opentype'),
url('./MuseoSansRounded-500.woff2') format('woff2'),
url('./MuseoSansRounded-500.woff') format('woff'),
url('./MuseoSansRounded-500.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Museo';
font-display: swap;
src: url('./Museo-700.eot');
src: url('./Museo-700.eot?#iefix') format('embedded-opentype'),
url('./Museo-700.woff2') format('woff2'), url('./Museo-700.woff') format('woff'),
url('./Museo-700.ttf') format('truetype'), url('./Museo-700.svg#Museo-700') format('svg');
font-weight: 700;
font-style: normal;
}
#font-face {
font-family: 'Museo';
font-display: swap;
src: url('./Museo500-Regular.eot');
src: url('./Museo500-Regular.eot?#iefix') format('embedded-opentype'),
url('./Museo500-Regular.woff2') format('woff2'), url('./Museo500-Regular.woff') format('woff'),
url('./Museo500-Regular.ttf') format('truetype'),
url('./Museo500-Regular.svg#Museo500-Regular') format('svg');
font-weight: 500;
font-style: normal;
}
#font-face {
font-family: 'Museo';
font-display: swap;
src: url('./Museo900-Regular.eot');
src: url('./Museo900-Regular.eot?#iefix') format('embedded-opentype'),
url('./Museo900-Regular.woff2') format('woff2'), url('./Museo900-Regular.woff') format('woff'),
url('./Museo900-Regular.ttf') format('truetype'),
url('./Museo900-Regular.svg#Museo900-Regular') format('svg');
font-weight: 900;
font-style: normal;
}
But it has not made a difference to the PageSpeed report. I have tried both swap and fallback values for the font-display property.
Is anyone able to offer any advice for how I can solve this issue?
In my experience it works with font-display: swap; but it may take days for the PSI report to note your improvement, especially Mobile.
Remove the woff2 and only keep woff format.
set font-display property to block;
font-display: block;
Optionally you can remove tiff and eot reference as well to speed up the site.
hey I was having exact same issues. Then I added this piece of code to my style.css and the customise > additional css sections of my theme and Google stopped firing those warnings:
#font-face {
font-family: "Open Sans Regular";
src: url("https://fonts.googleapis.com/css2?family=Open+Sans");
font-display: swap;
}
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 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')