Font embedding in wordpress

Question

I'm using wordpress (latest version) with this template. The template uses a visual composer page. I have a (licensed) hebrew font in 4 weights Black/Bold/Light/Regular.

I know how can I apply a font to the whole theme via .body call in css, but thing is that the header types/styles dosen't pick the right fonts from the list i defined and it looks like it uses the same bold font always and from reason also looks bad/clipped.

I have recieved 4 files for each weight from the font owner when I purchased it. TTF,SVG,EOT,WOFF . so it's 4x4 16 files in total.

What is the right approach getting into this project of embedding fonts but keep original theme sizes and weights?

Your advice is helpful. Thanks.

Answer 1

I never used Hebrew fonts in WordPress, so unless it's a special case, it should be the usual @font-face stuff. Not sure what your problem might be as you didn't post any code.

The sizes may change based on how the font was designed. Some fonts are just a bit larger or smaller depending on who designed them.

The weights you can set when you declare the fonts. If they are too big or too small, just add a font-size: to your classes or ids and increase them or decrease them by .1em increments until it's right. I do the same thing when using <span> or symbol fonts with :before to make sure the sizes line up. You may also need to use vertical-align and adjust by a few pixels if this is used in a <span> or :before or :after in between other fonts—i.e. vertical-align:2px or vertical-align:-2px with display:inline-block (I believe).

declare the fonts:

@font-face {
    font-family: 'Some Font';
    src: url('some-font.eot');
    src: url('some-font.eot?#iefix') format('embedded-opentype'),
         url('some-font.woff2') format('woff2'),
         url('some-font.woff') format('woff'),
         url('some-font.ttf') format('truetype'),
         url('some-font.svg#somefont') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Some Font';
    src: url('some-font-bold.eot');
    src: url('some-font-bold.eot?#iefix') format('embedded-opentype'),
         url('some-font-bold.woff2') format('woff2'),
         url('some-font-bold.woff') format('woff'),
         url('some-font-bold.ttf') format('truetype'),
         url('some-font-bold.svg#somefontbold') format('svg');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Some Font';
    src: url('some-font-light.eot');
    src: url('some-font-light.eot?#iefix') format('embedded-opentype'),
         url('some-font-light.woff2') format('woff2'),
         url('some-font-light.woff') format('woff'),
         url('some-font-light.ttf') format('truetype'),
         url('some-font-light.svg#somefontlight') format('svg');
    font-weight: 300;
    font-style: normal;
}

then add them to whatever you want as usual:

.myClass { font-family:'Some Font'; font-weight:500; font-style:normal; }

You shouldn't need to use the font-style:normal to make it work if you have resets in your CSS.