I have a problem with font rendering in Firefox and Chrome on Windows systems.
Here is the font face:
#font-face {
font-family: 'Museo500';
src: url('../fonts/museo500/MuseoSans_500-webfont.eot');
src: local('?'),
url('../fonts/museo500/MuseoSans_500-webfont.woff') format('woff'),
url('../fonts/museo500/MuseoSans_500-webfont.ttf') format('truetype'),
url('../fonts/museo500/MuseoSans_500-webfont.svg#webfontr3rD8cn7') format('svg');
}
and here is a input class:
input {
font-family: Museo500, sans-serif;
letter-spacing: 0;
color: #ff0000;
margin: 0px;
padding: 10px;
font-size: 20px;
font-weight: normal;
}
I cannot understand how on IE8 the font is rendered well and on Firefox and Chrome the font is not render correctly. If someone can give me a suggestion I'll be grateful.
Or maybe a font that replaces museo500, museo700.
Thank you.
I have answered a similar question here: Font-Face Not loaded
You may need to add the types via .htaccess or MIME types to IIS.
Related
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'm trying to load local fonts with custom names. Everything works perfectly in all browsers except IE, as always. The font isn't being rendered in bold or italic. I can't seem to understand what I'm doing wrong here.
Here is a demo:
http://jsfiddle.net/maitreyjukar/5ga5k2oa/
I am loading the font using the following CSS
#font-face {
font-family: k_Arial;
src: local("Arial"),
local("Helvetica"),
local("sans-serif");
font-weight: normal;
font-style: normal;
}
for all combinations of font-weight and font-style.
This is not only not an IE-specific issue it doesn't work on other browsers like Firefox.
Just write one font-face Rule istead of four like this:
#font-face {
font-family: k_Arial;
src: local("Arial"),
local("Helvetica"),
local("sans-serif");
}
Here is My Solution: http://jsfiddle.net/deepak__yadav/1eed9na5 i hope you will understand what you did wrong.
It's not an IE-specific issue - I'm on Firefox 38 and it doesn't work here either...
local sources are usually used to search on a user's machine before pointing to a URL, in order to speed things up.
However, you seem want to solely use locally installed fonts with a certain fallback order.
To achieve this, you could simply do the following:
body {
font-family: Arial, Helvetica, sans-serif;
}
.bold {
font-weight: bold;
}
.italic {
font-style: italic;
}
Bonus tip: Combine the bold and italic classes and you don't need an additional class bolditalic.
JS-Fiddle
you can define your font like below example, this will work in all the browsers.
#font-face {
font-family: 'ProximaNovaRegular';
src: url('../fonts/ProximaNovaRegular.eot');
src: url('../fonts/ProximaNovaRegular.eot') format('embedded-opentype'),
url('../fonts/ProximaNovaRegular.woff2') format('woff2'),
url('../fonts/ProximaNovaRegular.woff') format('woff'),
url('../fonts/ProximaNovaRegular.ttf') format('truetype'),
url('../fonts/ProximaNovaRegular.svg#ProximaNovaRegular') format('svg');
}
I'm using a customized webfont on my page and I'm having some rendering issues in different platforms. The alignment of the text in the blocks is somewhat different in linux and windows. Here's an example:
Chrome in Linux:
Chrome in Windows:
They're both using the same version of the font (otf), the styles are exactly the same (same line-height and margins).
Here's the source of the font-face:
#font-face {
font-family: 'Calibre Regular';
src: url('fonts/Calibre-Regular.eot') format('embedded-opentype'),
url('Calibre-Regular.otf') format('opentype'),
url('fonts/Calibre-Regular.woff') format('woff'),
url('fonts/Calibre-Regular.ttf') format('truetype'),
url('fonts/Calibre-Regular.svg#Calibre-Regular') format('svg');
font-weight: normal;
font-style: normal;
}
Is there any way to solve this?
This is can be caused by webkit when rendering custom fonts try using -webkit-font-smoothing. The default value of which is subpixel-antialiased. Try setting:
h1,h2,h3,h4,h5,h6 {
-webkit-font-smoothing: antialiased;
}
Alternative solution
If the above doesn't work then this may work, I had a similar issue before with chrome and randomly found this fix on the interent. Not sure where but it basically forces Chrome to use the SVG version of the font.
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: 'nameOfFontFamily';
src: font-url('url/to/svgfont.svg') format('svg');
}
}
Browsers render elements different - could be the issue even if its the same browser. Define margin, padding and line-height in your CSS - you could use a 'reset.css'.
Try this:
p,h1,h2,h3,h4,h5,h6 {
margin: 0;
padding: 0;
line-height: 1.4;
}
im working on a license plate previewing script
everything is going great, except for the fact that in this custom font, numbers are larger than letters despite them having the same font-size declared.
here is a screenshot:
the font is: http://www.dafont.com/mandatory.font
i used the font squirrel generator to get the files and css for it.
heres the css:
body {
margin: 0px 0px;
background: #3AB54B;
color: #000000;
font-family: 'mandatoryregular';
text-align: center;
font-size: 150px;
}
#font-face {
font-family: 'mandatoryregular';
src: url('fonts/mandator-webfont.eot');
src: url('fonts/mandator-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/mandator-webfont.woff') format('woff'),
url('fonts/mandator-webfont.ttf') format('truetype'),
url('fonts/mandator-webfont.svg#mandatoryregular') format('svg');
font-weight: normal;
font-style: normal;
}
my question is, how can i fix this? im also using php. the only way ive thought of so far is to use php to go through each character and if it is numeric, have it add a span around the character then declare a different font size in the css.
but is there a better/easier way?
I am having some issues with loading a custom font on a site that I am working on.
Seems to work in Chrome, but that is it...
https://andstones.site-ym.com/
I attach a custom stylesheet,
<link charset="utf-8" type="text/css" href="http://www.korymathewson.com/fonts/styles.css" rel="stylesheet">
and in the stylesheet I write:
#font-face {
font-family: ChunkFiveRegular;
src: url('Chunkfive-webfont.eot');
src: local('☺'), url('Chunkfive-webfont.woff') format('woff'), url('Chunkfive-webfont.ttf') format('truetype'), url('Chunkfive-webfont.svg#webfontb5K2fJwj') format('svg');
font-weight: normal;
font-style: normal;
}
Then I call that as a font-family..
h1.fontface {
font: 60px/68px 'ChunkFiveRegular', Arial, sans-serif;
letter-spacing: 0;
}
p.style1, #MainMenu {
font: 18px/27px 'ChunkFiveRegular', Arial, sans-serif !important;
}
But it still does not show up in firefox or IE ... any help or advice you can lend?
Firefox only allows embedded fonts that are on the SAME DOMAIN as the site requesting it. There is a (sort of) workaround here:
http://openfontlibrary.org/wiki/Web_Font_linking_and_Cross-Origin_Resource_Sharing
You might want to try to use http://www.fontsquirrel.com/ to allow you to have the fonts themselves embedded in the CSS -- very useful!
Hope this helps
What is 92p? A node or is it meant to be a class? CSS class/id names can't start with a number.