CODEWITHSUNDEEP
cssfontsfont-face
fvgs
fvgs

Reputation: 21982

Font files used in @font-face not being fetched

I am attempting to use the map-icons package which uses the following css to fetch and load a few font files. As far as I can tell, the path (including the ..) is fine.

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

https://github.com/scottdejonge/map-icons/blob/master/dist/css/map-icons.css

I'm testing this locally with Django's dev server. I include the css in my html with a standard <link>. Based on the Network tab in the Chrome inspector, the css file is being fetched successfully. However, I do not observe any network requests for any of the fonts (successful or unsuccessful). Likewise, the fonts don't work.

The fact I'm not seeing any attempt to request the fonts makes me think there is something wrong with the css? Also to clarify, the fonts are in the corresponding directory relative to the location of the css file. Though regardless, I would expect requests to be made for the fonts even if it were to incorrect URLs.

EDIT: I'm noticing that if I use the font in some css block i.e. by adding font-family: map-icons; to some css block, both Chrome and Firefox will successfully request map-icons.ttf. Unfortunately, the font still does not work in the context of what the map-icons package is meant to do. But that could be for entirely different reasons. Does this observation make sense and, if so, can someone explain why these two browsers choose to work that way?

Upvotes: 4

Views: 2500

Answers (1)

fvgs
fvgs

Reputation: 21982

I believe the fonts were not being fetched because the font was not being used in any way that would cause the font to be rendered. Thus, my assumption that not seeing any of the fonts fetched in the Chrome network inspector implied that the code responsible for fetching those fonts was buggy, was incorrect. Chrome merely decides not to fetch the font(s) when they are not to be rendered.

One thing to note is that, based on this experience, Chrome will load only one of the fonts specified in the @font-face block. In this particular case, Chrome chose to load the .ttf font.

For more information on how I fixed the actual problem I encountered with this package, see the following GitHub issue: https://github.com/scottdejonge/map-icons/issues/33

Upvotes: 4

Related Questions