Use SVG/CSS alternative instead of "slick" carousel font

[mekarpeles]

Slick carousel font still seems pretty gratuitous to @jdlrobson since all it does is provide 2 icons. He would prefer we drop it altogether. We could use an SVG as an alternative.

Have you considered using SVG/CSS and dropping this CSS as an alternative? :

/* Icons */
@font-face
{
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;

    src: url(/static/css/fonts/slick.eot);
    src: url(/static/css/fonts/slick.eot?#iefix) format('embedded-opentype'),
        url(/static/css/fonts/slick.woff) format('woff'),
        url(/static/css/fonts/slick.ttf) format('truetype'),
        url(/static/css/fonts/slick.svg#slick) format('svg');
}

Originally posted by @jdlrobson in https://github.com/internetarchive/openlibrary/pull/3218

[cognitive137]

Hello, I would like to work on this. Can you please give me the link to how it looks now?

[tfmorris]

@cognitive137 I'm not sure why this got labelled a good first issue, but "Slick carousel" is this: https://github.com/kenwheeler/slick/ and you can see them in action on the Open Library home page. The font is used for the right and left arrows as well as a couple of other glyphs (I think 4 in all).

[jdlrobson]

This is not a good first issue :)

[jdlrobson]

@mekarpeles to expand on the above about this not being a good first issue, I'm not 100% sure if SVG would be preferable to the font. It's a hunch but not 100% certain. Whoever works on this should be familiar with how to measure performance impacts of changes.

It might help if we decide up front if we are planning to go with a CSS only solution or a SVG assets. If the latter we should provide those assets or suggest where they can be found or how they can derive - they don't exist yet. Would noun project suffice for example? Those SVGs will also need to be minified.

It's highly likely whoever works on this will be doing a lot of exploratory work and potentially realising that the font is actually preferable to an SVG asset (in which case we may not decide to merge any code and decline this task).

[tabshaikh]

The pr https://github.com/internetarchive/openlibrary/pull/3218/files which aims at preloading custom fonts is not working as expected. The performance audit still shows slick.woff is not preloading. @mekarpeles @jdlrobson

[jdlrobson]

@tabshaikh I can confirm. It looks like the preload tag is shown on https://openlibrary.org/books/OL6179353M/Slide_rule but not on the home page. I did see it on the home page but after refreshing it disappeared so I think this has something to do with caching.

[tabshaikh]

Thanks for confirming @jdlrobson I will look into caching where it might be creating the problem

[khabdrick]

Hello is this issue still open?

[Spoorthy1423]

I would love to work on this issue @mekarpeles please assign me this issue

[mekarpeles]

@Spoorthy1423 if you'd like to try this (replacing the slick fonts with just the necessary used svgs) I think that would be welcome!

[ChairBorn]

if this is still available, I would like to contribute, can this be assigned to me?