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.
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 searched the web and look for ways to add an external fonts to the web or CSS. I know we should use #font-face to do that. But, my website doesn't load the font when I reload. Can someone see the problems for me?
This is my codes:
<style>
#font-face {
font-family: 'vcr_osd_monoregular';
src: url('vcr_osd_mono-webfont.woff2') format('woff2'),
url('vcr_osd_mono-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
h1 {
font-size: 90px;
font-family: "vcr_osd_monoregular", sans-serif;
color: yellow;
}
</style>```
Instead of printing out vcr_osd_monoregular font, it prints out sans-serif. Please help.
I am currently making a website in Wordpress. The problem I have is using a font. I couldn't find an answer to my question here, so I decided to ask myself. Someone send a font to me to use, but the problem is when I open the file there are different styles of that font. To be clearer: the font is Avenir Next and the different styles are Avenir Next Bold, Avenir Next Medium, Avenir Next Ultra Light.
It is not a google font. I have tried to include it with #font-face :
#font-face {
font-family: Avenir Next;
src: url('http://localhost/cultuurfonds/wp-
content/themes/monstroid/fonts/Avenir-Next.ttf');
font-weight: bold;
font-weight: 700;
}
#font-face {
font-family: Avenir Next Medium;
src: url('http://localhost/cultuurfonds/wp-
content/themes/monstroid/fonts/Avenir-Next.ttf');
font-weight: normal;
font-weight: 400;
}
With this I can use the Avenir Next (which is pretty bold, so I don't want to use that), but Avenir Next Medium doesn't work.
It is a paid font, but I am not the one who bought it. That person send the font file (Avenir-Next.ttf) to me, so this is what I have to work with.
I prefer to not use a plugin to include it. I couldn't find a good plugin for it anyway. But if there is no other way than to use a plugin, I am willing to use it.
I hope my question is clear (first question here).
If you want to load fonts from your local files, firstly you have to use tools like https://www.web-font-generator.com/ to generate different formats of the font.
Then you have to load all formats of the font like this
#font-face {
font-family: 'AvenirNextLTPro';
src: url('fonts/AvenirNextLTPro-Regular.eot?#iefix') format('embedded-opentype'),
url('fonts/AvenirNextLTPro-Regular.otf') format('opentype'),
url('fonts/AvenirNextLTPro-Regular.woff') format('woff'),
url('fonts/AvenirNextLTPro-Regular.ttf') format('truetype'),
url('fonts/AvenirNextLTPro-Regular.svg#AvenirNextLTPro-Regular') format('svg');
font-weight: 400;
font-style: normal;
}
#font-face {
font-family: 'AvenirNextLTPro';
src: url('fonts/AvenirNextLTPro-Demi.eot?#iefix') format('embedded-opentype'),
url('fonts/AvenirNextLTPro-Demi.woff') format('woff'),
url('fonts/AvenirNextLTPro-Demi.ttf') format('truetype'),
url('fonts/AvenirNextLTPro-Demi.svg#AvenirNextLTPro-Demi') format('svg');
font-weight: 500;
font-style: normal;
}
As you can see font-family name is the same, but font weight size is different (Regular - 400 and Demi - 500)
Then, when you want to use different font weight in different elements you have to declare it like this:
p {
font-family: 'AvenirNextLTPro';
font-weight: 400;
}
h1 {
font-family: 'AvenirNextLTPro';
font-weight: 500;
}
I'm at my wits end with this problem. I'm trying to include a font. The CSS file is located at project/css/.
My font is located at project/fonts/iconfont/.
I have the following font files in that folder (even though I'd probably only need woff):
icons.eot
icons.svg
icons.ttf
icons.woff
This is how I try to include my font:
#font-face {
font-family: icons;
src: url(../fonts/iconfont/icons.woff) format('woff');
font-weight: normal;
font-style: normal;
}
However I can't use the font. Checking with Chrome developer tools it doesn't even load. What am I doing wrong here?
Try to link all fonts format in #font-face selector and call font-family with custom name in quotation marks.
/*--- Define a custom web font ---*/
#font-face {
font-family: 'YourWebFont';
src:
url('../fonts/iconfont/icons.woff') format('woff'),
url('../fonts/iconfont/icons.ttf') format('ttf'),
url('../fonts/iconfont/icons.eof') format('eof'),
url('../fonts/iconfont/icons.svg') format('svg');
}
/*--- Use that font on the page ---*/
body {
font-family: 'YourWebFont', sans-serif;
}
Good luck!
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.