1

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.

1
  • show us the CSS code you use for the 4 font declarations
    – mmm
    Aug 1, 2016 at 10:34

1 Answer 1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.