Web texts & links not displaying properly on macOS browsers

I am developing a website using wordpress (creating a custom wordpress template) and I have an issue displaying text on browsers running on macOS systems. These include Safari, Chrome, Firefox... If you have a Mac you can check it out yourself at http://2c.ggcc.upc.edu.

Depending on which of them, the result is different. On Chrome, the text is displayed but links are not functional. If we have a look at elements inspector this is what we have:

In this example I have a menu element selected <li>, and we can see the text is displayed a bit above where it should be. If we now have a look at the <a> element, we can see it has no height and therefore it doesn't work properly. (You can not activate it).

Now let's switch to Safari. On safari the text isn't even displayed, and the links are neither functional.

In this case the <a> element hasn't got height, either.

This is not an issue with links only, because some of the body text is neither displayed on safari.

After a bit research I've came to the conclusion that's an issue with the font face I am using, because all these problems are solved if we disable the rule that sets the font-family to 'DIN'. Currently, I am including my fonts to the website using css:

@font-face {
    font-family: DIN;
    src: url(font/DINRegular.ttf);
    font-weight: normal;
}