Icon font from fontello not working with Meteor js - html

I have downloaded a custom icon font from fontello and intend to use it in my meteor app.
I tried the demo that comes with the downloaded package and the fonts display fine. Here is my css:
#font-face {
font-family: 'fontello';
src: url('fonts/fontello.eot?98991264');
src: url('fonts/fontello.eot?98991264#iefix') format('embedded-opentype'),
url('fonts/fontello.woff?98991264') format('woff'),
url('fonts/fontello.ttf?98991264') format('truetype'),
url('fonts/fontello.svg?98991264#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: "fontello";
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .2em;
text-align: center;
/* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal;
text-transform: none;
/* fix buttons height, for twitter bootstrap */
line-height: 1em;
}
.icon-twitter:before { content: '\e805'; } /* '' */
.icon-github-circled:before { content: '\e804'; } /* '' */
.icon-pencil:before { content: '\e801'; } /* '' */
.icon-cancel:before { content: '\e802'; } /* '' */
.icon-chat:before { content: '\e800'; } /* '' */
My folder structure is like so /client/css/styles.css and for the fonts /client/css/fonts/
In my html I have added this markup <i class="icon-twitter"></i> and unfortunately all i see when I view the page this is all I see
Any help would be great. Thanks

If you want to reference your fonts at your.domain.com/fonts/font_name.x, you should move your fonts directory to a directory labeled public. You can then access them using the path /fonts/font_name.x.
Take a look at the Unofficial Meteor FAQ found here: https://github.com/oortcloud/unofficial-meteor-faq#where-should-i-put-my-files
public/ # <- static files, such as images, that are served directly.
Or the Meteor documentation directly: http://docs.meteor.com/#structuringyourapp
Lastly, the Meteor server will serve any files under the public
directory, just like in a Rails or Django project. This is the place
for images, favicon.ico, robots.txt, and anything else.

Try using absolute paths:
#font-face {
font-family: 'fontello';
src: url('/client/css/fonts/fontello.eot?98991264');
src: url('/client/css/fonts/fonts/fontello.eot?98991264#iefix') format('embedded-opentype'),
url('/client/css/fonts/fontello.woff?98991264') format('woff'),
url('/client/css/fonts/fontello.ttf?98991264') format('truetype'),
url('/client/css/fonts/fontello.svg?98991264#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
Also it might be better to store fonts in /public as in production mode /client wont work anymore and you'll get those squares again & you could use /fonts/ instead (to map to /public/fonts)

I had the same issue and the way I solved was by using these absolute paths:
#font-face {
font-family: 'icomoon';
src:url('/fonts/icomoon.eot');
src:url('/fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('/fonts/icomoon.woff') format('woff'),
url('/fonts/icomoon.ttf') format('truetype'),
url('/fonts/icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
Directly on the public/fonts/ directory. I guess that MeteorJS is smart enough to guess the paths.

Related

How can I load a custom font with CSS in Safari?

I am creating a simple web page and I am applying a custom font (Roboto). I have declared them in the CSS file but Chrome detects it fine and Safari does not.
#font-face {
font-family: 'Roboto';
src: url('/fonts/roboto500.eot');
src: url('/fonts/roboto500.eot') format('embedded-opentype'),
url('/fonts/roboto500.woff2') format('woff2'),
url('/fonts/roboto500.woff') format('woff'),
url('/fonts/roboto500.ttf') format('truetype'),
url('/fonts/roboto500.svg') format('svg');
}
#font-face {
font-family: 'Roboto';
src: url('/fonts/roboto700.eot');
src: url('/fonts/roboto700.eot') format('embedded-opentype'),
url('/fonts/roboto700.woff2') format('woff2'),
url('/fonts/roboto700.woff') format('woff'),
url('/fonts/roboto700.ttf') format('truetype'),
url('/fonts/roboto700.svg') format('svg');
}
h1.site-title,
h2.subtitles {
font-family: 'Roboto' !important;
font-weight: bold;
}
h4.subtitles {
font-family: 'Roboto' !important;
font-weight: bold;
}
p {
font-family: 'Roboto' !important;
font-weight: normal;
color: rgb(90, 90, 90);
}
I checked with the Safari console to see if it was getting the fonts, and it does, but when I look at the files one by one, they don't match the original font.
Finally, thanks to some comments and such, I got it to work using another download link:
https://fonts.googleapis.com/css?family=Roboto
From here Google offers different components to add to the CSS of your project, what I did was, just in case in the future that typography was no longer available in that link and I lost it, I downloaded it from the link that appears and I put it locally in my project and linked it with the relative path.
I have no idea if it was because the files I downloaded didn't work or any other reason, but the fact is that from this link and using only the one in woff2 format, it works both in Chrome and Safari.
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: url(../fonts/roboto/roboto.woff2) format('woff2');
}
I hope this may be of help to someone in the future. Many thanks to all of you who have responded.

How to get the sound icon from https://www.larousse.fr?

