I create a small icon font with IconMoon site. When I import to my website it works fine, but the icon show skew. How I can fix that?
The original icon:
The showed icon:
I add this code to all.min.css from Font Awesome:
#font-face {
font-family: "Font Awesome 5 Pro";
font-style: normal;
font-weight: normal;
src: url(../webfonts/icomoon.eot);
src: url(../webfonts/icomoon.eot?#iefix) format("embedded-opentype"), url(../webfonts/icomoon.woff) format("woff"), url(../webfonts/icomoon.ttf) format("truetype"), url(../webfonts/icomoon.svg#fontawesome) format("svg")
}
.fac {
font-family: "Font Awesome 5 Pro"
}
And my code on html:
<i class="fac fa-cc-bizum fa-8x" alt="" title=""></i>
Ok, I already fixed adding to my .fac class next elements:
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
Related
I have the following at the very tippy top of my master CSS file for my site
#charset "UTF-8";
#font-face {
font-family: "Montserrat";
src: url("../../fonts/montserratRegular.woff2") format("woff2"), url("../../fonts/montserratRegular.woff") format("woff");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "Montserrat";
src: url("../../fonts/montserratRegularItalic.woff2") format("woff2"), url("../../fonts/montserratRegularItalic.woff") format("woff");
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: "Montserrat";
src: url("../../fonts/montserratBold.woff2") format("woff2"), url("../../fonts/montserratBold.woff") format("woff");
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: "Montserrat";
src: url("../../fonts/montserratMedium.woff2") format("woff2"), url("../../fonts/montserratMedium.woff") format("woff");
font-weight: 500;
font-style: normal;
}
#font-face {
font-family: "Montserrat";
src: url("../../fonts/montserratMediumItalic.woff2") format("woff2"), url("../../fonts/montserratMediumItalic.woff") format("woff");
font-weight: 500;
font-style: italic;
}
#font-face {
font-family: "Montserrat";
src: url("../../fonts/montserratLight.woff2") format("woff2"), url("../../fonts/montserratLight.woff") format("woff");
font-weight: 300;
font-style: normal;
}
/*!
* Font Awesome Free 5.6.1 by #fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
*/
#font-face {
font-family: "Font Awesome 5 Free";
font-style: normal;
font-weight: 900;
src: url("../../fonts/fa-solid-900.eot");
src: url("../../fonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../../fonts/fa-solid-900.woff2") format("woff2"), url("../../fonts/fa-solid-900.woff") format("woff"), url("../../fonts/fa-solid-900.ttf") format("truetype"), url("../../fonts/fa-solid-900.svg#fontawesome") format("svg");
}
.fa,
.fas {
font-family: "Font Awesome 5 Free";
font-weight: 900;
}
/*!
* Font Awesome Free 5.6.1 by #fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
*/
#font-face {
font-family: "Font Awesome 5 Brands";
font-style: normal;
font-weight: normal;
src: url("../../fonts/fa-brands-400.eot");
src: url("../../fonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../../fonts/fa-brands-400.woff2") format("woff2"), url("../../fonts/fa-brands-400.woff") format("woff"), url("../../fonts/fa-brands-400.ttf") format("truetype"), url("../../fonts/fa-brands-400.svg#fontawesome") format("svg");
}
.fab {
font-family: "Font Awesome 5 Brands";
}
But only some of the font files are loading and I don't quite understand why. The montserratRegular, montserratBold, montserratLight, and fa-solid-900 are the only ones that load. If I remove the #font-face definitions for the Font Awesome fonts, then additionally the montserratRegularItalic font will load.
If I remove all font definitions, and only add one of them, that single #font-face will load. With the exception of the Font Awesome Brands, that #font-face never seems to load even if it's the only definition in the file.
I've double checked the files exist on the server, and there's no 404 or other errors/warnings in the console. It just seems like the browser just refuses to load them.
I've only tested this behavior deeply in Chrome, so I'm not sure if this is just a Chrome thing, although I did open the page once in Safari and saw similar behavior.
Welp, this makes sense. The other fonts weren't loading because nothing on the page was using them. And of course they did load when they were the only font available for the font-family I was using. And in the case of the FontAwesome Brands not loading, it was staring me right in the face, I was using the wrong classes.
I had
<i class="fa fa-facebook"></i>
Instead of
<i class="fab fa-facebook"></i>
I have been unable to self-serve and load a web font on my website server and other Stack Overflow articles on this subject have not helped me to locate the error here.
I get a blank space where the fonts should appear.
Here are the details:
https://www.foo.com/public_html/wp-content/themes/independent-publisher/fonts/fontawesome-free-5-0-6/web-fonts-with-css/
is the location of my font's CSS file, fontawesome-all.css
https://www.foo.com/public_html/wp-content/themes/independent-publisher/fonts/fontawesome-free-5-0-6/web-fonts-with-css/webfonts
is the location of my font
Firstly, satisfy yourself that I have not committed path-related errors in my style sheet link in my header.
I have tried referencing the font's CSS stylesheet in my HTML headers in multiple ways:
As a relative link:
<link href="./fonts/fontawesome-free-5-0-6/web-fonts-with-css/fontawesome-all.css" rel="stylesheet">
As an absolute link:
<link href="https://www.foo.com/public_html/wp-content/themes/independent-publisher/fonts/fontawesome-free-5-0-6/web-fonts-with-css/fontawesome-all.css" rel="stylesheet">
Secondly, satisfy yourself that my #font-face implementation and the paths pointed to are correct.
Inside the font's style sheet fontawesome-all.css is a #font-face invocation of the font:
#font-face {
font-family: 'Font Awesome 5 Brands';
font-style: normal;
font-weight: normal;
src: url("../webfonts/fa-brands-400.eot");
src: url("../webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.woff") format("woff"), url("../webfonts/fa-brands-400.ttf") format("truetype"), url("../webfonts/fa-brands-400.svg#fontawesome") format("svg"); }
.fab {
font-family: 'Font Awesome 5 Brands'; }
#font-face {
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 400;
src: url("../webfonts/fa-regular-400.eot");
src: url("../webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.woff") format("woff"), url("../webfonts/fa-regular-400.ttf") format("truetype"), url("../webfonts/fa-regular-400.svg#fontawesome") format("svg"); }
.far {
font-family: 'Font Awesome 5 Free';
font-weight: 400; }
#font-face {
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 900;
src: url("../webfonts/fa-solid-900.eot");
src: url("../webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.woff") format("woff"), url("../webfonts/fa-solid-900.ttf") format("truetype"), url("../webfonts/fa-solid-900.svg#fontawesome") format("svg"); }
.fa,
.fas {
font-family: 'Font Awesome 5 Free';
font-weight: 900; }
Edit: the HTML I am using for the fonts (icons) to appear on the page are standard: for example <i class="fas fa-external-link-alt"></i> and also the pseudo element instance:
.rss-subscribe:before{
font-family: 'Font Awesome 5 Free';
font-size: 20pt;
content: "\f09e";
margin-right: 10px;
float: left;
width: 32px;
}
Edit 2: Using an official external source for the font's CSS file, <link href="https://www.ashenglowgaming.com/public_html/wp-content/themes/independent-publisher/fonts/fontawesome-free-5-0-6/web-fonts-with-css/fontawesome-all.css" rel="stylesheet"> in the header works for inline instances of the font, as in the example I gave above <i class="fas fa-external-link-alt"></i>, but not for the pseudo element instance
.rss-subscribe:before{
font-family: 'Font Awesome 5 Free';
font-size: 20pt;
content: "\f09e";
margin-right: 10px;
float: left;
width: 32px;
}
In any case, I want to serve the file on my own server, so linking off-site is not sufficient for me.
Finally, for your reference: view the official Font Awesome installation guide here
I think this might be the issue:
url("../webfonts/font-here.ext");
In your fontawesome-all.css stylesheet, you're asking the browser to look for the font files one directory above the current one which isn't accurate since the font files seem to be sitting in a folder in the same directory as the stylesheet is.
This should work:
#font-face {
font-family: 'Font Awesome 5 Brands';
font-style: normal;
font-weight: normal;
src: url("webfonts/fa-brands-400.eot");
src: url("webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("webfonts/fa-brands-400.woff2") format("woff2"), url("webfonts/fa-brands-400.woff") format("woff"), url("webfonts/fa-brands-400.ttf") format("truetype"), url("webfonts/fa-brands-400.svg#fontawesome") format("svg"); }
.fab {
font-family: 'Font Awesome 5 Brands'; }
#font-face {
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 400;
src: url("webfonts/fa-regular-400.eot");
src: url("webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("webfonts/fa-regular-400.woff2") format("woff2"), url("webfonts/fa-regular-400.woff") format("woff"), url("webfonts/fa-regular-400.ttf") format("truetype"), url("webfonts/fa-regular-400.svg#fontawesome") format("svg"); }
.far {
font-family: 'Font Awesome 5 Free';
font-weight: 400; }
#font-face {
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 900;
src: url("webfonts/fa-solid-900.eot");
src: url("webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("webfonts/fa-solid-900.woff2") format("woff2"), url("webfonts/fa-solid-900.woff") format("woff"), url("webfonts/fa-solid-900.ttf") format("truetype"), url("webfonts/fa-solid-900.svg#fontawesome") format("svg"); }
.fa,
.fas {
font-family: 'Font Awesome 5 Free';
font-weight: 900; }
Update
This is the problem:
<link href="https://www.foo.com/public_html/wp-content/themes/independent-publisher/fonts/fontawesome-free-5-0-6/web-fonts-with-css/fontawesome-all.css" rel="stylesheet">
Should be:
<link href="https://www.foo.com/wp-content/themes/independent-publisher/fonts/fontawesome-free-5-0-6/web-fonts-with-css/fontawesome-all.css" rel="stylesheet">
So it seems you actually had two issues: wrong path to font files and wrong path to the stylesheet.
By the way, I recommend using wp_enqueue_style and wp_enqueue_script to append stylesheets and JS files to the head section of your theme:
/**
* Proper way to enqueue scripts and styles
*/
function wpdocs_theme_name_scripts() {
wp_enqueue_style( 'font-awesome', get_template_directory_uri() . '/fonts/fontawesome-free-5-0-6/web-fonts-with-css/fontawesome-all.css', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );
Apart from the all.css which is required to render the icons, webfonts folder is also required.
This is one of the solution for this type of error.
On our site we have a few fonts. I embed them like this
#font-face {
font-family: "Calibri Light";
src: url("fonts/calibri/light/calibri-light.eot?") format("eot"),
url("fonts/calibri/light/calibri-light.woff") format("woff"),
url("fonts/calibri/light/calibri-light.ttf") format("truetype"),
url("fonts/calibri/light/calibri-light.svg") format("svg");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "Calibri";
src: url("fonts/calibri/regular/calibri.eot?") format("eot"),
url("fonts/calibri/regular/calibri.woff") format("woff"),
url("fonts/calibri/regular/calibri.ttf") format("truetype"),
url("fonts/calibri/regular/calibri.svg") format("svg");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "Calibri Bold";
src: url("fonts/calibri/bold/calibri-bold.eot?") format("eot"),
url("fonts/calibri/bold/calibri-bold.woff") format("woff"),
url("fonts/calibri/bold/calibri-bold.ttf") format("truetype"),
url("fonts/calibri/bold/calibri-bold.svg") format("svg");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "Caviar Dreams";
src: url("fonts/caviar-dreams/regular/caviar-dreams.eot?") format("eot"),
url("fonts/caviar-dreams/regular/caviar-dreams.woff") format("woff"),
url("fonts/caviar-dreams/regular/caviar-dreams.ttf") format("truetype"),
url("fonts/caviar-dreams/regular/caviar-dreams.svg") format("svg");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "Caviar Dreams Bold";
src: url("fonts/caviar-dreams/bold/caviar-dreams-bold.eot?") format("eot"),
url("fonts/caviar-dreams/bold/caviar-dreams-bold.woff") format("woff"),
url("fonts/caviar-dreams/bold/caviar-dreams-bold.ttf") format("truetype"),
url("fonts/caviar-dreams/bold/caviar-dreams-bold.svg") format("svg");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "TeX Gyre Adventor";
src: url("fonts/tex-gyre-adventor/regular/tex-gyre-adventor.eot?") format("eot"),
url("fonts/tex-gyre-adventor/regular/tex-gyre-adventor.woff") format("woff"),
url("fonts/tex-gyre-adventor/regular/tex-gyre-adventor.ttf") format("truetype"),
url("fonts/tex-gyre-adventor/regular/tex-gyre-adventor.svg") format("svg");
font-weight: normal;
font-style: normal;
}
The problem is that the Caviar Dreams Bold doesn't load. It just doesn't appear in the Sources tab in the Inspector (all others are shown). Chrome 32 works well. No errors or warnings are thrown.
I use the font like this:
#feedback input[type="submit"] {
text-transform: uppercase;
font-family: "Caviar Dreams Bold", "Calibri", sans-serif;
font-variant: small-caps;
}
The Calibri font is used by Opera instead.
Update 1
It seems that Calibri Bold is ignored too. Why are the bold fonts ignored?
Update 2
Don't be surprised that I don't specify font-weight: bold in the #font-face queries: for some reasons it didn't work and I had to do my job fast. So that fact that different font-family doesn't being load seems very interesting to me. And it's more interesting that as we know that Opera's rendering should work as Blink do.
Does the Caviar Dreams Bold font actually contain small caps? If not, Opera probably concludes the request glyps can't be found and will fall back to Calibri. What happens if you remove the font-variant: small-caps; rule?
Edit: Interesting bug report on why Blink doesn't fall back to "small-caps synthesis" (as it is apparently called): https://code.google.com/p/chromium/issues/detail?id=298970 Seems like removing the SVG font from your #font-face rule will do the trick.
I have been pondering for quite some time on what causes some IE versions to render #font-face fonts as italic, even though the styles are declared as normal.
My main thought is that IE won't download every font-file before rendering the page.
In my CSS I have declared font files for different typefaces of the same font - ranging from thin italic to ultra. They are all declared using the same setup:
#font-face { /* THIN ITALIC */
font-family: Unit;
src: url("../gfx/fonts/UnitWeb-ThinIta.eot")
src: url("../gfx/fonts/UnitWeb-ThinIta.eot?#iefix") format("embedded-opentype"),
url("../gfx/fonts/UnitWeb-ThinIta.woff") format("woff");
font-weight: 100;
font-style: italic, oblique;
font-variant: normal;
}
through
#font-face { /* ULTRA */
font-family: Unit;
src: url("../gfx/fonts/UnitWeb-Ultra.eot");
src: url("../gfx/fonts/UnitWeb-Ultra.eot?#iefix") format("embedded-opentype"),
url("../gfx/fonts/UnitWeb-Ultra.woff") format("woff");
font-weight: 900;
font-style: normal;
font-variant: normal;
}
As you can see, italics are declared as font-style: italic, oblique;, while normal is declared as font-style: normal;.
Now, to the rendering.
This is how IE 9 renders it
This is how IE 8 renders it every now and then
Posted as answer is this SO question: Custom font sometimes renders in italics in IE8 / IE7
You need to create a custom name for each of your #font-face font-family. e.g.
#font-face { /* THIN ITALIC */
font-family: UnitItalic;
src: url("../gfx/fonts/UnitWeb-ThinIta.eot")
src: url("../gfx/fonts/UnitWeb-ThinIta.eot?#iefix") format("embedded-opentype"),
url("../gfx/fonts/UnitWeb-ThinIta.woff") format("woff");
font-weight: 100;
font-style: italic, oblique;
font-variant: normal;
}
#font-face { /* THIN ITALIC */
font-family: UnitNormal;
src: url("../gfx/fonts/UnitWeb-ThinIta.eot")
src: url("../gfx/fonts/UnitWeb-ThinIta.eot?#iefix") format("embedded-opentype"),
url("../gfx/fonts/UnitWeb-ThinIta.woff") format("woff");
font-weight: 100;
font-style: italic, oblique;
font-variant: normal;
}
I have a few weird issues I need to solve.
First, let me show my #font-face declarations in my CSS file.
#font-face {
font-family: "Conv_Gotham-Book";
src: url("fonts/Gotham-Book.eot");
src: local("☺"),
url("fonts/Gotham-Book.woff") format("woff"),
url("fonts/Gotham-Book.ttf") format("truetype"),
url("fonts/Gotham-Book.svg#Gotham-Book") format("svg");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "Conv_Gotham-Light";
src: url("fonts/Gotham-Light.eot");
src: local("☺"),
url("fonts/Gotham-Light.woff") format("woff"),
url("fonts/Gotham-Light.ttf") format("truetype"),
url("fonts/Gotham-Light.svg#Gotham-Light") format("svg");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "Conv_Gotham-Medium";
src: url("fonts/Gotham-Medium.eot");
src: local("☺"),
url("fonts/Gotham-Medium.woff") format("woff"),
url("fonts/Gotham-Medium.ttf") format("truetype"),
url("fonts/Gotham-Medium.svg#Gotham-Medium") format("svg");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "Conv_Gotham-Bold";
src: url("fonts/Gotham-Bold.eot") format("eot");
src: local("☺"),
url("fonts/Gotham-Bold.woff") format("woff"),
url("fonts/Gotham-Bold.ttf") format("truetype"),
url("fonts/Gotham-Bold.svg#GothamBold") format("svg");
font-weight: normal;
font-style: normal;
}
Problems: Hyperlinks using any of those custom fonts don't work in only one browser/platform combination Firefox 13.0.1/Mac (Example here: http://lonely-dev.com/leapfrogbeta/?page_id=896 on the headlines, )
Second Problem: Font disappears on iPad2/Safari browser.
Everything else is fine, would love some insight.
You have declared to use a font called "Journal" in your css for .custom .headline_area h2 a in custom.css while in the above code example you're calling for the Gotham Family (which, btw, has no web license at the moment). Journal is loaded correctly in both Firefox/Mac and iPad/Safari. Links work in both.
Update: the font loads fine in all mentioned cases but the links aren't working. This is because of a being an inline element. Also, declaring a height for the heading a is a bad idea. Just use this rule:
.custom .headline_area h2 a {
display: block;
}
and the links will work.
Another thing is that you should declare the heading font on the h1, h2 etc. and not just on their contained links.