Align center vertical, dosent work with google font

Question

I have been searched how to align center verticaly and I found this answer:
How do I vertically center text with CSS?

So I try do to it in my website but its not working
The reason that that not working its because I use google font when I cancel it in the inspector that text aligned to the middle,
My text is in table cell and I gave it:

vertical-align:middle;

I also tried to achive that with line-height but same result
the text appear at the top

In jsfiddle its work with google font, example: https://jsfiddle.net/e6732sq8/
But In my web dosent, my web: http://codepen.io/anon/pen/qRVJrq (sorry for didnt upload to jsfiddle, there its work fine)

If I wasent clear I mean that gray text in the table

Why do you think it is not centered properly? I tried setting a larger height on that row and in looks like centered: http://codepen.io/eduard-malakhov/pen/EZbOZw?editors=1100#0 — Eduard Malakhov, Jan 28 '17 at 22:12
@EduardMalakhov If you will mark the `td` in the inspector you will see its not aligned — Nati V, Jan 28 '17 at 22:14
First on (good work) id divs but the second one (not work) is table. and as Eduard says they are aligned well. — Farzin Kanzi, Jan 28 '17 at 22:14
@EduardMalakhov In whice browser do you surf? check it plz in chrome desktop — Nati V, Jan 28 '17 at 22:56
@EduardMalakhov look at this picture https://2017-uploaded.fresh.co.il/2017/01/28/27145403.png — Nati V, Jan 28 '17 at 23:03
@EduardMalakhov maybe its problem with chrome? I use 56 version , one above you, what do you think? — Nati V, Jan 28 '17 at 23:14

score 0 · Answer 1 · answered Jan 28 '17 at 22:17

0

Set this:

td{
display:flex;
align-items: center;
}

answered Jan 28 '17 at 22:17

Farzin Kanzi

3,380
2
21
23

score 0 · Answer 2 · answered Aug 23 '19 at 18:16

This problem might be caused by non-Latin characters in the font.

Try adding this to your @font-face declaration:

@font-face {
    /* latin */
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

If you're self hosting the font, you can also run the source font file (e.g. ttf) through Font Squirrel's Webfont Generator and choose Latin-only subsetting which would also have the benefit of a smaller font file.

Align center vertical, dosent work with google font

2 Answers2