Assets added, but font is not downloaded

[lologhi]

Hello! I don't have any error in the console, the map-icons.css is well loaded with the @font-face (.js loaded too), but the font is not loaded. So I have the markers, but nothing on it... Can you think of something? Thanks a lot! No public access to this problematic page, but should be possible soon)

[scottdejonge]

Make sure your font paths are correct and that the CSS is being loaded. Maybe check the network tab in your browser's developer tools to see if the fonts are being requested.

Sorry I can't provide any further information without context, maybe providing a CodePen or something.

[lologhi]

CSS is loaded, and path seems good to me :

On a CSS file like that https://local.villa-bali.com/css/front_map-icons_3.css, I have :

@font-face {
    font-family: 'map-icons';
    src:url('../vendor/map-icons/dist/fonts/map-icons.eot');
    src:url('../vendor/map-icons/dist/fonts/map-icons.eot#iefix') format('embedded-opentype'),
        url('../vendor/map-icons/dist/fonts/map-icons.ttf') format('truetype'),
        url('../vendor/map-icons/dist/fonts/map-icons.woff') format('woff'),
        url('../vendor/map-icons/dist/fonts/map-icons.svg#map-icons') format('svg');
    font-weight: normal;
    font-style: normal;
}

And https://local.villa-bali.com/css/../vendor/map-icons/dist/fonts/map-icons.eot is working for me.

But there is no request in the network tab. So problem might come from somewhere else. I was not able to easily create a CodePen, so I'll wait to put my page in an accessible location...

[fvgs]

I'm having the exact same problem. Based on the network inspector in Chrome, the css file loads successfully, however no requests are made for any of the fonts. I'm fairly confident I have the paths and everything setup correctly. But regardless, the fact that the fonts aren't even being requested (no requests for these fonts are shown in the chrome network inspector), seems very strange.

The css seems fine to me, which is why I don't understand why no requests are being made for the fonts.

Link to my StackOverflow question: http://stackoverflow.com/questions/34217232/font-files-used-in-font-face-not-being-fetched

^ Be sure to read the edit.

[lologhi]

Good to learn I'm not alone, @fvargas. Do you have a link to give to show the problem or is it in local environment?

[fvgs]

I'm testing this locally. But the symptoms seem fairly black and white. I'm using the unmodified css file from the dist/ directory.

As I mentioned in the edit to the SO question, I was able to make the browser request (successfully) map-icons.ttf by using the font in an arbitrary css block. Why both Chrome and Firefox choose to load only map-icons.ttf, I don't know. Unfortunately, even then, the icons do not show up on the markers I'm using in Google maps.

I'm going to further look into this latter case to see if I can get it working at all. But both cases, particularly the original case, are still rather troubling.

[fvgs]

@lologhi are you by chance using modernizr?

[lologhi]

@fvargas yes I am ! Why ?

[fvgs]

@lologhi Haha, nevermind. I was thinking there might be an interaction with modernizr going on.

Fortunately, after digging into this for far too much time, I've figured out why this wasn't working. I was able to get the font to load and appear when using it through css. But it still wouldn't work for the map icons. After poking around for a while, I concluded the map_icon_label property must not be getting utilized. Strange. After exploring the source js code, I realized that I needed to be instantiating a new Marker rather than a new google.maps.Marker. Marker is an object created by the package as a wrapper around google.maps.Marker. Changing my code to use Marker fixed it for me.

Ironically enough, when I first looked at the sample given in the docs, I noticed it was using just Marker without the google.maps, and I just brushed it off. :tired_face:

I hope this fixes your problem too. Also make sure that map-icons executes after google maps has loaded and that your script to create the markers executes after map-icons has been executed.

[scottdejonge]

Closing issue. @fvargas has provided better marker creation documentation.

[lologhi]

Great ! Finally working for me too with new Marker ! Thank you !!