I am using Lato fonts in my website,Mozilla and chrome are not rendering the font when i referred the fonts from fonts folder , then after I have used embedded woff inside the css files which is working fine but the css files have become large sizes.
My question is ,Why the font is not working good when i am referring from external folder,but the same is working fine when i am embedding inside the css?
/* Webfont: ../fonts/Lato-Regular */#font-face {
font-family: 'Lato-Regular';
src: url('../fonts/Lato-Regular.eot'); /* IE9 Compat Modes */
src: url('../fonts/Lato-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/Lato-Regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/Lato-Regular.ttf') format('truetype');
font-style: normal;
font-weight: normal;
text-rendering: optimizeLegibility;
}
Remove text-rendering and check the same
Update :
Try this
#font-face{font-family:'Lato-Regular';
src: url('../Lato-Regular.eot');
src: url('../Lato-Regular.eot?#iefix') format('embedded-opentype'),
url('../Lato-Regular.woff') format('woff'),
url('../Lato-Regular.ttf') format('truetype'),
url('../Lato-Regular.svg#Lato-Regular') format('svg');
font-weight:normal;
font-style:normal;
}
Related
Over the years, I've used the following font-face declaration:
#font-face {
font-family: 'museo_sans_rounded';
font-style: normal;
font-weight: 500;
src: url('../fonts/museo/museosansrounded-300-webfont.eot');
src: url('../fonts/museo/museosansrounded-300-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/museo/museosansrounded-300-webfont.woff2') format('woff2'),
url('../fonts/museo/museosansrounded-300-webfont.woff') format('woff'),
url('../fonts/museo/museosansrounded-300-webfont.ttf') format('truetype'),
url('../fonts/museo/museosansrounded-300-webfont.svg#museo_sans_rounded300') format('svg');
}
Now I just need to support IE11 and all the modern browsers. Can this declaration be simplified?
According to this article on embedding custom fonts using #font-face:
The #font-face rule allows custom fonts to be loaded on a webpage. Once added to a stylesheet, the rule instructs the browser to download the font from where it is hosted, then display it as specified in the CSS.
There are various different levels of browser support for different fonts. The trend seems to be that you can get away with offering WOFF and WOFF2, but this is their recommendation for "deepest possible browser support":
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
For IE11:
#font-face {
font-family: 'MyWebFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff'),
url('myfont.ttf') format('truetype');
}
.eot ==> for IE9 Compat Modes
.eot?#iefix ==> for IE6-IE8
.woff2 ==> for super Modern browser like Chrome, Firefox...
.woff ==> for pretty Modern.. so to speak
.ttf ==> specially for Safari, Android, iOS
.svg#svgFontName ==> just for Legacy iOS
When I use this on my style tag the font works just fine with FireFox and Google Chrome And Edge :
#font-face {
font-family: 'AlArabiyaRegular';
src :url('template/fonts/ae_AlArabiya.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
but it's not working on IE so I seareched about it and it's looks like I have to use 'woff' and 'eot' in order to make it work with IE so I used this code :
#font-face {
font-family: 'AlArabiyaRegular';
src: url('template/fonts/ae_AlArabiya.eot');
src: url('template/fonts/ae_AlArabiya.woff') format('woff'),
url('template/fonts/ae_AlArabiya.tff') format('truetype'),
url('template/fonts/ae_AlArabiya.svg#webfontg8dbVmxj') format('svg');
}
but when I change my style to it's not working even on FireFox
Use all the css font family src posibilities:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
If a .ttf works in other browsers but not IE, it's usually a sign that the font hasn't got the "installable bit" set. See this thread for more info and fixes.
I have 4 Fonts I need to use on a website and i have there files in my website folder
Baskerville.ttc
BellGothicstd-Black.otf
BellGothicstd-Bold.otf
JennaSue.ttf
I have tried to Import the using #Import and The fonts still do not work here is what I used:
#import url(../fonts/BellGothicStd-Black.otf);
#import url(../fonts/BellGothicStd-Bold.otf);
#import url(../fonts/Baskerville.ttc);
#import url(../fonts/JennaSue.ttf);
I also tried to use the #font-face Rule this is what I used:
#font-face {
font-family: 'BellGothicBlack';
src: url('../fonts/BellGothic-Black.otf') format('OpenType'),
}
#font-face {
font-family: 'BellGothicBold';
src: url('../fonts/BellGothicStd-Bold.otf') format('OpenType'),
}
#font-face {
font-family: 'Baskerville';
src: url('../fonts/Baskerville.ttc') format('OpenType'),
}
#font-face {
font-family: 'JennaSue';
src: url('../fonts/JennaSue.ttf') format('TrueType'),
}
Could someone tell me what I'm doing wrong? I think I might be missing some code I'm not really sure.
Thanks in Advance
Tom
You will need to convert the font into the correct formats for all browsers to display them.. (check rights before you do this)
http://www.fontsquirrel.com/tools/webfont-generator
Your #font-face rule will also need to include all the font types...
Example:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
U need to generate font-faceto all the fonts for OS and Browser compatibility.
Font-face generator URL:http://www.fontsquirrel.com/tools/webfont-generator
#font-face {
font-family: 'Helvetica';
src: url('helvetica.eot');
src: url('helvetica.eot?iefix') format('eot'),
url('helvetica.woff') format('woff'),
url('helvetica.ttf') format('truetype'),
url('helvetica.svg#helvetica') format('svg');
font-weight: normal;
font-style: normal;
}
I'm using #font-face in my project for loading a specific webfont ("Amsi Pro"). The main problem is that it works on most of the computers I tested, but not on all (On those where it didn't work other websites with #font-face still worked).
Is there anything I've missed, or any server settings to set that will give me full support?
Some information of a PC where #font-face doesn't work:
whatsmybrowser.org/b/Q2TJ80F
Live Preview:
christlicher-gesundheitskongress.de
CSS:
#font-face {
font-family: 'AmsiPro';
font-weight: 400;
src: url('../webfonts/2E508B_0_0.eot');
src: url('../webfonts/2E508B_0_0.eot?#iefix') format('embedded-opentype'),
url('../webfonts/2E508B_0_0.woff2') format('woff2'),
url('../webfonts/2E508B_0_0.woff') format('woff'),
url('../webfonts/2E508B_0_0.ttf') format('truetype');
}
#font-face {
font-family: 'AmsiPro';
font-weight: 600;
src: url('../webfonts/2E508B_1_0.eot');
src: url('../webfonts/2E508B_1_0.eot?#iefix') format('embedded-opentype'),
url('../webfonts/2E508B_1_0.woff2') format('woff2'),
url('../webfonts/2E508B_1_0.woff') format('woff'),
url('../webfonts/2E508B_1_0.ttf') format('truetype');
}
html,body {
font-family: 'AmsiPro', Helvetica, sans-serif;
}
Even though it seems that Firefox 38 should support #font-face, there may be a partial use issue. Try using an app like Font-Squirrel to develop an SVG of your font and then reorder your #font-face like so:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Per this source, it should maximize the amount of support your font has.
Hope this helped!
I've tried many of the solutions found in other topics but still the font won't load in IE8.
The fonts are converted by FontSquirrel and also the CSS has been generated there. No alternation.
According to the other topics.. it should work now. But.. it does not. Is there any workaround to make it work? Or is it just one of those things i can keep hating ie8 about?
Problem can be seen on this URL: www.kokomogroningen.nl
Font-face is currently:
#font-face {
font-family: 'dincondregularregularcondRgRgularregularcondRgRgularregularcondRgRg';
src: url('/css/ff_din_condensed_regular-webfont.eot');
src: url('/css/ff_din_condensed_regular-webfont.eot?#iefix') format('embedded-opentype'),
url('/css/ff_din_condensed_regular-webfont.woff') format('woff'),
url('/css/ff_din_condensed_regular-webfont.ttf') format('truetype'),
url('/css/ff_din_condensed_regular-webfont.svg#dincondregularregularcondRgRgularregularcondRgRgularregularcondRgRg') format('svg');
font-weight: normal;
font-style: normal;
}
Source http://css-tricks.com/
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
This may also help
Font Face not working in IE8 as expected