My client has IE8 or IE11 with a lot of security configuration. They have the font download option disabled and that makes the bootstrap icons to not show up. Is there anyway to make them appear?
The bootstrap icons are imported via CSS 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')}
Instead you can use a URI Generator to convert the files into a data string value.
This will allow you to use the font icons without having to import the files
Related
I have linked the minified CSS of Font Awesome from Bootstrap CDN in a webpage. The problem is that the icons appear later than the rest of the page content after a visible delay.
What is the best way to get rid of this delay? (FYI, I have already included this CSS file above every other CSS and JS link in the head.)
The minified css would not make much of a difference in load time. That font awesome css file references the paths to external font files that will load in after the page loads. You can see the delay on font awesome's website: https://fortawesome.github.io/Font-Awesome/icons/
#font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.5.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
You could base64 encode the fonts and include them right in your site's css. This would substantially increase your site's css load time, but it would get rid of the flash. Although it might not work in all browsers and I would not recommend it.
You could try hosting the font awesome css and fonts directly on your server. The CDN might be the cause of the latency.
I resolved the issue by self hosting the icons, this is described at https://fontawesome.com/docs/web/setup/host-yourself/webfonts
Try to change url() to data-uri()
LESS:
data-uri('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'),
http://lesscss.org/functions/#misc-functions-data-uri
Hi guys I've done a fair amount of digging and this persistent problem is driving me insane.
I can't get my font-type to load for mobile and IE.
My site is http://kays.vurb.us/
I am talking about the hamburger icon when in responsive mode. It uses the letter 'a' with a special font 'etmodules'.
This is how my css looks like:
#font-face {
font-family: 'etmodules';
src: url('etmodules_v2_4.eot');
src: url('etmodules_v2_4.eot?#iefix') format('embedded-opentype'),
url('etmodules_v2_4.woff2') format('woff2'),
url('etmodules_v2_4.woff') format('woff'),
url('etmodules_v2_4.ttf') format('truetype'),
url('etmodules_v2_4.svg#etmodules_v2_4regular') format('svg');
font-weight: normal;
font-style: normal;
}
I put the files in my main wordpress directory. I don't know what I am doing wrong. Since it doesn't work on IE and mobile I tried looking at the IE developer tools but I can't figure out why the font won'
t download or load on the site. Please help me :(
Create a new folder called fonts or any name you want inside your theme folder, then upload your font files inside that folder
Then use absolute path e.g
src: url(http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf);
The below code doesn't make a call to download the file. I am using this within a Node.js and Express framework.
#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.woff') format('woff'),
url('../../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
url('../../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
The above code should be downloading glyphicon font in the browser, but it doesn't do so. In the developer toolbar of Chrome and Firefox I don't see any call being made to the specified URL.
Could someone please explain why
font file doesn't get loaded until use them.
I was trying to load glyphicon font but i was not using them in my html. Hence it wasn't loaded.
#font-face is kind of confusing as all the browsers cannot decide on a single file format to use. Below is what I am currently using to add 1 new font to a site, you can see there is 4 separate font files, I know that each one is because some browsers support different formats but does the browser download all the files or just the 1 that it needs?
#font-face {
font-family: 'Oswald';
src: url('oswald-webfont.eot');
src: url('oswald-webfont.eot?#iefix') format('embedded-opentype'),
url('oswald-webfont.woff') format('woff'),
url('oswald-webfont.ttf') format('truetype'),
url('oswald-webfont.svg#OswaldRegular') format('svg');
font-weight: normal;
font-style: normal;
}
I would expect for a browser to download all fonts that it supports and than apply the latest only, just like with other css properties.
My expectation seems to be wrong though. On a site that embedded fonts with markup identical to what you've provided above, FF only downloaded the .woff file even though it supports .ttf/.otf as well.
FYI, the support matrix; individual formats are linked to at the bottom.
I'm using http://www.fontsquirrel.com/fontface/generator to generate my font ready for web. I've set the options to include subsetting of the German language.
In the website I put this: Über WFW Deutschland but when viewed it comes out as Uber WFW Deutschland. Whats weird is that if I view in any IE version it shows correctly. If I switch to any default system font it also displays correctly in any browser.
How can I get my generated font to work correctly?
Update - CSS Code from generator:
#font-face {
font-family: 'PalatinoMedium';
src: url('../fonts/palatinm-webfont.eot');
src: url('../fonts/palatinm-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/palatinm-webfont.woff') format('woff'),
url('../fonts/palatinm-webfont.ttf') format('truetype'),
url('../fonts/palatinm-webfont.svg#PalatinoMedium') format('svg');
font-weight: normal;
font-style: normal;
}
After hours of fannying about I found that the option Apply Hinting - Improve Win rendering when ticked was breaking the font. Un-ticked that and reconverted my font and now the font is displaying as it should.
Although the font doesn't look as nice on Windows...