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 */
}
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 have a displaying problem with the font on Safari. The font looks slitly thicker on some pages than others. I load only normal font-weight in the whole website (no bold), using #font-face.
Firefox and Chrome seem to display the font the same thickness on every pages.
Here is my code:
#font-face {
font-family: 'Stanley';
src: url('Stanley-RegularItalic.eot');
src: url('Stanley-RegularItalic.eot?#iefix') format('embedded-opentype'),
url('Stanley-RegularItalic.woff2') format('woff2'),
url('Stanley-RegularItalic.woff') format('woff'),
url('Stanley-RegularItalic.ttf') format('truetype'),
url('Stanley-RegularItalic.svg#Stanley-RegularItalic') format('svg');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'Stanley';
src: url('Stanley-Regular.eot');
src: url('Stanley-Regular.eot?#iefix') format('embedded-opentype'),
url('Stanley-Regular.woff2') format('woff2'),
url('Stanley-Regular.woff') format('woff'),
url('Stanley-Regular.ttf') format('truetype'),
url('Stanley-Regular.svg#Stanley-Regular') format('svg');
font-weight: normal;
font-style: normal;
}
See screenshot of two different pages:
Give a try, add this to your font-face
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
i have to add a regional language content on the site but the output shows as
²æà PÀApÃgÀªÀ ¸ÀÄÖrAiÉÆà ¤AiÀÄ«ÄvÀ,
where as i have imported the font in the css like this
#font-face {font-family: 'CoreIconsRegular';
src: url('fonts/coreicons-webfont.eot');
src: url('fonts/coreicons-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/coreicons-webfont.woff') format('woff'),
url('fonts/coreicons-webfont.ttf') format('truetype'),
url('fonts/coreicons-webfont.svg#coreiconsregular') format('svg');
font-family: "akshar";
src: url(/akshar.eot); /* IE */
src: local("The Real Font Name"),
url(/akshar.ttf) format("truetype"); /* non-IE */
font-weight: normal;
font-style: normal;
}
* {
font-family: "akshar", Arial, Helvetica, sans-serif;
font-weight:400;
}
please help???
You have the Declaration syntax error in your CSS. Update your CSS like below.
#font-face {
font-family: 'CoreIconsRegular';
src: url('fonts/coreicons-webfont.eot');
src: url('fonts/coreicons-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/coreicons-webfont.woff') format('woff'),
url('fonts/coreicons-webfont.ttf') format('truetype'),
url('fonts/coreicons-webfont.svg#coreiconsregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "akshar";
src: url(/akshar.eot); /* IE */
src: local("The Real Font Name"),
url(/akshar.ttf) format("truetype"); /* non-IE */
font-weight: normal;
font-style: normal;
}
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'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')