Why is my #font-face not working? - html

I am confused as to why this code is not working for me. I am trying to add icons to my tags, but when I call the font from my files of my website, they don't seem to be working for anything I try to put them in. I am trying to insert an icon into my .showMenu , but for some reason, it isn't working. I have the font files uploaded to my server, and the url's in the #font-face are the correct ones, but it doesn't want to work. Please help!
HTML:
<div class="column">
<span class="showMenu" id="showMenu"></span>
</div>
CSS:
#font-face {
font-weight: normal;
font-style: normal;
font-family: 'icomoon';
src:url('../fonts/icomoon/icomoon.eot');
src:url('../fonts/fonts/icomoon/icomoon.eot?#iefix') format('embedded-opentype'),
url('../fonts/fonts/icomoon/icomoon.ttf') format('truetype'),
url('../fonts/fonts/icomoon/icomoon.woff') format('woff'),
url('../fonts/fonts/icomoon/icomoon.svg#typicons') format('svg');
}
.showMenu {
font-size: 22px;
padding-left: 10px;
padding-right: 10px;
background: #ed8151;
font-family: 'icomoon';
border: 1px solid #e86a32;
border-radius: 3px;
}
.showMenu:before {
content: "\e6b8"
}

I was putting around, and figured out that each font file needs a full file path, instead of a shortened one.
Here is what it should look like:
CSS:
#font-face {
font-weight: normal;
font-style: normal;
font-family: 'icomoon';
src:url('http://yoursite.com/fonts/icomoon/icomoon.eot');
src:url('http://yoursite.com/fonts/icomoon/icomoon.eot?#iefix') format('embedded-opentype'),
url('http://yoursite.com/fonts/icomoon/icomoon.ttf') format('truetype'),
url('http://yoursite.com/fonts/icomoon/icomoon.woff') format('woff'),
url('http://yoursite.com/fonts/icomoon/icomoon.svg#typicons') format('svg');
}

It looks like your paths are incorrect. Try:
src:url('../fonts/icomoon/icomoon.eot');
src:url('../fonts/icomoon/icomoon.eot?#iefix') format('embedded-opentype'),
url('../fonts/icomoon/icomoon.ttf') format('truetype'),
url('../fonts/icomoon/icomoon.woff') format('woff'),
url('../fonts/icomoon/icomoon.svg#typicons') format('svg');

Related

Font awesome using font face

I'm looking for something like this
#font-face {
font-family: "FontAwesome";
font-weight: normal;
font-style : normal;
src : url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?v=4.3.0");
src : url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"),
url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0") format("woff2"),
url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff?v=4.3.0") format("woff"),
url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.ttf?v=4.3.0") format("truetype"),
url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg");
}
.myClass:before {
font-family: FontAwesome;
content: "\f024";
}
<a class="myClass" href="#">This is a link</a>
I want to load font file using CSS property. And to create a custom class for font icon. The above didn't work. It failed to load respective icon. Instead it show bar
Try opening the Javascript console and adding the error messages that appear there to your question.
When I tried your code in JSFiddle, all it needed was for the maxcdn links to be SSL-based HTTPS links as opposed to insecure HTTP links.
That may be the solution to your issue, but it's hard to tell without the console error output.
#font-face {
font-family: "FontAwesome";
font-weight: normal;
font-style : normal;
src : url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?v=4.3.0");
src : url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"),
url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0") format("woff2"),
url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff?v=4.3.0") format("woff"),
url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.ttf?v=4.3.0") format("truetype"),
url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg");
}
.myClass:before {
font-family: FontAwesome;
content: "\f024";
}
use cdn link to create #font-face as following way
#font-face {
font-family: "FontAwesome";
font-weight: normal;
font-display: auto;
font-style: normal;
src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2") format("woff2");
}
Please note that if are including font-awesome.min.css in your page (as explained in Font-awesome's documentation) then it already includes the following #font-face, at the very beginning of the file, and you wouldn't need to add your own:
#font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
If you are looking for FontAwesome then you're probably looking for this-
<link rel="stylesheet" id="champion-fontawesome-css" href="wp-content/themes/bla/inc/font-awesome-4.7.0/css/font-awesome.min.css?ver=4.7.3" type="text/css" media="all">
If you are looking to load a custom font of your own then try this-
#font-face {
font-family: 'FFDINRoundWebPro';
font-weight: normal;
font-style: normal;
src: url('assets/fonts/3103D9_0_0.eot');
src: url('assets/fonts/3103D9_0_0.eot?#iefix') format('embedded-opentype'), url('assets/fonts/3103D9_0_0.woff2') format('woff2'), url('assets/fonts/3103D9_0_0.woff') format('woff'), url('assets/fonts/3103D9_0_0.ttf') format('truetype');
}
#font-face {
font-family: 'FFDINRoundWebPro';
font-weight: 700;
src: url('assets/fonts/3103D9_1_0.eot');
src: url('assets/fonts/3103D9_1_0.eot?#iefix') format('embedded-opentype'), url('assets/fonts/3103D9_1_0.woff2') format('woff2'), url('assets/fonts/3103D9_1_0.woff') format('woff'), url('assets/fonts/3103D9_1_0.ttf') format('truetype');
}
#font-face {
font-family: 'FFDINRoundWebPro';
font-weight: 500;
src: url('assets/fonts/3103D9_2_0.eot');
src: url('assets/fonts/3103D9_2_0.eot?#iefix') format('embedded-opentype'), url('assets/fonts/3103D9_2_0.woff2') format('woff2'), url('assets/fonts/3103D9_2_0.woff') format('woff'), url('assets/fonts/3103D9_2_0.ttf') format('truetype');
}
#font-face {
font-family: 'FFDINRoundWebPro';
font-weight: 300;
src: url('assets/fonts/3103D9_3_0.eot');
src: url('assets/fonts/3103D9_3_0.eot?#iefix') format('embedded-opentype'), url('assets/fonts/3103D9_3_0.woff2') format('woff2'), url('assets/fonts/3103D9_3_0.woff') format('woff'), url('assets/fonts/3103D9_3_0.ttf') format('truetype');
}
As you can see, for each font-weight i create another #font-face with the same font-family name.

