0

I've been trying to integrate a web font I just bought into my website (Metric, from Klim Type Foundry), and I can't get it to work with the @font-face css. The site is a wordpress site, and I'm using the Divi theme by ElegantThemes.

I've made a test page here: http://www.ansoncheung.net/font-test-page/

the sentence "THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG" is set to 'Metric Bold'

Metric Bold is defined in the style sheet with (the font only came with EOT and WOFF formats):

@font-face {
font-family: 'Metric Bold';
src:url('fonts/MetricWeb-Bold.eot');
src:url('fonts/MetricWeb-Bold.eot?#iefix') format('embedded-opentype'),
    url('fonts/MetricWeb-Bold.woff') format('woff'),
font-weight: normal;
font-style: normal;}

However, I do not see the fonts being loaded in the resources when inspecting the page, and the @font-face seems to have no effect.

After a ton of googling I can't figure out for the life of me what might be going wrong. Can anyone help?

Thanks!

acheung
  • 1
  • 1

1 Answers1

0

It is working, just remove font-family rule and check effect to verify. I mean check your

in both situation with font-family: 'Metric Bold'; and without font-family: 'Metric Bold'; .

Vipul Hadiya
  • 882
  • 1
  • 11
  • 22
  • I don't think it is working, because the font looks nothing like the font I'm using: https://klim.co.nz/retail-fonts/metric/ – acheung Nov 10 '14 at 05:16
  • @Font-face rule is browser sensitive, so this time i am sure generate .ttf, .svg, .woff formats of your font using any font face generator program, there is lots of available for free just google it, and add it in your fonts folder also add url with all .svg, .woff and .ttf formats. – Vipul Hadiya Nov 10 '14 at 05:26
  • I did try the svg and ttf formats from a converter as well. I'm starting to wonder if its the font itself thats problematic, because I could do it with another web font. – acheung Nov 10 '14 at 06:16