Embedding Blokkfont as webfont


I’m trying to implement the Blokkfont (http://www.blokkfont.com/) with webfont with the given CSS (https://blokkfont-losgordos.netdna-ssl.com/v2/blokkfont.css) but without success.

I can see and edit the text in Axure, but generating and sharing with others who didn’t installed the font will see Arial typeface.

Here is the Webfont setup:

I’m already using FontAwesome as a webfont without problem and can’t figure out why BLOKK font fails to load correctly on other machines without Blokk font.

Things to check:

  1. Are there any errors in the browser? Does the domain serving the CSS file allow it to be loaded by other domains?
  2. Does the font-family declared in the CSS match the font-family that the CSS from Axure applies to the text?

Point number one seems to be the most common error whenever someone posts here about a web font not working. If point number two is the issue, set up a font mapping and set the font-family to what the CSS expects, in this case BLOKK. Sometimes Axure doesn’t get the correct font-family from the font file.

If you’ve check both those things and there’s still a problem or you don’t know how to check them, link to an AxShare project that uses this font and it will be easier to find the issue.

thanks for the fast reply @nkrisc, with your advice I found the solution to use this font.

According to advice #1 (checking CDN, hosting)

The BLOKK font is shared on a public CDN so I assumed that it is allowed to use it by other domains BUT when using this default CDN link, it forwards to another, non-HTTPS URL (http://www.blokkfont.com/cdn/v2/blokkfont.css) and the browser blocks the font embedding because of security reason. I read this error from the browser’s Console window.

Forcing HTTPS on the forwarded link is not solution because it gives timeout (it doesn’t exist), so using the BLOKK font’s own CDN URL is not an option.

As a next step I uploaded the BLOKK font pack to my hosting which has HTTPS. The HTTPS error is gone but the font still didn’t load on devices without the installed BLOKK Neue font.

So I took to the next advice to set up the font mapping, hoping it will solve the font loading problem.

According to advice #2 (mapping font-family)

I set up a font masking for “blokk”.

If you’d like to use the BLOKK font, do the following steps:

  • Install the font to a HTTPS hosting / CDN (because the BLOKK font’s CDN won’t work) and point the We Font there.
  • Set the font mapping to “blokk”