Font Awesome: Duotone only appearing half the time - font-awesome

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.

Related

Mac/iOS Corrupts Custom Icon Fonts in Firefox/Chrome

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

CSS Font styles not working

I've been trying to add a css font style like the one on the landing page of http://www.lecrae.com. The text that says "LECRAE", I'm trying to use the same css style, but it doesn't seem to be working for me, only "W" in the word "Welcome" shows, and it doesn't look like the font too. Here's my code below:
CSS
.header { font-family: Futura, "Trebuchet MS", Arial,sans-serif;
font-weight:700;
letter-spacing:14em;
line-height:1em;
color:#333;
font-style:normal;
font-size:120px;
}
HTML
<h1 class="header">Welcome</h1>
There are three issues here:
Only the first letter "W", of your heading "Welcome" is showing.
The font(s) you specified are not showing.
You want to use Futura, but it isn't available for free.
The first issue is solved easily. You are using a huge letter-spacing of 14em, I assume you made a typo when copying the given source and it was supposed to be .14em. This explains why you can only see the first letter: all other letters are being pushed out of the screen.
The second issue is also solved easily. You are specifying fonts that might not be available on a users computer. For example, most Linux distributions do not ship with any of the fonts you specified and would hence fall back to sans-serif. If you really want to use a specific font, #import that font from a source like Google Fonts. This way, the font will be downloaded by the user's browser.
The third issue is easy as well: you either pay for the font or you need to use a different, freely available font instead.
Putting that together:
#import url('https://fonts.googleapis.com/css?family=Open+Sans:700');
.header {
font-family: 'Open Sans', sans-serif;
font-weight: 700;
letter-spacing: .14em;
line-height: 1em;
color: #333;
font-style: normal;
font-size: 120px;
text-transform: uppercase;
}
<h1 class="header">Welcome</h1>
Also note that you did not copy the text-transform: uppercase rule, which I added here.

Slow rendering using "Sans-Serif"

I have a odd issue on my "in-development" website here: http://www.cphrecmedia.dk/musikdk/stage/
The H1-h6 fonts are just "sans-serif", but often in Chrome it shows another font (screenshot: http://cl.ly/image/260B0H0l1w0C). When the mouse hover the navigation it changes to the right font. FYI this is how it should look like: http://cl.ly/image/442l071M3N1B
The code used for font is:
.nm li a {
float: left;
font-family: sans-serif;
height:22px;
padding: 12px 14px 7px 14px;
color:#white;
font-size: 12px;
line-height: 20px;
}
I mainly develop using Chrome, so I'm not sure if the issue is present in other browsers. Have anyone of you seen this issue before?
'sans-serif' is not a font name it's a font family specification.
Use a sans-serif font name like "Arial" or "Verdana" or else you will have unexpected results (the browser may replace your font with generic ones).
Try using custom font method by downloading the font and keeping it in your fonts folder.
Example:
#font-face {
font-family: myFirstFont;
src: url('Sansation_Light.ttf')
,url('Sansation_Light.eot'); /* IE9 */
}
div
{ font-family:myFirstFont; }
Try using custom web font from google:
http://www.google.com/fonts
Select a font and uses one of the three metods, i prefer CSS method.
Example:
#import url(http://fonts.googleapis.com/css?family=Roboto);
Import this in CSS and use this for you text: font-family: 'Roboto', sans-serif;

Recreate the "thin" font that iCloud Beta is using

I'm looking to recreate the "Sign in to iCloud" text on http://beta.icloud.com
I have already copied all the styles attributed to that line of text, and everything is in order apart from the thickness of the text. I see Apple has applied the font-weight 300 to the style, which should and does make it thinner, however when I copy and paste the exact same code my browser renders it thicker on my own webpage. My question is, how is Apple making the text thin like that or how can I achieve the same effect?
The code from them that I have used so far is:
position: absolute;
color: #FFF;
left: 0px;
right: 0px;
height: 40px;
top: 131px;
font-size: 35px;
font-family: "Helvetica Neue",sans-serif;
font-weight: 300;
line-height: 1.2;
-webkit-font-smoothing: antialiased;
Any ideas on what could be causing it to render at normal thickness? I have no conflicting styles and this is the only code relating to my line of text
Using the CSS given I can get the same style as on iCloud website. (http://jsfiddle.net/LeBen/WznR5/)
After font-weight, the property that can slightly change the appearance of text on webkit browsers is -webkit-font-smoothing: antialiased;. If you don't use it, the browser fallback to the default smoothing mode (subpixel-antialiased) and result in a text looking bolder.
Are you sure you've included it in your tests and your browser apply it?
Try Avenir Ultra Light it's a thin font that looks similar to it
http://www.typophile.com/node/42590

CSS Font Rendering Issue

I am developing a website. I'm using a google font to style my page. But it's not displaying correctly. I've read up a bit on faux fonts, but I believe that only applies when the font that is needed is not supplied. I've imported my google font, code is
#font-face {
font-family: 'Titillium Web';
font-style: normal;
font-weight: 600;
src: local('Titillium WebSemiBold'), local('TitilliumWeb-SemiBold'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v1/anMUvcNT0H1YN4FII8wprx7IBmrqA5IG9z8WNe77b9o.woff) format('woff');
}
My CSS for the font is
font-size:30px;
font-family: 'Titillium Web';
font-style: normal;
font-weight: 600;
But I believe it's displaying a faux font. Here's the difference between an image of what it should look like on the left, and what it's displaying on the right.
My problem http://resource.theboulderdesign.com/400/homebox/gettingcompare.png
I hope someone can solve my problem.
Morgan Kenyon
It's a Chrome/Windows problem. It'll affect the font thickness and letter spacing, but you can add a white text-stroke to smooth it out:
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: white;
-webkit-text-fill-color: white;
Demo: http://jsfiddle.net/zzmbu/
Here's a screenshot of it:
I've also found that if you add
text-shadow:0px 0px #FF0000;
property to my CSS, it renders correctly. I don't know why though.