On FontSquirrell, I have converted the font Exo from ttf to all the possible versions, I have put all the fonts in fonts>exo and in the CSS file this code:
#font-face{
font-family: 'exoblack';
src: url('/fonts/exo/exo-black-webfont.eot');
src: url('/fonts/exo/exo-black-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/exo/exo-black-webfont.woff2') format('woff2'),
url('/fonts/exo/exo-black-webfont.woff') format('woff'),
url('/fonts/exo/exo-black-webfont.ttf') format('truetype'),
url('/fonts/exo/exo-black-webfont.svg#exoblack') format('svg');
font-weight: normal;
font-style: normal;
}
Why can't I see the font in local? I tried to put src: local:
#font-face{
font-family: 'exoblack';
src: url('/fonts/exo/exo-black-webfont.eot');
**src: local('exoblack'), url('/fonts/exo/exo-black-webfont.eot') format('embedded-opentype');**
src: url('/fonts/exo/exo-black-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/exo/exo-black-webfont.woff2') format('woff2'),
url('/fonts/exo/exo-black-webfont.woff') format('woff'),
url('/fonts/exo/exo-black-webfont.ttf') format('truetype'),
url('/fonts/exo/exo-black-webfont.svg#exoblack') format('svg');
font-weight: normal;
font-style: normal;
}
What am I doing wrong?
Related
I am going to go crazy. I am trying to use Agency FB and Calibri fonts on my website which seem to work on all browsers whilst on Desktop but they do not display when I go to my site on my iPhone - some other standard font is used.
I have used Agency FB for my logo and for a font within a Vector I created in XD. Both of the text contained within these are part of the vector. The body of my website also uses various Calibri weights and styles. The problem being that the font is replaced for my logo and the vector image which completley destroys the layout as the font just doesn't fit.
I have used font-face in my css stylesheet but that does not seem to be working. I have included the code for font-face below.
#font-face {
font-family: 'Calibri Light';
src: url('fonts/Calibri-Light.eot');
src: url('fonts/Calibri-Light.eot') format('embedded-opentype'),
url('fonts/Calibri-Light.woff2') format('woff2'),
url('fonts/Calibri-Light.woff') format('woff'),
url('fonts/Calibri-Light.ttf') format('truetype'),
url('fonts/Calibri-Light.svg') format('svg');
font-weight: 300;
font-style: normal;
}
#font-face {
font-family: 'Calibri Light Italic';
src: url('fonts/Calibri-LightItalic.eot');
src: url('fonts/Calibri-LightItalic.eot') format('embedded-opentype'),
url('fonts/Calibri-LightItalic.woff2') format('woff2'),
url('fonts/Calibri-LightItalic.woff') format('woff'),
url('fonts/Calibri-LightItalic.ttf') format('truetype'),
url('fonts/Calibri-LightItalic.svg') format('svg');
font-weight: 300;
font-style: italic;
}
#font-face {
font-family: 'Agency FB';
src: url('fonts/AgencyFB-Reg.eot');
src: url('fonts/AgencyFB-Reg.eot') format('embedded-opentype'),
url('fonts/AgencyFB-Reg.woff2') format('woff2'),
url('fonts/AgencyFB-Reg.woff') format('woff'),
url('fonts/AgencyFB-Reg.ttf') format('truetype'),
url('fonts/AgencyFB-Reg.svg') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Calibri Bold';
src: url('fonts/Calibri-Bold.eot');
src: url('fonts/Calibri-Bold.eot') format('embedded-opentype'),
url('fonts/Calibri-Bold.woff2') format('woff2'),
url('fonts/Calibri-Bold.woff') format('woff'),
url('fonts/Calibri-Bold.ttf') format('truetype'),
url('fonts/Calibri-Bold.svg') format('svg');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'Calibri';
src: url('fonts/Calibri.eot');
src: url('fonts/Calibri.eot') format('embedded-opentype'),
url('fonts/Calibri.woff2') format('woff2'),
url('fonts/Calibri.woff') format('woff'),
url('fonts/Calibri.ttf') format('truetype'),
url('fonts/Calibri.svg') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Calibri Italic';
src: url('fonts/Calibri-Italic.eot');
src: url('fonts/Calibri-Italic.eot') format('embedded-opentype'),
url('fonts/Calibri-Italic.woff2') format('woff2'),
url('fonts/Calibri-Italic.woff') format('woff'),
url('fonts/Calibri-Italic.ttf') format('truetype'),
url('fonts/Calibri-Italic.svg') format('svg');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'Agency FB Bold';
src: url('fonts/AgencyFB-Bold.eot');
src: url('fonts/AgencyFB-Bold.eot') format('embedded-opentype'),
url('fonts/AgencyFB-Bold.woff2') format('woff2'),
url('fonts/AgencyFB-Bold.woff') format('woff'),
url('fonts/AgencyFB-Bold.ttf') format('truetype'),
url('fonts/AgencyFB-Bold.svg#AgencyFB-Bold') format('svg');
font-weight: bold;
font-style: normal;
}
I'm aware .tff files are used for iPhone/Safari but that doesn't seem to work. Any suggestions? Thanks
try with a different font-family name like
#font-face {
font-family: 'CalibriLight';
src: url('fonts/Calibri-Light.eot');
src: url('fonts/Calibri-Light.eot') format('embedded-opentype'),
url('fonts/Calibri-Light.woff2') format('woff2'),
url('fonts/Calibri-Light.woff') format('woff'),
url('fonts/Calibri-Light.ttf') format('truetype'),
url('fonts/Calibri-Light.svg') format('svg');
font-weight: 300;
font-style: normal;
}
#font-face {
font-family: 'CalibriLightItalic';
src: url('fonts/Calibri-LightItalic.eot');
src: url('fonts/Calibri-LightItalic.eot') format('embedded-opentype'),
url('fonts/Calibri-LightItalic.woff2') format('woff2'),
url('fonts/Calibri-LightItalic.woff') format('woff'),
url('fonts/Calibri-LightItalic.ttf') format('truetype'),
url('fonts/Calibri-LightItalic.svg') format('svg');
font-weight: 300;
font-style: italic;
}
#font-face {
font-family: 'Agency FB Reg';
src: url('fonts/AgencyFB-Reg.eot');
src: url('fonts/AgencyFB-Reg.eot') format('embedded-opentype'),
url('fonts/AgencyFB-Reg.woff2') format('woff2'),
url('fonts/AgencyFB-Reg.woff') format('woff'),
url('fonts/AgencyFB-Reg.ttf') format('truetype'),
url('fonts/AgencyFB-Reg.svg') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'CalibriBold';
src: url('fonts/Calibri-Bold.eot');
src: url('fonts/Calibri-Bold.eot') format('embedded-opentype'),
url('fonts/Calibri-Bold.woff2') format('woff2'),
url('fonts/Calibri-Bold.woff') format('woff'),
url('fonts/Calibri-Bold.ttf') format('truetype'),
url('fonts/Calibri-Bold.svg') format('svg');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'Calibri';
src: url('fonts/Calibri.eot');
src: url('fonts/Calibri.eot') format('embedded-opentype'),
url('fonts/Calibri.woff2') format('woff2'),
url('fonts/Calibri.woff') format('woff'),
url('fonts/Calibri.ttf') format('truetype'),
url('fonts/Calibri.svg') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'CalibriItalic';
src: url('fonts/Calibri-Italic.eot');
src: url('fonts/Calibri-Italic.eot') format('embedded-opentype'),
url('fonts/Calibri-Italic.woff2') format('woff2'),
url('fonts/Calibri-Italic.woff') format('woff'),
url('fonts/Calibri-Italic.ttf') format('truetype'),
url('fonts/Calibri-Italic.svg') format('svg');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'Agency FB Bold';
src: url('fonts/AgencyFB-Bold.eot');
src: url('fonts/AgencyFB-Bold.eot') format('embedded-opentype'),
url('fonts/AgencyFB-Bold.woff2') format('woff2'),
url('fonts/AgencyFB-Bold.woff') format('woff'),
url('fonts/AgencyFB-Bold.ttf') format('truetype'),
url('fonts/AgencyFB-Bold.svg#AgencyFB-Bold') format('svg');
font-weight: bold;
font-style: normal;
}
I use a fontface from font squirrel but they don't load. is there something in the code that has conflict?
#font-face {font-family: 'chunk-webfont';
src: url('/fonts/chunk-webfont.eot');
src: url('/fonts/chunk-webfont.eot?#iefix') format('eot'),
url('/fonts/chunk-webfont.woff') format('woff'),
url('/fonts/chunk-webfont.ttf') format('truetype'),
url('/fonts/chunk-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;}
try this
#font-face {font-family: 'chunk-webfont';
src: url('fonts/chunk-webfont.eot');
src: url('fonts/chunk-webfont.eot?#iefix') format('eot'),
url('fonts/chunk-webfont.woff') format('woff'),
url('fonts/chunk-webfont.ttf') format('truetype'),
url('fonts/chunk-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;}
Site in progress: http://stonetoolsupply.com
When I view the site http://stonetoolsupply.com in Firefox 26 on OSX 10.6.8 the fonts load correctly, but when I view this site as http://www.stonetoolsupply.com in Firefox 26 on OSX 10.6.8 the fonts aren't loaded and my text is unstyled. Why is this happening? I'm so stumped! Thanks!
Font stylesheet:
#font-face {
font-family: 'avenir_lt_std35_light';
src: url('avenirltstd-light-webfont.eot');
src: url('avenirltstd-light-webfont.eot?#iefix') format('embedded-opentype'),
url('avenirltstd-light-webfont.woff') format('woff'),
url('avenirltstd-light-webfont.ttf') format('truetype'),
url('avenirltstd-light-webfont.svg#avenir_lt_std35_light') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'avenir_lt_std85_heavy';
src: url('avenirltstd-heavy-webfont.eot');
src: url('avenirltstd-heavy-webfont.eot?#iefix') format('embedded-opentype'),
url('avenirltstd-heavy-webfont.woff') format('woff'),
url('avenirltstd-heavy-webfont.ttf') format('truetype'),
url('avenirltstd-heavy-webfont.svg#avenir_lt_std85_heavy') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'helvetica_neue_lt_st25ultraLt';
src: url('helveticaneueltstd-ultlt-webfont.eot');
src: url('helveticaneueltstd-ultlt-webfont.eot?#iefix') format('embedded-opentype'),
url('helveticaneueltstd-ultlt-webfont.woff') format('woff'),
url('helveticaneueltstd-ultlt-webfont.ttf') format('truetype'),
url('helveticaneueltstd-ultlt-webfont.svg#helvetica_neue_lt_st25ultraLt') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'helvetica_neue_lt_std45_light';
src: url('helveticaneueltstd-lt-webfont.eot');
src: url('helveticaneueltstd-lt-webfont.eot?#iefix') format('embedded-opentype'),
url('helveticaneueltstd-lt-webfont.woff') format('woff'),
url('helveticaneueltstd-lt-webfont.ttf') format('truetype'),
url('helveticaneueltstd-lt-webfont.svg#helvetica_neue_lt_std45_light') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'helvetica_neue_lt_std35_thin';
src: url('helveticaneueltstd-th-webfont.eot');
src: url('helveticaneueltstd-th-webfont.eot?#iefix') format('embedded-opentype'),
url('helveticaneueltstd-th-webfont.woff') format('woff'),
url('helveticaneueltstd-th-webfont.ttf') format('truetype'),
url('helveticaneueltstd-th-webfont.svg#helvetica_neue_lt_std35_thin') format('svg');
font-weight: normal;
font-style: normal;
}
Links to css files:
<link rel="stylesheet" type="text/css" href="http://stonetoolsupply.com/v/vspfiles/splash/css/main.css">
<link rel="stylesheet" type="text/css" href="http://stonetoolsupply.com/v/vspfiles/splash/fonts/stylesheet.css">
As per comments above - make sure you have refreshed the browser cache (also note that I am getting a javascript error in the F12 console)
Website us using this fonts css file and for some reason the correct fonts are being displayed only in Chrome, but not on Firefox or IE-
Can someone help us figure out what the problem could be and how we could fix this issue ?
Thanks
/*Museo Sans 100*/
#font-face {
font-family: 'museo_sans';
src: url('http://xxx.domain.com/fonts/museosans-100-webfont.eot');
src: url('http://xxx.domain.com/fonts/museosans-100-webfont.svg#museo_sans100') format('svg'),
url('http://xxx.domain.com/fonts/museosans-100-webfont.eot?#iefix') format('embedded-opentype'),
url('http://xxx.domain.com/fonts/museosans-100-webfont.woff') format('woff'),
url('http://xxx.domain.com/fonts/museosans-100-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
/*Museo Sans 300*/
#font-face {
font-family: 'museo_sans';
src: url('http://xxx.domain.com/fonts/museosans-300.eot');
src: url('http://xxx.domain.com/fonts/museosans-300.svg#museo_sans300') format('svg'),
url('http://xxx.domain.com/fonts/museosans-300.eot?#iefix') format('embedded-opentype'),
url('http://xxx.domain.com/fonts/museosans-300.woff') format('woff'),
url('http://xxx.domain.com/fonts/museosans-300.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
/*Museo Sans 700 italic*/
#font-face {
font-family: 'museo_sans';
src: url('http://xxx.domain.com/fonts/museosans-700italic-webfont.eot');
src: url('http://xxx.domain.com/fonts/museosans-700italic-webfont.svg#museo_sans700_italic') format('svg'),
url('http://xxx.domain.com/fonts/museosans-700italic-webfont.eot?#iefix') format('embedded-opentype'),
url('http://xxx.domain.com/fonts/museosans-700italic-webfont.woff') format('woff'),
url('http://xxx.domain.com/fonts/museosans-700italic-webfont.ttf') format('truetype');
font-weight: 700;
font-style: italic;
}
/*Museo Sans 900*/
#font-face {
font-family: 'museo_sans';
src: url('http://xxx.domain.com/fonts/museosans_900-webfont.eot');
src: url('http://xxx.domain.com/fonts/museosans_900-webfont.svg#museo_sans900') format('svg'),
url('http://xxx.domain.com/fonts/museosans_900-webfont.eot?#iefix') format('embedded-opentype'),
url('http://xxx.domain.com/fonts/museosans_900-webfont.woff') format('woff'),
url('http://xxx.domain.com/fonts/museosans_900-webfont.ttf') format('truetype');
font-weight: 900;
font-style: normal;
}
/*Avro*/
#font-face {
font-family: 'arvo';
src: url('http://xxx.domain.com/fonts/arvo-regular-webfont.eot');
src: url('http://xxx.domain.com/fonts/arvo-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('http://xxx.domain.com/fonts/arvo-regular-webfont.woff') format('woff'),
url('http://xxx.domain.com/fonts/arvo-regular-webfont.ttf') format('truetype'),
url('http://xxx.domain.com/fonts/arvo-regular-webfont.svg#arvoregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'arvo';
src: url('http://xxx.domain.com/fonts/arvo-bold-webfont.eot');
src: url('http://xxx.domain.com/fonts/arvo-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('http://xxx.domain.com/fonts/arvo-bold-webfont.woff') format('woff'),
url('http://xxx.domain.com/fonts/arvo-bold-webfont.ttf') format('truetype'),
url('http://xxx.domain.com/fonts/arvo-bold-webfont.svg#arvobold') format('svg');
font-weight: bold;
}
#font-face {
font-family: 'arvo';
src: url('http://xxx.domain.com/fonts/arvo-italic-webfont.eot');
src: url('http://xxx.domain.com/fonts/arvo-italic-webfont.eot?#iefix') format('embedded-opentype'),
url('http://xxx.domain.com/fonts/arvo-italic-webfont.woff') format('woff'),
url('http://xxx.domain.com/fonts/arvo-italic-webfont.ttf') format('truetype'),
url('http://xxx.domain.com/fonts/arvo-italic-webfont.svg#arvoitalic') format('svg');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: "museosans-300";
src: url( 'http://xxx.domain.com/fonts/museosans-300.eot' ); /* IE */
src: local("museosans-300"), url( 'http://xxx.domain.com/fonts/museosans-300.ttf' ) format("truetype"); /* non-IE */
}
make sure that the .woff file exists and then reload the website with ctrl+F5.
font-faces are funny and I've heard the order can make a difference. I use this and have never had an issue:
#font-face {
font-family:'Name';
src: url('fontName.eot');
src: url('fontName.eot?#iefix') format('embedded-opentype'),
url('fontName.woff') format('woff'),
url('fontName.ttf') format('truetype'),
url('fontName.svg#fontName') format('svg');
font-weight: normal;
font-style: normal;
}
If that doesn't work I would say your eot and woff files are probably corrupt. If you used a font-face generator that can happen. try it again or try a different one.
Does anyone know why Google Chrome is crashing when the user land on a page with webfonts
It does not happen all the time, but just too often
I'm just getting a blue screen page, and I have no clue why: The page is just fine when it's not coming from a redirect.
This is what I have found in the logs:
[3612:5872:17856358:INFO:buffered_resource_handler.cc(178)] To buffer: http://www.app.com/app/files/fonts/aller_lt-webfont.woff
[3612:5872:17856358:INFO:buffered_resource_handler.cc(178)] To buffer: http://www.app.com/app/files/fonts/allerdisplay-webfont.woff
[3612:5872:17856358:INFO:buffered_resource_handler.cc(140)] Finished buffering http://www.app.com/app/files/fonts/aller_lt-webfont.woff
[3612:5872:17856358:INFO:buffered_resource_handler.cc(140)] Finished buffering http://www.app.com/app/files/fonts/allerdisplay-webfont.woff
[3612:5872:17856545:WARNING:passive_log_collector.cc(175)] The passive log data has grown larger than expected, resetting
[3612:5872:17856607:WARNING:passive_log_collector.cc(175)] The passive log data has grown larger than expected, resetting
this is the code crashing: (.css)
#font-face {
font-family: 'AllerDisplay';
src: url('/app/uad/files/fonts/AllerDisplay.ttf');
}
#font-face {
font-family: 'Aller';
src: url('/app/uad/files/fonts/allerdisplay-webfont.eot');
src: local('☺'), url('/app/uad/files/fonts/allerdisplay-webfont.woff') format('woff'), url('/app/uad/files/fonts/allerdisplay-webfont.ttf') format('truetype'), url('/app/uad/files/fonts/allerdisplay-webfont.svg#webfontLZ8nc4vC') format('svg');
font-weight: 900;
font-style: normal;
}
#font-face {
font-family: 'Aller';
src: url('/app/uad/files/fonts/aller_ltit-webfont.eot');
src: local('☺'), url('/app/uad/files/fonts/aller_ltit-webfont.woff') format('woff'), url('/app/uad/files/fonts/aller_ltit-webfont.ttf') format('truetype'), url('/app/uad/files/fonts/aller_ltit-webfont.svg#webfontwJcwR5d9') format('svg');
font-weight: 100;
font-style: italic;
}
#font-face {
font-family: 'Aller';
src: url('/app/uad/files/fonts/aller_rg-webfont.eot');
src: local('☺'), url('/app/uad/files/fonts/aller_rg-webfont.woff') format('woff'), url('/app/uad/files/fonts/aller_rg-webfont.ttf') format('truetype'), url('/app/uad/files/fonts/aller_rg-webfont.svg#webfontGly2h2wa') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Aller';
src: url('/app/uad/files/fonts/aller_lt-webfont.eot');
src: local('☺'), url('/app/uad/files/fonts/aller_lt-webfont.woff') format('woff'), url('/app/uad/files/fonts/aller_lt-webfont.ttf') format('truetype'), url('/app/uad/files/fonts/aller_lt-webfont.svg#webfontoaLI8hBJ') format('svg');
font-weight: 100;
font-style: normal;
}
#font-face {
font-family: 'Aller';
src: url('/app/uad/files/fonts/aller_it-webfont.eot');
src: local('☺'), url('/app/uad/files/fonts/aller_it-webfont.woff') format('woff'), url('/app/uad/files/fonts/aller_it-webfont.ttf') format('truetype'), url('/app/uad/files/fonts/aller_it-webfont.svg#webfontEbJrfJy1') format('svg');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'Aller';
src: url('/app/uad/files/fonts/aller_bd-webfont.eot');
src: local('☺'), url('/app/uad/files/fonts/aller_bd-webfont.woff') format('woff'), url('/app/uad/files/fonts/aller_bd-webfont.ttf') format('truetype'), url('/app/uad/files/fonts/aller_bd-webfont.svg#webfontmJTweXww') format('svg');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'Aller';
src: url('/app/uad/files/fonts/aller_bdit-webfont.eot');
src: local('☺'), url('/app/uad/files/fonts/aller_bdit-webfont.woff') format('woff'), url('/app/uad/files/fonts/aller_bdit-webfont.ttf') format('truetype'), url('/app/uad/files/fonts/aller_bdit-webfont.svg#webfontO1egShyd') format('svg');
font-weight: bold;
font-style: italic;
}
Thanks
Resolved: http://code.google.com/p/chromium/issues/detail?can=2&q=&colspec=ID%20Stars%20Pri%20Area%20Feature%20Type%20Status%20Summary%20Modified%20Owner%20Mstone%20OS&sort=&id=62531