Fonts not loading

[ktewes (Kalle)]

Hei everyone. I have a problem with loading fonts in this file. Originally, I wanted to use 'Avenir Next Condensed'. However, there were display issues on Windows computers. So, I replaced the font with 'Roboto Condensed', which I incorporated via 'own CSS' as follows:

<style>
@font-face {
    font-family: 'RobotoCondensed-Regular';
    font-style: normal;
    font-weight: 400;
    src: url('https://webgrafik.dpa-addons.com/webgrafik/assets/Roboto/RobotoCondensed-Regular.woff') format('woff');
}

@font-face {
    font-family: 'RobotoCondensed-Bold';
    src: url('https://webgrafik.dpa-addons.com/webgrafik/assets/Roboto/RobotoCondensed-Bold.woff') format('woff');
    font-weight: 700;
    font-style: bold;
} 
</style>

This is my standard procedure and has always worked. However, when I now log the page loading, I see that Roboto is not being loaded. Accordingly, the display on Windows PCs is incorrect, but everything is fine on Mac... I have no clue

fehlerFindenFussball.zip (347.0 KB)

Update: Deleted the innerHTML of the SVG-Containers. Had that for testing purposes.

[Daniel]

publish.zip (353.3 KB)

Your font family name needs to match the font family name you set in your custom CSS. When you establish that one of the fonts is 'bold', then you can click the 'B' icon in Hype for the same font.

What I did is I made sure the font family for both referenced font files is the same.

[ktewes (Kalle)]

Hei Daniel, your method doesn´t work for me either. If you log the loading process, you will see that the Roboto is not loaded this way. But I have found my mistake. My integration was not my standard, I somehow got into the wrong file. My standard - the one that works- goes like this:

<style>
@font-face {
    font-family: 'Roboto Condensed';
  	font-style: normal;
  	font-weight: 400;
    src: url('https://webgrafik.dpa-addons.com/webgrafik/assets/Roboto/RobotoCondensed-Regular.woff') format('woff');
}

@font-face {
    font-family: 'Roboto Condensed';
    src: url('https://webgrafik.dpa-addons.com/webgrafik/assets/Roboto/RobotoCondensed-Bold.woff') format('woff');
    font-weight: 700;
    font-style: bold;
} 
</style>

However, on this occasion I noticed that some Hype internal fonts don't work on Windows machines - at least in Edge. These are

• Avenir and Avenir Next (I'm not sure about this, but it looks more like Arial)
• Avenir Next Condensed (definitely)
• Copperplate
• Helvetica Light
• Helvetica Neue Light
• Noteworthy (runs wider)
• Zapfino

I actually assume that all Hype internal fonts should also run on Windows systems. Or am I wrong?

I have compiled all the fonts here and attached a screenshot of how the page looks on a Windows computer in Edge.

[Daniel]

Thanks for the graphic, it's a great overview to see what looks correct on Windows and what does not.

@ktewes

I actually assume that all Hype internal fonts should also run on Windows systems. Or am I wrong?

Unfortunately not, but the 'Web' category in the Typography inspector will give you the best-supported web safe fonts. More info on that here.

A good resource for compatibility is: https://www.cssfontstack.com/

And on that topic, here's specific font feature support: CanIUseFonts

[ktewes (Kalle)]

@Daniel

... but the 'Web' category in the Typography inspector will give you the best-supported web safe fonts

This is the first time I've seen this. I've never registered it before...