I am trying to load this custom font, and cannot get it to work on my server. I am just serving static files. This is the exact syntax I am using, and it works perfectly on my local machine.
#font-face {
font-family: "Telegrafico";
src: url('/assets/fonts/telegrafico.woff') format('woff'), url('/assets/fonts/telegrafico.eot') format('embedded-opentype'), url('/assets/fonts/telegrafico.ttf') format('truetype'), url('/assets/fonts/telegrafico.svg') format('svg');
}
The issues are in all browsers...I cannot figure out for the life of me what is wrong.
Any help is appreciated!
From our chat.
You are using a absolute URL in your CSS.
However on live your site is being served from a sub directory.
(The error here being a mismatch between the model of your local site and the live environment)
Solution is to use a relative path in your CSS instead of a absolute one.
So assuming /assets/css and /assets/fonts
#font-face {
font-family: "Telegrafico";
src: url('../fonts/telegrafico.woff') format('woff'), url('../fonts/telegrafico.eot') format('embedded-opentype'), url('../fonts/telegrafico.ttf') format('truetype'), url('../fonts/telegrafico.svg') format('svg');
}
Should suffice
Related
There are two fonts that, although they are appearing on the site just fine, are producing errors in DevTools.
#font-face {
font-family: Impact;
src: url(../fonts/impact-webfont.eot);
src: url(../fonts/impact-webfont.eot?#iefix) format('embedded-opentype'),
url(../fonts/impact-webfont.woff) format('woff'),
url(../fonts/impact-webfont.ttf) format('truetype'),
url(../fonts/impact-webfont.svg#impactregular) format('svg');
font-weight: 400;
font-style: normal;
}
#font-face {
font-family: kmi-genericons;
src: url(../fonts/kmi-genericons.eot?70543738);
src: url(../fonts/kmi-genericons.eot?70543738#iefix)
format('embedded-opentype'),
url(../fonts/kmi-genericons.woff2?70543738) format('woff2'),
url(../fonts/kmi-genericons.woff?70543738) format('woff'),
url(../fonts/kmi-genericons.ttf?70543738) format('truetype'),
url(../fonts/kmi-genericons.svg?70543738#kmi-genericons) format('svg');
font-weight: 400;
font-style: normal;
}
The paths in the console errors are incorrect. The CSS snippet above is found in /wp-content/themes/kmi/css/compiles.min.css. Since the path is relative, it should be loading from /wp-content/themes/kmi/fonts/. The network tab shows it's recognizing the correct path as well:
So it's like there are 2 requests for the same font: one at the correct relative path, and one at an incorrect root path. Why would this be?
Turns out, Nehemiah was correct in his comment on my question. This CSS was being inserted via JavaScript through a plugin (Above the Fold Optimization), which I didn't realize, in addition to being called from a regular <link> tag. Thus, it was loading twice, and the relative path did not resolve when inserted via JavaScript.
Sorry for missing this - thank you!
I have been trying a lot lately to get Glyphicons to work but with no luck. I'm using JSF framework with the following file structure.
Also I modified the CSS in bootstrap.css by removing (..) from every path in the following CSS code to become like this:
#font-face {
font-family: 'Glyphicons Halflings';
src: url('/fonts/glyphicons-halflings-regular.eot');
src: url('/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('/fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('/fonts/glyphicons-halflings-regular.woff') format('woff'), url('/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
When not removing (..), JSF will show the following 2 warnings:
Warning: JSF1091: No mime type could be found for file css/lib/fonts/glyphicons-halflings-regular.woff2. To resolve this, add a mime-type mapping to the applications web.xml.
Warning: JSF1064: Unable to find or serve resource, css/lib/fonts/glyphicons-halflings-regular.woff2.
But still always showing me a strange box instead of the Glyphicon that is supposed to show up?
Help please..
I found the solution by using the following expression to refer to the resources properly:
#font-face {
font-family: 'Glyphicons Halflings';
src: url("#{resource['default/1_0/fonts/glyphicons-halflings-regular.eot']}");
src: url("#{resource['default/1_0/fonts/glyphicons-halflings-regular.eot']}") format('embedded-opentype'), url("#{resource['default/1_0/fonts/glyphicons-halflings-regular.woff2']}") format('woff2'), url("#{resource['default/1_0/fonts/glyphicons-halflings-regular.woff']}") format('woff'), url("#{resource['default/1_0/fonts/glyphicons-halflings-regular.ttf']}") format('truetype'), url("#{resource['default/1_0/fonts/glyphicons-halflings-regular.svg']}") format('svg');
}
The problem is with the fonts folder.
Replace your fonts folder with the one at: https://github.com/twbs/bootstrap and it will work fine.
I checked all question regarding this issue here but no luck. Issue is only with IE7 and above, all other browsers it's working fine.
Below is my CSS code
#font-face {
font-family: 'HelveticaNeue23UltraLightExtended';
src: url('../fonts/HelveticaNeue-UltraLigExt/helveticaneue-ultraligext.eot?#iefix');
src: url('../fonts/HelveticaNeue-UltraLigExt/helveticaneue-ultraligext.eot?#iefix') format('embedded-opentype'),
url('../fonts/HelveticaNeue-UltraLigExt/helveticaneue-ultraligext.woff') format('woff'),
url('../fonts/HelveticaNeue-UltraLigExt/helveticaneue-ultraligext.ttf') format('truetype'),
url('../fonts/HelveticaNeue-UltraLigExt/helveticaneue-ultraligext.svg#HelveticaNeue23UltraLightExtended') format('svg');
}
also tried
#font-face {
font-family: 'HelveticaNeue23UltraLightExtended';
src: url('../fonts/HelveticaNeue-UltraLigExt/helveticaneue-ultraligext.eot');
src: url('../fonts/HelveticaNeue-UltraLigExt/helveticaneue-ultraligext.eot?#iefix') format('embedded-opentype'),
url('../fonts/HelveticaNeue-UltraLigExt/helveticaneue-ultraligext.woff') format('woff'),
url('../fonts/HelveticaNeue-UltraLigExt/helveticaneue-ultraligext.ttf') format('truetype'),
url('../fonts/HelveticaNeue-UltraLigExt/helveticaneue-ultraligext.svg#HelveticaNeue23UltraLightExtended') format('svg');
}
and here is the test link http://bit.ly/Rtoxgw
I've had a similar problem where IE ignored the font. The problem then was that the font-family name I used contained too many characters for IE, but worked fine for all the other browsers.
Try shorten down the name HelveticaNeue23UltraLightExtended.
#iefix after question mark states that, you need that url to search a query parameter that will fool IE and let you use website without wasting cache.Many people call it a cache bursting trick.(you can try anything after # in front of question mark, its just a cache burst technique .)
You need to change the order in which you write the fonts to get data sequentially out of fonts, and if you do incorrect ordering ,you may end up with errors in reading "eot" files, permission install on "ttf" format files
try this code, this should work, also you need to locally define this new font as a resource[rename resource files to short names]
Also change this when you use it in css, or style sheets.
Also shorten the font name...
try this:
HelveticaNeueule
#font-face {
font-family: HelveticaNeueule;
src: url('../fonts/HelveticaNeue-UltraLigExt/HelveticaNeueule.eot?#iefix') format('embedded-opentype'),
src: local(HelveticaNeueule)
src: url('../fonts/HelveticaNeue-UltraLigExt/helveticaneue-ultraligext.svg#HelveticaNeue23UltraLightExtended') format('svg'),
src: url('../fonts/HelveticaNeue-UltraLigExt/HelveticaNeueule.ttf') format('truetype'),
src: url('../fonts/HelveticaNeue-UltraLigExt/HelveticaNeueule.woff') format('woff'),
font-weight: bold
The font parameters like bold, italics can be specified later at end of above block as shown,
Hope this will fix your problem...
I want my friend to able to check out my WIP site that I've been developing locally using Chrome (localhost/sitename/, or now actually myIP/sitename). I got it to work and realized my fonts weren't loading, and then checked all my other browsers on my computer and noticed the same thing.
I've done absolute paths and even tried adding permissions to the .htaccess file to no avail. Below is my code. Any suggestions? Nothing is live yet.
#font-face {
font-family: 'arvo';
src: url('/arvo-regular-webfont.eot');
src: url('/arvo-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('/arvo-regular-webfont.woff') format('woff'),
url('/arvo-regular-webfont.ttf') format('truetype'),
url('/arvo-regular-webfont.svg#arvo') format('svg');
font-weight: normal;
font-style: normal;
}
When I define something like this and I try to upload it to server, the font´s file is not loaded and the font-face is not perfomed in the web. I don´t see anything wrong in my code. I´m sure that the path is correct.
Let´s look at my code:
font-family: 'icon';
src: url('font/websymbolsligaregular.eot');
src: url('font/websymbolsligasegular.eot?#iefix') format('embedded-opentype'),
url('font/websymbolsligasegular.woff') format('woff'),
url('font/websymbolsligasegular.ttf') format('truetype'),
url('font/websymbolsligaregular.svg#WebSymbolsRegular') format('svg');
When I remove everyhting and remains just this line, it works:
font-family: 'icon';
src: url('font/websymbolsligaregular.eot');
Can somebody tell me what should I do ?