Since I have used Icon fonts, Its been a huge issue to have two colors with one class instead of a bunch of positioning or clipping.. since it is rather a common thing to have multicolored icons in a site, I came Across the solution today I thought I may just post this for people like me who looked for answers but only found complications...
Okay i am going to do this in a step-by-step manner:
ILLUSTRATOR PART
in illustrator copy the icon into a new document.
then cut the one color.
press save as and save as SVG
then paste the one you cut and delete the other one.
save as another SVG.
ICOMOON
Really is a great site.
start the app.
import the svg and download an save.
and then this is the CSS I used for a one class solution to multicolored font icons:
CSS
.icon-earth{
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.icon-earth:after {
content: "\e006";
color:#F33;
font-size:6em;
}
.icon-earth:before {
content: "\e007";
color:#0C0;
font-size:6em;
letter-spacing:-1em;
}
HTML
<div class="icon-earth"></div>
its quiet easy to interpret the CSS for you own needs, if help is need please shout and I will go through this step by step aswell...
And Finally Here is the JSFIDDLE, although i cant get custom Icon Fonts happening in JsFiddle...
Browser support is IE8 and up and then everything else i have checked..
Related
Here is the problem. So everything works fine for me on my machine, localhost and when the website is uploaded to online host. But I got my friends to go to the site to check if everything is working and the regular Roboto font loads fine but the thin version of it doesn't. I originally just had the import link from google for the font but later added the font face import code that I found on here but that doesn't work too. I even tried adding the font-weight property but it still doesn't work.
I need help my head hurts real bad here's the code enjoy
Top of the css file
#import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
#font-face {
font-family: 'Roboto';
src: local('Roboto'), url(fonts/Roboto-Regular.ttf) format('ttf');
}
#font-face {
font-family: 'Roboto thin';
src: local('Roboto thin'), url(fonts/Roboto-Thin.ttf) format('ttf');
}
Class for one of the texts that uses the font
.txt2 { /* text */
font-family: 'Roboto thin';
font-size: 24px;
color: white;
text-align: center;
margin-top: 1%;
margin-bottom: 5%;
margin-left: 20%;
margin-right: 20%;
font-weight: 100;
}
The #font-face is loading a local file, but also, import in my experience doesn't work like how you expect. I'm on mobile so I can't get too detailed but I usually call the fonts url in the html using a tag in the head. This has the added benefit of the browser being able to pull that file in asynchronously, rather than after the css file loads, which will give you a small speed increase.
More than likely this code is actually failing for you too, but your browser has the font in cache and it's safe to use so it does. Or you have robot installed outright.
EDIT: Alright, I'm on a desktop now, and want to clarify some things.
#font-face defines a font and how it can be called. It gives it a name, where the font files are stored, and if it's considered italicized, normal, etc.
The Google Fonts file you are calling contains that information, it's whole purpose is to define the things you are putting in your #font-face lines.
As I said, #import is a bit tricky.
First and foremost, make sure your #import statement is the very first thing your CSS file contains. If you only have one #import, it should be the first line.
Using Google Fonts' other option, the HTML , will work marginally faster. The difference may stop your users from seeing a flicker of the wrong font on their first page load.
Remove the #font-face rules you have altogether, they are overwriting your imports.
As a best practice, give your font-family rule a fallback. font-family: 'Roboto thin', arial, sans-serif;
This font Glamora is displayed with more thick than it should be and other weird things
the font look like this,
but is displayed like this
this is the formatting for that text
.brand h1{
color: #FEF2DB;
font-family: Glamora;
font-size: 230px;
line-height: 68.1%;
text-align: center;
letter-spacing: 0.095em;
}
There’s probably only one weight of this font, ie. a single style with no bold version or other variants.
By default, h1 and all other headings are set to be bold, so you are probably getting some faux bolding, created by the browser.
Try adding:
.brand h1 {
font-family: Glamora;
/* Etc. */
font-weight: normal;
}
I was able to reproduce your issue, and adding font-weight: normal; fixed it:
This might also have something to do with how the font outlines or how the font file was built, or the fact that it hasn’t been produced as a web font.
The license doesn’t appear to allow converting it into a web font, but it might be worth getting in touch with the designer and seeing if they would produce WOFF and WOFF2 files for you, or modify the license to allow converting the format. That said, that might not impact the issue, and this CSS change does fix it.
I have been using Font-Awesome and its icons for a while now, and it has been working just fine.
Today, however, it only displays blank squares instead of icons. I have read many other related questions, but none of those cases apply to me. As I said, it worked before, and I did not make any changes to the Font-Awesome files (I am using a downloaded version of FA, not the CDN) or to the HTML templates that display the icons.
So I want to start debugging the process. One example is this:
<i style="color: orange" class="fa fa-exclamation-triangle"></i>
However, I cannot find any urls in the CSS of the affected elements, when inspecting with Chrome. What I do see on every icon element though, is something like this:
.fa-warning:before, .fa-exclamation-triangle:before {
content: "\f071";
}
Where \f071 is the "blank square" character.
So my question is:
Where do the icons come from, and how can I debug no-show FA icons, in general?
UPDATE
I found out that \f071 and its friends are actually symbols referring to icons, stored in the font files. The fact that they show up as blank squares seems to indicate that the font has not been loaded successfully.
However, I checked and the client downloads fonts/fontawesome-webfont.woff and fonts/fontawesome-webfont.ttf just fine.
Also, the elements' font is correctly set through the fa class:
font-family: normal normal normal 14px/1 FontAwesome
What else is necessary to make sure, a font has loaded successfully?
UPDATE
I solved it: Font file(s) were corrupted/not delivered properly. That's always something to check out first!
FontAwesome is... a font!
This means you'll have a set of characters, which are (visually) icons. These characters are generally contained between \e000 and \f8ff (which are private use area's characters).
When you see this code:
.fa-warning:before, .fa-exclamation-triangle:before {
content: "\f071";
}
It means the \f071 character will be displayed in the pseudo-element. It's coupled with this code, which loads FontAwesome font for .fa elements:
#font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.2.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Seeing a white square can means:
your font is not loaded (most common problem)
your font is not well created (re-download it)
your CSS is missing the font declaration (#font-face {})
your CSS is missing the font call (font: normal normal normal 14px/1 FontAwesome;)
How to debug:
Check that you're using the right class name (.fa .fa-foo)
Check that your FontAwesome CSS is loaded (it should be the case as you're seeing the square)
Double-check that your font is loaded. There could have a path issue, like font/ folder instead of fonts/
Have a look on your .htaccess. People often makes strong rules which affect assets.
If everything is ok, try to re-download the font (font files could have been corrupted)
I'm aware that different browsers render text in different ways – and to a point, I'm cool with that. However upon experimenting with using icon fonts for one project, Firefox, in particular is irritating me.
Essentially I have a row of social media icons, which are displayed via #font-face and some pseudo classes. Except Firefox has a little issue with rendering them nicely...
Here's what they look like Chrome vs Firefox.
Chrome 23.0.1271.101 (Mac)
http://cl.ly/image/0M3t2S3N2A38/
(Perfect)
Firefox 17.0.1 (Mac)
http://cl.ly/image/053d2J0J312K
(Not-so-perfect)
You can probably see the issue I have...
I've also checked several other browsers to see if it's not just firefox. It is just firefox. Even IE does a nicer job.
The code:
CSS
#font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot');
src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('fonts/icomoon.svg#icomoon') format('svg'),
url('fonts/icomoon.woff') format('woff'),
url('fonts/icomoon.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
[class^="icon-"]:before,
[class*=" icon-"]:before {
font-family: 'icomoon';
font-style: normal;
speak: none;
font-weight: normal;
line-height: 1;
text-align: center;
}
.icon-flkr:before {
content: "\2b";
}
.icon-fbk:before {
content: "\2c";
}
.icon-twitter:before {
content: "\3e";
}
.icon-lfm:before {
content: "\24";
}
.icon-lkdin:before {
content: "\25";
}
.icon-inst:before {
content: "\26";
}
HTML
<ul id="footer_social_list" class="group">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
I've tried a lot of things to try and fix this. From changing the opacity with CSS; to trying text shadow; changing the weights of both the #font-face, classes and inherited styles; using "data-icon"; even making sure each icon is aligned to the pixel grid.
Nothing has yet yielded any improvement in Firefox, and I'd say with the slight exception of the Instagram icon in IE9, everything looks good in every browser.
So why does Firefox do this? And is there anything I can do to make it behave?
PS: I haven't added -webkit-font-smoothing: antialiased; not that it affects Firefox anyway.
-moz-osx-font-smoothing: grayscale;
See the discussion leading to this new vendor prefixed solution for Firefox.
font-weight:normal !important;
This may seem like the obvious answer but no one mentioned it. Very possible you have a !important on your anchor tags somewhere along the line, keeping them from being normally weighted again.
This is another obvious answer that no one mentioned:
What you're talking about happens in all browsers: when you use light text on a dark background, the text seems more "weighty". The same is true for icon fonts... the small details will bloat out. (There are CSS font-smoothing and text-rendering properties that help correct this, but they don't necessarily work the same in all browsers. See here.)
One way you can get around it, if you want a dark-coloured icon on a lighter circle shape (without using SVG), is to use an icon without the circle, then create your own circle background with CSS.
You won't get a true knockout (the icons won't actually be negative space in the circle, so any background patterns behind your buttons won't show through the icons), but you will avoid the light-text-on-dark-background bleedout.
Of course, you will also lose your border-radius in older versions IE... so weigh (ahem) what matters more.
As I mentioned in the title, when using css font-family, custom font (font-face), it messes up (black background, black text (I guess)) auto complete drop down list in Opera.
input[type='text'], input[type='password'], input[type='email'], input[placeholder] {
font-size: 1.2em;
font-family: sans-serif;
color: #2A873A;
padding-left: 25px;
}
Code above works fine, but if I replace "font-family: sans-serif;" with some font-face font (google web fonts too), then problem starts.
Here is the screenshot of "bug" in action.
P.S. I should mention that that is Opera's native autocomplete, not custom js, dropdown list.
EDIT:
http://jsfiddle.net/burCR/
Have you tried specifying the font directly in your css? for example:
div.magicsomething {font-family:CustomFont,Customfont2,sans-serif;}
Keep in mind nested elements get stuck with custom fonts, so if you don't do the above, you may also very well need font-family:inherit in your 'nested elements'.
For extra help, please mention the name of the custom font, your full css and a live link to your site
Although this may be something obvious, check to make sure that your font is compatible with Opera. Here is a list of some web safe fonts.
http://www.w3schools.com/cssref/css_websafe_fonts.asp
And if that doesn't work try taking the font you want from microsoft word and use #fontface to insert you custom font instead of using a websafe one.
And finally try using your font-family on the form and have the input inherit the font.
Hopefully this helped.
Ditto to specifying the font directly. You may also want to try using base64 encoding, which in my experience works beautifully and with great cross-browser compatibility.
You can specify colors for both the background and the text individually.
input {
background-color: white;
color: black;
font-family: "My Fontface Font", Verdana, ms serif;
}