I'm trying to reduce the http requests on my website by combining multiple CSS files. I'm copying and pasting them in the order they are right now when it all works but when I try using this giant combined CSS file certain icons aren't showing up. The problem seems to be with a font-awesome CSS file, as when I separate that out the icons show up.
I thought that multiple CSS files functioned exactly the same as if you were to combine them in order but this does not seem to be the case for me. I don't know whether maybe it's because the combined CSS file is too big (466 kb) or that I'm combining minified and normal files, I've checked that all the selectors are the exact same but it's not showing the same specific icons.
Is there something about combining CSS files that I'm missing?
Font Awesome makes reference to a fonts directory where the font files are stored. In your combined CSS file you will need to make sure that either the fonts folder is still in the right spot relative to your CSS file or you will need to alter the path to the fonts that font awesome is using.
Below is the snippet Font Awesome uses to reference the fonts. You may need to change the ../fonts/ to ./fonts/ if your stylesheet and fonts folder are in the same directory.
#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;
}
Normally the CSS for font awesome is stored in a CSS folder. So the CSS tries to find fonts in the fonts folder one level higher than the CSS.
You can try with minifier CSS. you have to reduce the weight this way.
check link: CSS minifier
Related
I am trying to use a custom font, which is not available via Google Fonts. I unzipped the font and put it into src/assets/fonts of my React project.
In my index.css I am loading the font like:
#font-face {
font-family: 'LemonMilk';
src: local('LemonMilk'), url(./assets/fonts/LemonMilk.otf) format('otf');
}
I tested the app both on the localhost and hosted it on the web for testing and it is working fine, since the font is installed locally on my machine, but if I open the app on a different machine it is not working. I also deleted the font from my machine and the fallback font started to show since then. What am I missing ? Thank you
It's looking like Your browser has a problem with understanding the font file. Try to make the webfont package from the font file. There is lot of tools to approach it:
https://www.fontsquirrel.com/tools/webfont-generator
Webfont package will contain the font in all major supported formats and will generate the css #font directive for You.
DISCLAIMER: Ensure that You have the rights to use the font.
well i suggest creating a different css file for your fonts then import it to your main css also this site generate font-face for your font with css file!
The correct font name is Lemon/Milk and you'll need to convert it to other format like WOFF WOFF2 as well.
Please Follow this:
Go the this Website free online font generator
Upload your font and check TTF, EOT, WOFF, WOFF2 (See browser support)
Click Convert > Download
Upload the newly converted fonts to your server
Finally your CSS should look like similar to this.
#font-face {
font-family: 'Lemon/Milk';
src: url('LemonMilkbold.eot');
src: url('LemonMilkbold.eot?#iefix') format('embedded-opentype'),
url('LemonMilkbold.woff2') format('woff2'),
url('LemonMilkbold.woff') format('woff'),
url('LemonMilkbold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
Please Note that you'll need to convert any other font weight too. and don't forget to add the correct path
In /src/site/globals/site.variables, I can see how you can define google fonts, which get imported from when you compile. What I am interested in is defining my own custom fonts where I will supply my own font files.
I can’t find docs on how to do it. While I know how to do it in CSS, I am wondering if it is already built-in in this framework but I have simply missed it.
Thanks!
I don't believe there is a built-in way to do it. Here's how I did it.
I used the standard #font-face css rule. I then placed it in the site.overrides file. I am using a less variable (#font-path) to simplify my file paths.
#font-path: '../../fonts';
#font-face {
font-family: 'my-font';
src: url('#{font-path}/my-font.woff') format('woff'),
url('#{proxima-prefix}my-font.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
You'll have to make sure that the font files are served up appropriately by your server.
The above can be turned into a less mixin based on your usage as well.
A good resource on #font-face and formats: https://css-tricks.com/snippets/css/using-font-face/
A great answer on how to use different font weights/styles: https://stackoverflow.com/a/10046346/7681976
I'm very confused about LESS and in particular, the Font Awesome local files in a template I'm using.
I apparently have Font Awesome 4.3 and I've just downloaded 4.7. Of the files common to my project and the downloaded zip file, I'v overwritten the fonts and the less folders. Shouldn't that be enough to have my project use the latest icon set? - It's not as the old icons are working, but the new ones are not.
If I'm not recompiling less (do I even have to???), what else would I need to look for to get the new icons working?
EDIT:
In the main css file for the template, I've found some code related to Font Awesome:
#font-face {
font-family: 'FontAwesome';
src: url('dev-plugins/fonts/fontawesome-webfont.eot?v=4.3.0');
src: url('dev-plugins/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('dev-plugins/fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('dev-plugins/fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('dev-plugins/fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('dev-plugins/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
In that same file is reference to the FA icons - example:
.fa-times-circle-o:before {
content: "\f05c";
}
.fa-check-circle-o:before {
content: "\f05d";
}
So am now assuming my whole template needs recompiling?
I've worked it out by doing the following:
access the source files for the template
replace the Font Awesome LESS files with the latest version from their zip download
replace the Font Awesome font files with the latest
with the new files in place, re compile the main CSS LESS file
overwrite the outputted CSS with the one in my project
I'm using using Windows so I used WinLess to compile the LESS file.
So the answer to my question is: yes - I did need to recompile some LESS because the Font Awesome details are embedded (for reasons beyond me) in the main CSS file.
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
Everything is fine but when I use ../ it doesn't work. To call the CSS I use: <link rel="stylesheet" href="../../IcoMoon-App/style.css" /> and it do appears but as . I get the error at MainFolder/Albumes/Clarity_Deluxe_Edition/index.html, but when use the icons at MainFolder/index.html they're displayed well (note that the css location to this one is <link rel="stylesheet" href="IcoMoon-App/style.css" />). This is how my directory is structured:
MainFolder
├index.html
├css
│└index_style.css
├IcoMoon-App
│├IcoMoon-App.eot
│├IcoMoon-App.svg
│├IcoMoon-App.ttf
│├IcoMoon-App.woff
│└style.css
└Albumes
└Clarity_Deluxe_Edition
├index.html
└css
└index_style.css
Yes, because of I changed the location, I also changed the #font-face:
#font-face {
font-family: 'IcoMoon-App';
src:url('IcoMoon-App.eot?xzz47n');
src:url('IcoMoon-App.eot?#iefixxzz47n') format('embedded-opentype'),
url('IcoMoon-App.woff?xzz47n') format('woff'),
url('IcoMoon-App.ttf?xzz47n') format('truetype'),
url('IcoMoon-App.svg?xzz47n#IcoMoon-App') format('svg');
font-weight: normal;
font-style: normal;
}
Am I using wrong the "back folder" (../, don't know the exact name)? Or I did a mistake when changing the location?
One solution to this is using a different way of defining your paths.
In your CSS file, change the path to your IcoMoon font files to:
src:url('/IcoMoon-App/IcoMoon-App.eot?xzz47n');
The / at the very start of the URL makes the browser start from the domain-level of your website and then add the URL exactly as it appears in the example I gave. This will build an "absolute" URL to your IcoMoon font files, regardless of how deep in your folder structure you are.
A drawback to this approach is that the fonts may not appear when you're browsing your site locally (e.g. at http://localhost/~alej27/yoursite) because that would make the browser search for the font files at http://localhost/IcoMoon-App/IcoMoon-App.eot?xzz47n. There are ways around that (hosts file modifying and setting up a virtual domain) but that's outside the scope of this question :)