Edit: this problem is specific to pseudo element inclusions of Font Awesome, <i class="fas fa-spray-can"></i> works fine. However,
#menu-item-3218 a:before{
content:'\f5bd';
font-family:'FontAwesome';
display:inline-block!important;
padding-right:6px;
vertical-align:-5%;
font-size:90%;
font-weight:normal;
}
does not work.
However, to thicken the plot, that pseudo-element inclusion does work for font-family: "fa5-brands", but not for font-family: "FontAwesome".
As you can see, the font icons do not load for font-family: "FontAwesome" (box placeholders appear instead) but do load for font-family: "fa5-brands" (the PS4 icon, etc.) and font-family: 'Rajdhani' (the text font you see):
In Chrome developer panel, fonts appear to be loading, I guess?
Location of CSS stylesheet:
Location of fonts:
I can't find any error in my implementation of #font-face in the css stylesheet on my WordPress website. Can someone see something wrong that I can't?
Relevant content in CSS stylesheet:
#font-face {
font-family: 'Rajdhani';
src: url('./assets/fonts/Rajdhani/rajdhani-regular-webfont.svg#rajdhaniregular') format('svg'), url('./assets/fonts/Rajdhani/rajdhani-regular-webfont.woff') format('woff'), url('./assets/fonts/Rajdhani/rajdhani-regular-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "fa5-brands";
src: url('./assets/fonts/fontawesome-free-5-2-0-web/webfonts/fa-brands-400.svg#fontawesome-free') format('svg'), url('./assets/fonts/fontawesome-free-5-2-0-web/webfonts/fa-brands-400.woff2') format('woff2'), url('./assets/fonts/fontawesome-free-5-2-0-web/webfonts/fa-brands-400.woff') format('woff'), url('./assets/fonts/fontawesome-free-5-2-0-web/webfonts/fa-brands-400.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "FontAwesome";
src: url('./assets/fonts/fontawesome-free-5-2-0-web/webfonts/fa-regular-400.svg#fontawesome-free') format('svg'), url('./assets/fonts/fontawesome-free-5-2-0-web/webfonts/fa-regular-400.woff2') format('woff2'), url('./assets/fonts/fontawesome-free-5-2-0-web/webfonts/fa-regular-400.woff') format('woff'), url('./assets/fonts/fontawesome-free-5-2-0-web/webfonts/fa-regular-400.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
I have a CSS file that loads two fonts into my webpage. Half of the time it works just fine, and half of the time the font requests fail with failed to decode downloaded font.
CSS
#font-face {
font-family:'oswald';
src: local('Oswald Regular'),
url(../fnt/font-oswald/Zm9udA_b3N3YWxk.eot);
src: url(../fnt/font-oswald/Zm9udA_b3N3YWxk.eot?#iefix) format('embedded-opentype'),
url(../fnt/font-oswald/Zm9udA_b3N3YWxk.woff2) format('woff2'),
url(../fnt/font-oswald/Zm9udA_b3N3YWxk.woff) format('woff'),
url(../fnt/font-oswald/Zm9udA_b3N3YWxk.ttf) format('truetype'),
url(../fnt/font-oswald/Zm9udA_b3N3YWxk.svg#oswald) format('svg');
font-weight:400;
font-style:normal;
}
#font-face{
font-family:'icon-general';
src: url(../fnt/icon-general/aWNvbg_Z2VuZXJhbA.eot);
src: url(../fnt/icon-general/aWNvbg_Z2VuZXJhbA.eot?#iefix) format('embedded-opentype'),
url(../fnt/icon-general/aWNvbg_Z2VuZXJhbA.woff2) format('woff2'),
url(../fnt/icon-general/aWNvbg_Z2VuZXJhbA.woff) format('woff'),
url(../fnt/icon-general/aWNvbg_Z2VuZXJhbA.ttf) format('truetype'),
url(../fnt/icon-general/aWNvbg_Z2VuZXJhbA.svg#icon-general) format('svg');
font-weight:400;
font-style:normal;
}
Oswald use
h1,h2,h3,h4,h5,h6{font-family:oswald}
Icon-general use
[data-icon]:before {
font-family: 'icon-general';
content: attr(data-icon);
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
CSS linking in HTML file
<link rel="stylesheet" href="/css/static.css">
Note that: it might be useful to know that no Content-Type headers are set in the font requests, that may be why there is trouble decoding the files.
The src url is correct, but the the text just shows up as a regular serif. Maybe it has to do with Shopify?
#font-face {
font-family: 'TradeGothicLTStdCnNo.18';
src: url('http://cdn.shopify.com/s/files/1/0065/5242/files/tradegothicltstd-cn18-webfont.eot');
src: url('http://cdn.shopify.com/s/files/1/0065/5242/files/tradegothicltstd-cn18-webfont.eot#iefix') format('embedded-opentype'),
url('http://cdn.shopify.com/s/files/1/0065/5242/files/tradegothicltstd-cn18-webfont.woff') format('woff'),
url('http://cdn.shopify.com/s/files/1/0065/5242/files/tradegothicltstd-cn18-webfont.ttf') format('truetype'),
font-weight: normal;
font-style: normal;
}
and
#navbar #navpanel .mainnav ul.tier1 > li {
font-size:13px;
font-family: 'TradeGothicLTStdCnNo.18';
}
It was a simple mistake.
the last src url
url('http://cdn.shopify.com/s/files/1/0065/5242/files/tradegothicltstd-cn18-webfont.ttf') format('truetype'),
should end with ; not ,
I thought of deleting the question, but instead decided to answer it myself just in case somebody else makes the same mistake.
I have a regular and bold version of a font face implemented like this:
#font-face {
font-family: 'TeXGyreAdventor';
src: url('../fonts/texgyreadventor-regular-webfont.eot');
src: url('../fonts/texgyreadventor-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/texgyreadventor-regular-webfont.woff') format('woff'),
url('../fonts/texgyreadventor-regular-webfont.ttf') format('truetype'),
url('../fonts/texgyreadventor-regular-webfont.svg#TeXGyreAdventorRegular') format('svg');
font-weight: normal;
font-style: normal; }
#font-face {
font-family: 'TeXGyreAdventor';
src: url('../fonts/texgyreadventor-bold-webfont.eot');
src: url('../fonts/texgyreadventor-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/texgyreadventor-bold-webfont.woff') format('woff'),
url('../fonts/texgyreadventor-bold-webfont.ttf') format('truetype'),
url('../fonts/texgyreadventor-bold-webfont.svg#TeXGyreAdventorbold') format('svg');
font-weight: bold;
font-style: normal; }
body { font-family: 'TeXGyreAdventor'; }
Now I would expect anything told to be bold in the CSS to use the bold version of the font and everything else to use the regular version. Alas this doesn't work. The browser uses the regular version for everything and implements it's own faux style.
If on the other hand I implement the font face like this:
#font-face {
font-family: 'TeXGyreAdventor';
src: url('../fonts/texgyreadventor-regular-webfont.eot');
src: url('../fonts/texgyreadventor-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/texgyreadventor-regular-webfont.woff') format('woff'),
url('../fonts/texgyreadventor-regular-webfont.ttf') format('truetype'),
url('../fonts/texgyreadventor-regular-webfont.svg#TeXGyreAdventorRegular') format('svg');
font-weight: normal;
font-style: normal; }
#font-face {
font-family: 'TeXGyreAdventorBold';
src: url('../fonts/texgyreadventor-bold-webfont.eot');
src: url('../fonts/texgyreadventor-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/texgyreadventor-bold-webfont.woff') format('woff'),
url('../fonts/texgyreadventor-bold-webfont.ttf') format('truetype'),
url('../fonts/texgyreadventor-bold-webfont.svg#TeXGyreAdventorbold') format('svg');
font-weight: normal;
font-style: normal; }
body { font-family: 'TeXGyreAdventor'; }
b,strong {
font-weight: normal;
font-family: 'TeXGyreAdventorBold'; }
Then it works! What gives? I thought the first method is suppose to work. Am I doing something wrong? Is there no way for the browser to understand what is bold and apply the correct version of the font? I don't want to have to declare a new font family for any bit of CSS I want to make bold!
I want to use some fonts and I want it to work without having this font on the client computer. I have done this but it doesn't work:
#font-face {
font-family: EntezareZohoor2;
src: url(Entezar2.ttf) format("truetype");
}
.EntezarFont {
font-family: EntezareZohoor2, B Nazanin, Tahoma !important;
}
Following lines are used to define a font in css
#font-face {
font-family: 'EntezareZohoor2';
src: url('fonts/EntezareZohoor2.eot'), url('fonts/EntezareZohoor2.ttf') format('truetype'), url('fonts/EntezareZohoor2.svg') format('svg');
font-weight: normal;
font-style: normal;
}
Following lines to define/use the font in css
#newfont{
font-family:'EntezareZohoor2';
}
One of the best source of information on this topic is Paul Irish's Bulletproof #font-face syntax article.
Read it and you will end with something like:
/* definition */
#font-face {
font-family: EntezareZohoor2;
src: url('fonts/EntezareZohoor2.eot');
src: url('fonts/EntezareZohoor2.eot?') format('☺'),
url('fonts/EntezareZohoor2.woff') format('woff'),
url('fonts/EntezareZohoor2.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
/* use */
body {
font-family: EntezareZohoor2, Tahoma, serif;
}
When I went to Google fonts all they gave me were true type font files .ttf and didn't explain at all how to use the #font-face to include them into my document. I tried the web font generator from font squirrel too, which just kept running the loading gif and not working... I then found this site -
https://transfonter.org/
I had great success using the following method:
I selected the Add Fonts button, leaving the default options, added all of my .ttf that Google gave me for Open Sans (which was like 10, I chose a lot of options...).
Then I selected the Convert button.
Heres the best part!
They gave me a zip file with all the font format files I selected, .ttf, .woff and .eot. Inside that zip file they had a demo.html file that I just double clicked on and it opened up a web page in my browser showing me example usages of all the different css font options, how to implement them, and what they looked like etc.
#font-face
I still didn't know at this point how to include the fonts into my stylesheet properly using #font-face but then I noticed that this demo.html came with it's own stylesheet in the zip as well. I opened the stylesheet and it showed how to bring in all of the fonts using #font-face so I was able to quickly, and easily, copy paste this into my project -
#font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-BoldItalic.eot');
src: url('fonts/Open_Sans/OpenSans-BoldItalic.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-BoldItalic.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-BoldItalic.ttf') format('truetype');
font-weight: bold;
font-style: italic;
}
#font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-LightItalic.eot');
src: url('fonts/Open_Sans/OpenSans-LightItalic.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-LightItalic.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-LightItalic.ttf') format('truetype');
font-weight: 300;
font-style: italic;
}
#font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-SemiBold.eot');
src: url('fonts/Open_Sans/OpenSans-SemiBold.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-SemiBold.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
#font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-Regular.eot');
src: url('fonts/Open_Sans/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-Regular.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-Light.eot');
src: url('fonts/Open_Sans/OpenSans-Light.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-Light.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
#font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-Italic.eot');
src: url('fonts/Open_Sans/OpenSans-Italic.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-Italic.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-Italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-SemiBoldItalic.eot');
src: url('fonts/Open_Sans/OpenSans-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-SemiBoldItalic.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-SemiBoldItalic.ttf') format('truetype');
font-weight: 600;
font-style: italic;
}
#font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-ExtraBold.eot');
src: url('fonts/Open_Sans/OpenSans-ExtraBold.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-ExtraBold.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-ExtraBold.ttf') format('truetype');
font-weight: 800;
font-style: normal;
}
#font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-ExtraBoldItalic.eot');
src: url('fonts/Open_Sans/OpenSans-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-ExtraBoldItalic.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-ExtraBoldItalic.ttf') format('truetype');
font-weight: 800;
font-style: italic;
}
#font-face {
font-family: 'Open Sans';
src: url('fonts/Open_Sans/OpenSans-Bold.eot');
src: url('fonts/Open_Sans/OpenSans-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/Open_Sans/OpenSans-Bold.woff') format('woff'),
url('fonts/Open_Sans/OpenSans-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
The demo.html also had it's own inline stylesheet that was interesting to take a look at, though I am familiar with working with font weights and styles once they are included so I didn't need it much. For an example of how to implement a font style onto an html element for reference purposes you could use the following method in a similar case to mine after #font-face has been used properly -
html, body{
margin: 0;
font-family: 'Open Sans';
}
.banner h1{
font-size: 43px;
font-weight: 700;
}
.banner p{
font-size: 24px;
font-weight: 300;
font-style: italic;
}
Go through http://www.w3.org/TR/css3-fonts/
Try this:
#font-face {
font-family: 'EntezareZohoor2';
src: url('EntezareZohoor2.eot');
src: local('EntezareZohoor2'), local('EntezareZohoor2'), url('EntezareZohoor2.ttf') format('svg');
font-weight: normal;
font-style: normal;
}
Try this link1,link2
#font-face {
font-family: 'RieslingRegular';
src: url('fonts/riesling.eot');
src: local('Riesling Regular'), local('Riesling'), url('fonts/riesling.ttf') format('truetype');
}
I used Ataturk's font like this. I didn't use "TTF" version. I translated orginal font version ("otf" version) to "eot" and "woof" version.
Then It works in local but not working when I uploaded the files to server.
So I added "TTF" version too like this. Now, It's working on Chrome and Firefox but Internet Explorer still defence.
When you installed on your computer "Ataturk" font, then working IE too. But I wanted to use this font without installing.
#font-face {
font-family: 'Ataturk';
font-style: normal;
font-weight: normal;
src: url('font/ataturk.eot');
src: local('Ataturk Regular'), url('font/ataturk.ttf') format('truetype'),
url('font/ataturk.woff') format('woff');
}
You can see it on my website here: http://www.canotur.com