How to use a specific style out of a font-family?

I am trying to create my first website and I am experimenting with fonts from fontsquirrel.
The only problem is that I can use only some of the fonts I have downloaded through the site.
I am having a great deal of a problem in particular in writing the CSS code correctly, when the font family includes more than one style.
Lets take for example the LM Mono 10 Regular and Special Elite for example:
My code for special elite is the following and it works great:
#font-face {
font-family: 'specialelite';
src: url('specialelite.eot');
src: url('specialelite.eot?#iefix') format('embedded-opentype'),
url('specialelite.woff2') format('woff2'),
url('specialelite.woff') format('woff'),
url(' specialelite.ttf') format('truetype'),
url(' specialelite.svg# specialelite') format('svg');
font-weight: normal;
font-style: normal;
}
and
.fifth {font-family: 'specialelite'; font-weight: normal; font-size: 16px; color:black;}
This format is easy to work with because the special elite font-family has only one style.
BUT.. When I am trying to adapt this format on a font-family that has more than one styles like for example the LM Mono 10 family, it simply does not work....
http://www.fontsquirrel.com/fonts/Latin-Modern-Mono
I do not know if the mistake is on the way I am referring to the font family, or if I write the urls wrong... Could you please provide an example of the code in a reply?
Let's say for "Latin Modern Mono Light 10 Regular". How will the font-weight and font-style properties change? I just don't get it...
When I download the resources at the link you provided, it shows each font style as a completely different font family.
This is the Italic version:
#font-face {
font-family: 'latin_modern_mono10_italic';
src: url('lmmono10-italic-webfont.eot');
src: url('lmmono10-italic-webfont.eot?#iefix') format('embedded-opentype'),
url('lmmono10-italic-webfont.woff') format('woff'),
url('lmmono10-italic-webfont.ttf') format('truetype'),
url('lmmono10-italic-webfont.svg#latin_modern_mono10_italic') format('svg');
font-weight: normal;
font-style: normal;
}
This is the Regular version:
#font-face {
font-family: 'latin_modern_mono10_regular';
src: url('lmmono10-regular-webfont.eot');
src: url('lmmono10-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('lmmono10-regular-webfont.woff') format('woff'),
url('lmmono10-regular-webfont.ttf') format('truetype'),
url('lmmono10-regular-webfont.svg#latin_modern_mono10_regular') format('svg');
font-weight: normal;
font-style: normal;
}
In order to use these fonts as-is, you will need to specify the appropriate font-family whenever you use them.
For example:
.fifth {
font-family: 'latin_modern_mono10_regular';
font-weight: normal;
...
}
or
.fifth {
font-family: 'latin_modern_mono10_italic';
font-weight: normal;
...
}
For Regular and Italic version:
#font-face {
font-family: 'specialelite';
src: url('specialelite.eot');
src: url('specialelite.eot?#iefix') format('embedded-opentype'), url('specialelite.woff2') format('woff2'), url('specialelite.woff') format('woff'), url(' specialelite.ttf') format('truetype'), url(' specialelite.svg# specialelite') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'specialelite';
src: url('specialelite_italic.eot');
src: url('specialelite_italic.eot?#iefix') format('embedded-opentype'), url('specialelite_italic.woff2') format('woff2'), url('specialelite_italic.woff') format('woff'), url(' specialelite_italic.ttf') format('truetype'), url(' specialelite_italic.svg# specialelite') format('svg');
font-weight: normal;
font-style: italic;
}
Now, you can use this for Regular: font-style: normal
.fifth {font-family: 'specialelite'; font-style: normal; font-size: 16px; color:black;}
OR this for Italic: font-style: italic
.fifth {font-family: 'specialelite'; font-style: italic; font-size: 16px; color:black;}

