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
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.
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.
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.
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.
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.