Rectangle 27 5

The issue here is not line height but vertical placement of glyphs, in particular the location of the text baseline. Thats something that the font designer has decided on; the designer draws glyphs and places them in the em square, the conceptual device that has height equal to (or defined to be) the font height. In particular, the designer decides how much space there is below the baseline on one hand and above the height of uppercase letters on the other. Typically these spaces are equal, or almost equal, but they need not be. If they are substantially different, the intended use of the font is probably special and does not include usage like the one shown in the image. This suggests that the font choice should be reconsidered, but lets assume its fixed.

There are several ways to deal with the problem. If there is too much space below the letters, reducing line-height makes it smaller, but it also affects the space above. Top padding helps in a sense, but it increases the total height occupied by the element. You can also play with vertical-align, but it affects the height of line boxes.

Probably the simplest approach is to use relative positioning, assuming that the problem deals with a one-liner text. Relative positioning just displaces content in a specified way, without affecting the layout otherwise. You would need a wrapper for this, i.e. an element that contains the text, so that you can displace just the text, not the background.

The following demo uses a Google font, Candal, which has a similar problem, but in a different direction: the baseline is too low. Modifications of this approach to meet the original problem should be obvious, but the exact amount of displacement needs to be determined empirically (or from information extracted from the font file using a font inspector). Naturally, the em unit should be used here, even if you set font size in pixels or points (so that the code does not need to be changed if the font size is changed some day).

<link href='http://fonts.googleapis.com/css?family=Candal' rel='stylesheet'>
<style>
div { font-family: Candal }
div { background: lightgreen; font-size: 200%}
</style>
<p>What we have got initially:
<div>BRAKE HOSE AND AIR CHAMBER</div>
<p>Reducing line height (even setting solid) does not really help:
<div style="line-height: 1">BRAKE HOSE AND AIR CHAMBER</div>
<p>But displacing the text upwards by 0.1em does:
<div><span style="position: relative; bottom: 0.1em">
BRAKE HOSE AND AIR CHAMBER</span></div>

That's working, but I'm looking for a scalable way to change this accross all my element (button/input), I can't put span in every button, and that won't fix input align.

For buttons, the padding method probably works well enough. However, in general, if a font causes problems like this, a different font should be chosen.

css3 - Fix custom font line-height with CSS - Stack Overflow

css css3 fonts font-face webfonts
Rectangle 27 1

This is something I've come across recently. The baseline on the fonts I was using for some reason did not line up, so I aligned to the bottom and increased the line height instead of adding padding.

This is how I solved my issue, if you have a link to a code pen I can check if it will work for you, or if another solution would be better.

p {

    vertical-align: text-bottom;
    line-height: 1.5;

}

I've tried but that didn't change anything, I can't really put a codepen up as this font is protected

css3 - Fix custom font line-height with CSS - Stack Overflow

css css3 fonts font-face webfonts
Rectangle 27 1

In Chrome I've found that if you are using a font-face declaration. You can solve the line-height issue with either a style="" call i the HTML, or simply declaring the line-height AFTER the font declaration in your CSS.

I think Chrome just doesn't know how to calculate the line-height until it's rendered the custom font.

css3 - Fix custom font line-height with CSS - Stack Overflow

css css3 fonts font-face webfonts
Rectangle 27 1

I have had that problem aswell in past, even different browsers gave different line heights! I think it happens when using the webfont generator and can only be fixed with using different line-height as far as I know.

Did you try fontsquirrel? There are some options with different results.

Fontsquirrel has a option to modify x-height, except font from fontshop are protected ..

css3 - Fix custom font line-height with CSS - Stack Overflow

css css3 fonts font-face webfonts
Rectangle 27 2

In the end, I've end up manually fixing the font myself, using help from this answer:

css3 - Fix custom font line-height with CSS - Stack Overflow

css css3 fonts font-face webfonts
Rectangle 27 596