HTML signature on macosx font

I have macosx and I made a html signature for mail.app but when I send email and someone pick it with windows property font-family does not work.
When I send from MAC to MAC everything is okey.
Here are my styles:
#font-face {
font-family: 'open_sansitalic';
src: url('opensans-italic-webfont.eot');
}
#font-face {
font-family: 'open_sansitalic';
src: url(data:application/x-font-woff;charset=utf-8;base64,...) format('woff'),
url('opensans-italic-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'open_sanssemibold';
src: url('opensans-semibold-webfont.eot');
}
#font-face {
font-family: 'open_sanssemibold';
src: url(data:application/x-font-woff;charset=utf-8;base64,...) format('woff'),
url('opensans-semibold-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'open_sanslight';
src: url('opensans-light-webfont.eot');
}
#font-face {
font-family: 'open_sanslight';
src: url(data:application/x-font-woff;charset=utf-8;base64,...) format('woff'),
url('opensans-light-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'open_sansregular';
src: url('opensans-regular-webfont.eot');
}
#font-face {
font-family: 'open_sansregular';
src: url(data:application/x-font-woff;charset=utf-8;base64,...) format('woff'),
url('opensans-regular-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
And also this:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,300,600,700' rel='stylesheet' type='text/css'>
You must give absolute url
url('opensans-italic-webfont.ttf') format('truetype');
src: url('opensans-semibold-webfont.eot');
Note1: Maybe it´s a good ideia to put the fonts in a remote server or use CDN
Note2: It only works on Apple Mail and iPhone

Drawing icons with font-face and :before content

I have a little problem while creating icons with font-face and :before pseudo-class. I'm using LESS too. Right now, I have something like
#font-face {
font-family: 'myfontname';
src: url('../myurl.eot');
src: url('../myurl?#iefix') format('embedded-opentype'),
url('../myurl.woff') format('woff'),
url('../myurl.ttf') format('truetype'),
url('../myurl.svg#name') format('svg');
font-weight: normal;
font-style: normal;
}
.icon{
font-family: 'myfontname';
font-size: 1em;
padding:0;
margin:0;
}
.icon-correct:before{
.icon; /*mixin*/
position: relative;
content:"\004C"; /*L in my font*/
display: block;
}
And in my HTML
<span class="icon-correct"></span>
I can't see my icon doing it this way. However, it works if I do something like
<span class="icon">L</span>
What am I doing wrong? Thank you.

CSS ignoring #font-face declarations

I have two #font-face assignments in my CSS. Only the second/last one ever renders, though they are nearly identical.
#font-face {
font-family: 'callunaregular';
src: url('callunaregular/Calluna-Regular-webfont.eot');
src: url('callunaregular/Calluna-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('callunaregular/Calluna-Regular-webfont.woff') format('woff'),
url('callunaregular/Calluna-Regular-webfont.ttf') format('truetype'),
url('callunaregular/Calluna-Regular-webfont.svg#callunaregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'bodonitownregular';
src: url('bodonitownregular/bodonitown-webfont.eot');
src: url('bodonitownregular/bodonitown-webfont.eot?#iefix') format('embedded-opentype'),
url('bodonitownregular/bodonitown-webfont.woff') format('woff'),
url('bodonitownregular/bodonitown-webfont.ttf') format('truetype'),
url('bodonitownregular/bodonitown-webfont.svg#bodonitownregular') format('svg');
font-weight: normal;
font-style: normal;
}
I think it's a simple fix, but I don't know what I'm doing wrong!
Edit:
<body style='background-color:white'>
<div align='center' style='position:absolute;left:500px;top:89px'>
<a id='title' href='home.html' >
<span style="font-family: callunaregular; font-size: 79px;">Open Mic Night</span>
</a>
is identical to setting the font-family to Times.
Perhaps this one causes the problem?:
'callunaregular/Calluna-Regular-webfont.svg#bodonitownregular'
See, after the hash?