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?
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 just added a webfont to my CSS file. I'd like to use different weights of the same font.
However if I set font-size: 14px at least Chrome and Firefox render the font in rather strange way.
All characters with font-weight: normal are in fact only 13px high and the bold parts are 15px high.†
Screenshot: (font-size set to 13px, 14px and 15px):
CSS font-face declaration:
#font-face {
font-family: 'Frutiger';
src: url('frutiger.eot');
src: url('frutiger.eot?#iefix') format('embedded-opentype'),
url('frutiger.woff') format('woff'),
url('frutiger.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Frutiger';
src: url('frutiger-bold.eot');
src: url('frutiger-bold.eot?#iefix') format('embedded-opentype'),
url('frutiger-bold.woff') format('woff'),
url('frutiger-bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
Usage Example:
<p style="font-family: Frutiger; font-size: 13px">ABCABC<strong>ABCDABCD</strong>ASDFASDF</p>
<p style="font-family: Frutiger; font-size: 14px">ABCABC<strong>ABCDABCD</strong>ASDFASDF</p>
<p style="font-family: Frutiger; font-size: 15px">ABCABC<strong>ABCDABCD</strong>ASDFASDF</p>
Source of font:
Unknown, file has been passed along in my company for years. I used Font Squirrel to generate the *.woff, *.svg, and *.eot files. Same results with and without Font Squirrel's hinting feature.
Live Example:
http://font-render-issue.herokuapp.com/
Is there a way I can fix this?
† If you blend the first line (13px) over the second (14px) you can see that the non-bold parts match exactly. If you do the same thing with the second and third (15px) line, you can see that the bold parts match (at least in terms of height).
1) Like Jukka K. Korpela says, there is no CSS that actually uses the font.
2) The strange rendering you experience is the browser that tries to fake the bold style.
CSS:
#font-face {
font-family: 'Frutiger';
src: url('frutiger.eot');
src: url('frutiger.eot?#iefix') format('embedded-opentype'),
url('frutiger.woff') format('woff'),
url('frutiger.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Frutiger';
src: url('frutiger-bold.eot');
src: url('frutiger-bold.eot?#iefix') format('embedded-opentype'),
url('frutiger-bold.woff') format('woff'),
url('frutiger-bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
/* You did this inline with style="...". */
/* The font from the first #font-face */
p { font-family: Frutiger; }
/* Gets the bold font from the second #font-face */
strong { font-weight: bold; }
.small { font-size: 13px; }
.medium { font-size: 14px; }
.large { font-size: 15px; }
HTML:
<p class="small">ABCABC<strong>ABCDABCD</strong>ASDFASDF</p>
<p class="medium">ABCABC<strong>ABCDABCD</strong>ASDFASDF</p>
<p class="large">ABCABC<strong>ABCDABCD</strong>ASDFASDF</p>
EDIT
The font's look fine on my machine (Mac, Firefox, Safari). woff files are used.
Then I submitted the example.html to browsershots: http://browsershots.org/http://font-render-issue.herokuapp.com/example.html#
A lot of different outputs. Windows needs (better) hinting.
The Grid Fit ('gasp' table) of the fonts have one entry. They both have one range defined at 65535, which is okay.
I also bumped into the copyright info. You might want to consider alternative fonts. ;) http://joelcrawfordsmith.com/new/font/frutiger
The two fonts are from the same release. But a local file may take precedence. You can disable loading local files with the font face smiley hack.
#font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot');
src: local('☺︎'),
url('GraublauWeb.otf') format('opentype');
}
This is all I can think off for now.
i want to add external font "Droid Serif" and i put the fontface in the foundation.css file.
here is the code
#font-face{ font-family: 'MyWebFont';
src: url('../font/DroidSerif-Bold-webfont.eot');
src: url('../font/droid-bold/DroidSerif-Bold-webfont.eot?iefix') format('eot'),
url('../font/droid-bold/DroidSerif-Bold-webfont.woff') format('woff'),
url('../font/droid-bold/DroidSerif-Bold-webfont.ttf') format('truetype'),
url('../font/DroidSerif-Bold-webfont.svg#webfont') format('svg'); }
now, i call the name in body
body {
background: #edebda;
color: #222222;
padding: 0;
margin: 0;
font-family: "MyWebFont","Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-weight: normal;
font-style: normal;
line-height: 1;
position: relative;
cursor: default; }
but it wont take the font ? why is it so? I 've checked the path of the file and i am sure its right. is there anything wrong with the way foundation works?
i really need your help ppl !
I've done it with Zurb Foundation without problems. Your font-face code seems good to me...
Have you tried to apply these font properties to a single item (not to body)? For example, enclose them into a class name (.apply-font) and apply it to a div or a span. Does it works? If not, maybe there's a path problem to your font files. But you're sure that's not the problem...
If it works, it could be that your body definition goes before the body one created by zurb when it compiles the file _globals.scss, and the second one overrides the first. To test if that's the problem, you could use the !important declaration to your font-family. This is the way to say that it doesn't matter where it's declared, this is the one to use.
I have created an icon font using custom .svg icons and I am having a problem with the padding (or possibly something else). The icons I used to not include any padding, in case that question comes up.
For some reason, the icons seem to have shifted above where they should be and I can't find any way to get them back down into the container. Here is an example of what I am talking about: http://i.imgur.com/RwOKWLp.png
I have set the "background-color" to yellow to highlight my problem.
Here is the HTML for one icon:
<div class="vicon" aria-hidden="true" data-icon=""></div>
Here is the CSS that I am currently working with:
[data-icon]:before {
font-family: 'iconfont';
content: attr(data-icon);
speak: none;
font-size: 100%;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.vicon {
display: inline-block;
font-size: 50px;
margin-top: 1em;
background-color: yellow;
}
#font-face code:
#font-face {
font-family: 'iconfont';
src:url('[font_location_on_company_server].eot');
src:url('[font_location_on_company_server].eot?#iefix') format('embedded-opentype'),
url('[font_location_on_company_server].woff') format('woff'),
url('[font_location_on_company_server].ttf') format('truetype'),
url('[font_location_on_company_server].svg#icon_font') format('svg');
font-weight: normal;
font-style: normal;
}
Does anyone have any idea why this might be happening?
The problem is not CSS but your font's baseline height (see http://icomoon.io/#docs/font-metrics)
It means the font metrics are wrong. I don't know if you have them changed or if it was a bug from Icomoon but I've been able to export a correct font right now.
Anyway you cannot (or at least you shouldn't) "correct" this with CSS. The best way is to change the font.
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.