@font-face
@font-face
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans.ttf");
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Bold.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: italic, oblique;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic, oblique;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans.ttf");
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Bold.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: italic, oblique;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic, oblique;
}

By the way, it would seem the Google Chrome doesn't know about the format("ttf") argument, so you might want to skip that.

By the way, it would seem Google Chrome doesn't know about the format("ttf") argument, so you might want to skip that.

The order is important, the bold/italic style must come last.

The order is important, the bold/italic style must come last.

Worth noting that this doesn't work in IE8 (and below), even if you use an EOT. IE will download the alternate typeface, but it won't use it, instead it will fake-bold/italic the regular typeface. Also, Chrome 11 seems to fail render a typeface that's both bold and italic

Worth noting that this doesn't work in IE8 (and below), even if you use an EOT. IE will download the alternate typeface, but it won't use it, instead it will fake-bold/italic the regular typeface. Also, Chrome 11 seems to fail render a typeface that's both bold and italic

I was having trouble with this snipped on the embedded browser Android 4.4. Ended changing font-style: italic, oblique; to just font-style: italic; seemed to fix everything.

This example works perfect for fonts that do have a separate TTF file for bold and italic. But what if the whole font is in one .ttf file and you want to use bold, how does that work?

css - How to add multiple font files for the same font? - Stack Overfl...

css fonts css3 font-face
Rectangle 27 55

You can use line-height to align the icon in the div.

Try adding this .fa-camera-retro { line-height: inherit;} to your css. Using inherit makes line-height take on the height of its containing div, so all icons will be centered even if those divs are different sizes. If you want, you can also set the line-height to the div's height in pixels to explicitly center it, ie line-height: 80px .

Here's the example working in a fiddle.

Thanks. I thought i should give the line-height to the containing div. but now only am get to know that i should give it to the child(.fa-camera-retro) too

html - How to center align font awesome icons vertically in a circle d...

html css css3
Rectangle 27 9

Try this, add this lines in the web.config.

<system.webServer>
  <staticContent>
     <mimeMap fileExtension=".woff" mimeType="application/octet-stream" />
  </staticContent>
</system.webServer>

I don't think that's the same error he's reported but that will be required if you're serving .woffs from IIS, yes. Alternatively you could add a registry key for .woff under HKLM\Software\Classes and set the "Content Type" value in that. However Wikipedia says the correct type is application/font-woff.

Indeed, it's a different thing. I had this entry - the problem was with an already downloaded font that could not get opened in IE due to embedded permissions.

I was doing development in an Apache environment, and when i moved my font files to a Windows IIS server, this fixed my issue.

css - Make Adobe fonts work with CSS3 @font-face in IE9 - Stack Overfl...

css internet-explorer css3 internet-explorer-9 font-face
Rectangle 27 31

After considering all suggested options, the cleanest solution seems to be setting line-height and vertical-align everything:

div {
    border: 1px solid #ccc;
    display: inline-block;
    height: 50px;
    margin: 60px;
    padding: 10px;
}
#text, #ico {
    line-height: 50px;
}

#ico {
    vertical-align: middle;
}

What if your container is bigger than 50px? Then it won't work...I have content that changes size and it should have centered icon inside...any idea about that?

html - How to center text vertically with a large font-awesome icon? -...

html css html5 css3 font-awesome
Rectangle 27 30

After considering all suggested options, the cleanest solution seems to be setting line-height and vertical-align everything:

div {
    border: 1px solid #ccc;
    display: inline-block;
    height: 50px;
    margin: 60px;
    padding: 10px;
}
#text, #ico {
    line-height: 50px;
}

#ico {
    vertical-align: middle;
}

What if your container is bigger than 50px? Then it won't work...I have content that changes size and it should have centered icon inside...any idea about that?

html - How to center text vertically with a large font-awesome icon? -...

html css html5 css3 font-awesome
Rectangle 27 19

Adjusting line-height (or font-size, as recommended elsewhere) might remove Chrome's clipping bug, but only accidentally. If you want to avoid it programmatically, the only working solution by now is:

.multicolumn p {
  display: inline-block;
}

Furthermore, if the inline-block workaround does not help, the cause for cutting off text bits can consist of a recursive application of multi-column design. I observed this in a more complex scenario than the above where a remote parent of a multi-column text container had its own column layout. Removing the column-count from the top-level container fixed the column-break problems.

This should be the correct answer.

display: inline-block;
width: 100%;

css - Why is Chrome cutting off text in my CSS3 multi-column layout? -...

css google-chrome css3
Rectangle 27 4

As a Mac user, I was unable to use the MS-DOS and Windows command line tools that were mentioned to fix the font embedding permission. However, I found out that you can fix this using FontLab to set the permission to 'Everything is allowed'. I hope this recipe on how to set the font permission to Installable on Mac OS X is useful for others as well.

"I was unable to use the MS-DOS and Windows command line tools": The source code is provided though - I'd expect it'd just compile on Mac?

css - Make Adobe fonts work with CSS3 @font-face in IE9 - Stack Overfl...

css internet-explorer css3 internet-explorer-9 font-face
Rectangle 27 15

if things aren't lining up, a simple line-height: inherit; via CSS on specific i.fa elements that are having alignment issues could do the trick simply enough.

You could also feasibly use a global solution, which due to a slightly higher CSS specificity will override FontAwesome's .fa rule which specifies line-height: 1 without requiring !important on the property:

i.fa {
  line-height: inherit;
}

Just make sure that the above global solution doesn't cause any other issues in places where you might also use FontAwesome icons.

html - How to center text vertically with a large font-awesome icon? -...

html css html5 css3 font-awesome
Rectangle 27 89

This is because Firefox (from your mention of Firebug) thinks cross-domain, even subdomain, Web font embedding is a bad idea.

You can convince it to load fonts from your subdomain by adding this to the top-level .htaccess file of the subdomain where your fonts are being served (updated to adapt code from the same file in HTML5 Boilerplate):

<FilesMatch "\.(ttf|ttc|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

I would however like to set up a way that only I can have access to this repository of fonts but that's another project.

The W3C spec for Access-Control-Allow-Origin doesn't say anything more than either a wildcard "*" or a specific domain. So far, I've found this SO answer which suggests validating the Origin header, but I think that's a Firefox-only header. I'm not sure about other browsers (they don't even need the .htaccess trick above for cross-domain Web fonts to work).

Worked flawlessly, thank you very much! And thank you for looking for a way to allow a whitelist of domains, that would be excellent! Again thanks very much! +1

You're welcome! I happened to have had this issue when designing my site a couple of months back, and that's what I found :)

I actually had the problem in Google Chrome as well, which led me to believe it was a ubiquitous issue, but maybe Chrome has the same thing? Regardless, they both work now. Again thanks very much for the solution and the help with the whitelist idea.

LocationMatch
FilesMatch

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

css - @font-face fonts only work on their own domain - Stack Overflow

css apache css3 font-face
Rectangle 27 89

This is because Firefox (from your mention of Firebug) thinks cross-domain, even subdomain, Web font embedding is a bad idea.

You can convince it to load fonts from your subdomain by adding this to the top-level .htaccess file of the subdomain where your fonts are being served (updated to adapt code from the same file in HTML5 Boilerplate):

<FilesMatch "\.(ttf|ttc|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

I would however like to set up a way that only I can have access to this repository of fonts but that's another project.

The W3C spec for Access-Control-Allow-Origin doesn't say anything more than either a wildcard "*" or a specific domain. So far, I've found this SO answer which suggests validating the Origin header, but I think that's a Firefox-only header. I'm not sure about other browsers (they don't even need the .htaccess trick above for cross-domain Web fonts to work).

Worked flawlessly, thank you very much! And thank you for looking for a way to allow a whitelist of domains, that would be excellent! Again thanks very much! +1

You're welcome! I happened to have had this issue when designing my site a couple of months back, and that's what I found :)

