I read some articles and stackoverflow questions about font awesome. I successfully implemented it on my website but I have one big problem with it.
Here is jfiddle
Here is the code
html:
<i class="icon-th-list font-25em"></i>  font 2.5em<br/>
<i class="icon-th-list font-2em"></i>  font 2em<br/>
css:
body {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: subpixel-antialiased;
font-family: Arial;
}
.font-25em {
font-size: 2.5em !important;
}
.font-2em {
font-size: 2em !important;
}
Icons with font-size 2em etc. works perfectly but when I change font size to 2.5em the font is ragged and looks awful.
Am I doing something wrong?
Please help
You don't mention what browser(s) are causing the problem, but does anything here look better for you http://jsfiddle.net/panchroma/mYMnh/ ?
I changed the antialiasing to -webkit-font-smoothing: antialiased; and if you want to get fancy you can add a small shadow to the icon to smooth the :
.font-25em {
font-size: 2.5em !important;
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}
Good luck!
Related
I have the bug that on Mac/iOS in Chrome and Firefox browser my custom icon font is suddenly cut off.
I created the font with icomoon.io because that actually worked quite well on different browsers so far.
The font loads without errors and the size is correct.
It is also not because there is a Div/Container ... over it the icons are on top.
Fun fact: If you change the fontsize to an enormous amount like 120px the Icons are fixed again
Is this a known bug, or is there a fix for it?
Example Img
Icon Call
<i class="ke-icon-basket"></i>
Applying the class
i[class^="ke-icon"], i[class^="ke-icon"] span {
speak: never;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: KEIcons !important;
font-size: 24px;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 1;
text-transform: none;
}
Font initalization
#font-face{
font-display:swap;
font-family:KEIcons;
font-style:normal;
font-weight:400;
src:url(fonts/KEIcons/KEIcons.woff) format("woff"),url(fonts/KEIcons/KEIcons.woff2) format("woff2")
}
Steps already done:
Changed to all kinds of font type
Resized icons in font
Disabled Apaches default cache function and all of the pagespeed modification which are supervised by hetzner
I have a Font Awesome Pro license. Most of the icons show up, no problem, as you can see here: https://ruthannereid.com
Specifically, I use the Duotone books icon in my menu (screenshot): https://i.imgur.com/n3xoiDR.jpg
I want that same icon here (screenshot): https://i.imgur.com/8jXfyAQ.jpg
Weirdly, when I add font-family: "Font Awesome 5 Duotone" in the CSS, the icon breaks spectacularly (screenshot): https://i.imgur.com/GUK4yIq.jpg
I would love some help on this. I don't know if I need to do a PHP trick or what, but I'm willing to try any kind of code (hopefully CSS).
P. S. I've tried to add the "fa" and "fad" CSS specifications to the site::before icon manually, but it didn't fix this.
Current CSS:
.error404 .site-inner::before,
.page .site-inner::before,
.single .site-inner::before {
content: "\f5db" !important;
font-family: "Font Awesome 5 Pro" !important;
font-weight: 900 !important;
background: none !important;
-webkit-font-smoothing: antialiased;
font-style: normal;
font-variant: normal;
font-size: 80px;
color: var(--fa-primary-color,inherit);
opacity: 1;
opacity: var(--fa-primary-opacity,1);
}
When using the unicode approach rather than the class name approach there are a few gothchas and I am not sure which way you want to work. If you are using the Font Awesome 5 Pro font rather than the Font Awesome 5 Duotone font you need to make sure you specify the primary and the secondary unicodes. At the moment you are only seeing half the icon because you have only specified the primary layer of the icon.
If you take a look at the books page you will see there is a second unicode of 10f5db which I have highlighted in the screenshot below:
To also display the secondary layer you can add the following :after code alongside your original :before code
.error404 .site-inner::after,
.page .site-inner::after,
.single .site-inner::after{
content: "\10f5db" !important;
font-family: "Font Awesome 5 Pro" !important;
font-weight: 900 !important;
background: none !important;
-webkit-font-smoothing: antialiased;
font-style: normal;
font-variant: normal;
font-size: 80px;
color: var(--fa-primary-color,#fff);
opacity: 1;
opacity: var(--fa-primary-opacity,1);
}
I have not tested this solution because our Pro account does not have SO on the whitelist but am confident it should work. If it does not then please give me a shout and I will test it on one of our whitelisted domains for you.
If you are using the Font Awesome 5 Duotone font then you can specify the --fa-secondary-color as well as the --fa-primary-color.
I'm using the Raleway font, but this font doesn't align numbers properly with letters.
You can see this in this snippet:
h1 {
font-family: Raleway;
font-size: 2rem;
border-bottom: 1px solid $text-color;
border-top: 1px solid $text-color;
padding: 2rem 0;
}
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<h1>5 Comments</h1>
Can I solve this easily? Or is this just a faulty font and should I chose another one?
You can simply change with the help of CSS
add font-feature-settings: 'lnum' 1; to your css file
so your new css will be:
h1 {
font-family: Raleway;
font-size: 2rem;
border-bottom: 1px solid $text-color;
border-top: 1px solid $text-color;
padding: 2rem 0;
font-feature-settings: 'lnum' 1;
}
Check out this too http://clagnut.com/sandbox/css3/
The Problem
This is part of the font itself and not something you can provide a quick fix for (unless you're dealing with very little text). If we look at Google Font's page for the Raleway font, we'll see that numbers have different alignment to letters:
If you don't want the numbers to be aligned like this, you're going to have to use a different font instead.
A Fix
You can fix this by wrapping the numbers you wish to change the alignment of in a separate element and adjusting their vertical-align separately, but this is probably going to be more effort than its worth. I've given an example of this below:
h1 {
font-family: Raleway;
font-size: 2rem;
border-bottom: 1px solid $text-color;
border-top: 1px solid $text-color;
padding: 2rem 0;
}
.raised {
display: inline-block;
vertical-align: 12%;
}
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<h1>
<span class="raised">5</span>
Comments
</h1>
2020 speaking
Depending on the font and the browser you can add
font-variant-numeric: lining-nums;
Source : https://css-tricks.com/almanac/properties/f/font-variant-numeric/
https://www.codesmite.com/article/fixing-raleway-and-similar-fonts-numerals
This article explains it all and gives de fully compatible css3 "solution".
This code do the magic:
.yourclass {
-webkit-font-feature-settings: "lnum";
-moz-font-feature-settings: "lnum";
font-feature-settings: "lnum";
}
It depends on "the number case setting" feature of your font supports.
still you can do it by following this
Further reading UX stackexchange
I created a version of Raleway with lining numerals as default to be used as The Definitive Solution for this problem. You can download the font files or just embed it into your HTML (using <link>) or CSS (using #import) with a single line of code, like you'd do with any other Google Font. Free, open source and available in all weights and styles:
https://h-ibaldo.github.io/Raleway_Fixed_Numerals/
I know you've posted this question a long time ago, but take a look at this property:
.class, #id, tag, * {
font-variant-numeric: lining-nums;
-moz-font-feature-settings:"lnum" 1;
-moz-font-feature-settings:"lnum=1";
-ms-font-feature-settings:"lnum" 1;
-o-font-feature-settings:"lnum" 1;
-webkit-font-feature-settings:"lnum" 1;
font-feature-settings:"lnum" 1;
}
It forces all the numerals to be correctly aligned, so you can just apply this property to * in CSS and any text containing numbers will be a lot more readable.
This code will work for Raleway, I have tested and got the result
-webkit-font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; font-feature-settings: "lnum":
I have an odd issue... When im comparing two elements on a website I have coded on my server compared to a tumblr site I created on their server, there is a 2px font size discrepancy.
both sites have this code:
<body>
<h1>Text</h1>
I have no font sizes set anywhere but both body css codes are:
body {
font-family: Arial;
font-size: 100%;
color: #000;
background: #FFF;
width: 4100px;
padding: 0;
margin: 0;
}
and both h1 codes are:
h1 {
font-size: 100%;
font-weight: normal;
margin: 0.67em 0 0.67em 0;
}
for whatever reason, the tumblr site has a 2px font size difference (smaller). is there any known reason why?
EDIT
I've added a base font size of 16px to both html attributes, however there still seems to be about a 2px difference. Some links to the sources:
Server:
http://goo.gl/PfyQ6r
Tumblr:
http://goo.gl/5gDfp4
Tumblr's global.css file as AR7 noted is set to 14px, the default html font size in most browsers is 16px but is also user definable.
html, body {
font-family: "Helvetica Neue","HelveticaNeue",Helvetica,Arial,sans-serif;
font-weight: 400;
line-height: 1.4;
font-size: 14px;
font-style: normal;
color: #444;
}
Your question code example sets the body font-size as inherited from its parent (html) at 100%. If you did not specify the html font-size it would inherit the browser's defined default font-size to 100%.
Font size by default is 16px I believe and is usually defined in the body.
Popular frameworks like bootstrap have the font size set as 14px in the body.
That's probably why there's a difference because the default font size is what is used when you specify 100%. Tumblr's own css files, which are completely unrelated to yours, specify it as 14px by default.
The site I’m working on has a custom script link font, Santa fe to be exact. On my Mac it renders in Firefox 5 as such:
how it should render http://z17.me/oa2c+
This is how I want it to render.
On my client’s mac and a someone else’s Mac it renders (improperly) like:
improper rendering http://idzr.org/5ume
I was having the same problem before in Safari, but -webkit-font-smoothing: antialiased; fixed it; however, it appears tat there is no equivalent of that for Firefox.
I also have text-rendering: optimizeLegibility; on and generated the web font package using Font Squirrel.
Any ideas?
Edit: The font has this CSS applied to it:
font-family: SantaFeLetPlainRegular;
font-weight: normal;
font-style: normal;
font-size: 21px;
text-transform: lowercase;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
/* #doubtful_existance: I don’t think these even exist? Can’t hurt much, I guess. */
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
/* end #doubtful_existance */
font-smoothing: antialiased;
text-shadow: 0 0 1px rgba(256, 256, 256, 0.01); /* A trick I’ve heard of to fix issues like this. */
opacity: 0.99; /* Another trick I’ve heard of to fix issues like this. */
Try applying a 0px text shadow with a similar color to your background:
text-shadow: #fff 0 0 0;
Also, did you try applying a font-weight:normal; directly to whatever element is using the script font? Sometimes Firefox can cascade a bold on you without you noticing.