I'm trying to download as png the sound icon from this url.
I inspected the CSS and it shows that
.lienson:after {
font-family: "fontello";
font-size: 20px;
font-weight: normal;
font-style: normal;
display: inline;
content: '\e82c';
color: #ff4b54;
text-decoration:none;
cursor:pointer; /*gestion v.audio*/
}
#font-face {
font-family: 'fontello';
src: url('./../fonts/fontello.eot?58255341');
src: url('./../fonts/fontello.eot?58255341#iefix') format('embedded-opentype'),
url('./../fonts/fontello.woff?58255341') format('woff'),
url('./../fonts/fontello.ttf?58255341') format('truetype'),
url('./../fonts/fontello.svg?58255341#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
.fontello {
font-family: "fontello";
}
I guess the link to download is ./../fonts/fontello.svg?58255341#fontello but could not figure out what is the full link?
Could you please elaborate on how to get this icon?
It's not a png, it's a webfont.
So, either you odwnload it directly from the url, which i wouldn't recommend because it would potentially raise copyright issues. FYI in this case the font url is relative to the css file url.
Or you make a screenshot of the element, which raise similar issues oif you use it.
Or you search for that font online, which could be a fail, since fontello is a font building tool, and the font you're searching for could simply not exist in the public domain.

Font-awesome icons not showing but main.css is showing

I have a project with bootstrap en font-awesome setup if I view my main.css the first thing I see is that font-awesome is imported. And all its icons, I don't understand why the html is not picking up the font-awesome classes.
/*!
* Font Awesome 4.4.0 by #davegandy - http://fontawesome.io - #fontawesome
* License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
*/
/* FONT PATH
* -------------------------- */
#font-face {
font-family: 'FontAwesome';
src: url('../../fonts/fontawesome-webfont.eot?v=4.4.0');
src: url('../../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'), url('../../fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'), url('../../fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'), url('../../fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'), url('../../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
I'll hope someone can help me out on this
is this your project folder looks like?
folder structure image
if so, then remove one "../" in your font-awesome.css file.
#font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.4.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
You need to check the font path, check in the Console of your browser (Ctrl+Shift+J on Chrome) if you don't get an alert like
Failed to load resource: [...]
This kind of warning means that the path of the ressource is wrong.

CSS Web fonts how to use it with use of #font-face its not working

this is my stylesheet for web font
#font-face {
font-family: 'bebas_neueregular';
src: url('bebasneue-webfont.eot');
src: url('bebasneue-webfont.eot?#iefix') format('embedded-opentype'),
url('bebasneue-webfont.woff') format('woff'),
url('bebasneue-webfont.ttf') format('truetype'),
url('bebasneue-webfont.svg#bebas_neueregular') format('svg');
font-weight: normal;
font-style: normal;
}
and me use that font like this
.men_tp{
color: #d1d3d5;
float: left;
font-family:"bebas_neueregular",Arial;
font-size:22px;
}
its working fine in my machine because i have those fonts but that font not applying for other hosts even i placed those font src in same area were i placed that CSS file.Help me Guys.
Try changing your CSS line to the following:
.men_tp {
color: #d1d3d5;
float: left;
font-family: bebas_neueregular, Arial;
font-size:22px;
}
(The line breaks have only been inserted to make it easier to read on this page.)
You've declared the new font as having name "bebas-neueregular" in your #font-face block, so you need to use that in your CSS declaration for the .men_tp style.

#fontface fonts do not render

I'm trying to use the #fontface syntax for using extra fonts on my webpage. The thing is that while fonts appear as they should in dreamweaver, when I preview the page in Firefox or IE fonts do not render.
Here is the syntax I use:
#font-face {
font-family: 'KomikaTextRegular';
src: url('/fonts/KOMTXT__-webfont.eot');
src: url('/fonts/KOMTXT__-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/KOMTXT__-webfont.woff') format('woff'),
url('/fonts/KOMTXT__-webfont.ttf') format('truetype'),
url('/fonts/KOMTXT__-webfont.svg#KomikaTextRegular') format('svg');
font-weight: normal;
font-style: normal;
}
body {
margin: 0;
min-width: 1024px;
font-family: 'KomikaTextRegular', DeliciousRoman, Helvetica, Arial, sans-serif;
}
Have you tried to use the full url , with the servername too?
#font-face {
font-family: 'KomikaTextRegular';
src: url('Http://servername/fonts/KOMTXT__-webfont.eot');
src: url('Http://servername/fonts/KOMTXT__-webfont.eot?#iefix') format('embedded-opentype'),
url('Http://servername/fonts/KOMTXT__-webfont.woff') format('woff'),
url('Http://servername/fonts/KOMTXT__-webfont.ttf') format('truetype'),
url('Http://servername/fonts/KOMTXT__-webfont.svg#KomikaTextRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Or without ''?
body { margin:0;
min-width:1024px;
font-family: KomikaTextRegular, DeliciousRoman, Helvetica, Arial, sans-serif;
}
Also it's it a good article about using of the font-face.
If your full path is /www/demo.site.com/fonts/
and you use /fonts it may jump back to look for it in /www/fonts/ rather than the folder you want. Depends on what the root folder is set to really. Try base href maybe?
What if you take the first / off, does that work?
Try inspect it in firebug and find out where the path is to the css files.