I actually had the problem in Google Chrome as well, which led me to believe it was a ubiquitous issue, but maybe Chrome has the same thing? Regardless, they both work now. Again thanks very much for the solution and the help with the whitelist idea.

LocationMatch
FilesMatch

css - @font-face fonts only work on their own domain - Stack Overflow

css apache css3 font-face
Rectangle 27 89

This is because Firefox (from your mention of Firebug) thinks cross-domain, even subdomain, Web font embedding is a bad idea.

You can convince it to load fonts from your subdomain by adding this to the top-level .htaccess file of the subdomain where your fonts are being served (updated to adapt code from the same file in HTML5 Boilerplate):

<FilesMatch "\.(ttf|ttc|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

I would however like to set up a way that only I can have access to this repository of fonts but that's another project.

The W3C spec for Access-Control-Allow-Origin doesn't say anything more than either a wildcard "*" or a specific domain. So far, I've found this SO answer which suggests validating the Origin header, but I think that's a Firefox-only header. I'm not sure about other browsers (they don't even need the .htaccess trick above for cross-domain Web fonts to work).

Worked flawlessly, thank you very much! And thank you for looking for a way to allow a whitelist of domains, that would be excellent! Again thanks very much! +1

You're welcome! I happened to have had this issue when designing my site a couple of months back, and that's what I found :)

I actually had the problem in Google Chrome as well, which led me to believe it was a ubiquitous issue, but maybe Chrome has the same thing? Regardless, they both work now. Again thanks very much for the solution and the help with the whitelist idea.

LocationMatch
FilesMatch

css - @font-face fonts only work on their own domain - Stack Overflow

css apache css3 font-face
Rectangle 27 13

if things aren't lining up, a simple line-height: inherit; via CSS on specific i.fa elements that are having alignment issues could do the trick simply enough.

You could also feasibly use a global solution, which due to a slightly higher CSS specificity will override FontAwesome's .fa rule which specifies line-height: 1 without requiring !important on the property:

i.fa {
  line-height: inherit;
}

Just make sure that the above global solution doesn't cause any other issues in places where you might also use FontAwesome icons.

html - How to center text vertically with a large font-awesome icon? -...

html css html5 css3 font-awesome
Rectangle 27 32

I usually use float: left; and add overflow: auto; to solve the collapsing parent problem (as to why this works, overflow: auto will expand the parent instead of adding scrollbars if you do not give it explicit height, overflow: hidden works as well). Most of the vertical alignment needs I had are for one-line of text in menu bars, which can be solved using line-height property. If I really need to vertical align a block element, I'd set an explicit height on the parent and the vertically aligned item, position absolute, top 50%, and negative margin.

The reason I don't use display: table-cell is the way it overflows when you have more items than the site's width can handle. table-cell will force the user to scroll horizontally, while floats will wrap the overflow menu, making it still usable without the need for horizontal scrolling.

The best thing about float: left and overflow: auto is that it works all the way back to IE6 without hacks, probably even further.

This excellent point, not mentioned in MANY popular tutorials. Couple of questions: Is this actually tested in different browsers? What's your method of choice to draw separator between two blocks such as nav and content? The reason I ask is because if above divs are of different height it would be difficult.

@ShitalShah: I'm not quite sure what you mean by "this", but I've implemented countless horizontal menu and the float left and overflow is IMO the cleanest and most reliable way to implement horizontal menu across many different browsers, old and new. For adding separators, I'd usually use left border (or background images for fancier separators, if you don't need to care about old browser's then you can also use CSS3 border-image). I don't quite understand what you mean by differing heights, want to explain more or add a fiddle?

This cleared up a lot about clearing and I didnt know that overflow could do this. Im used to the :after method where u add a content: "." and visibility:hidden. Thanks for this

html - float:left; vs display:inline; vs display:inline-block; vs disp...

html css css3 css-float