cynkra / cynkrablog

Source of the cynkra blog
https://cynkra.com/blog
0 stars 1 forks source link

CORS for font #15

Closed maelle closed 1 year ago

maelle commented 1 year ago

@pat-s sorry for asking in two places. Is there an easy way to get Frutiger on the preview at cynkra.github.io without having to store the font in this repo?

Things look good in Chrome with the CORS unblocker you had once recommended, in any case.

pat-s commented 1 year ago

It's actually not a CORS issue as otherwise you would see a error like

No 'Access-Control-Allow-Origin' header is present on the requested resource.

It's a mix of path rendering issues and faulty css code. The (new) frutiger-light fonts which are used in cynkra.com are residing at

(The same goes for the old frutiger-thin fonts)

The fontface definitions should looks as

\\ body font
@font-face {
    font-family: "frutiger-light";
    src: url("https://cynkra.com/assets/css/fonts/6135829/b05d44ef-6a78-4aa4-9388-3f0e05252a48.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: fallback
}

\\ header font
@font-face {
    font-family: "frutiger-thin";
    src: url("https://cynkra.com/assets/css/fonts/1449009/b3ca2df2-7bee-4fc0-84cb-b029b99c3b61.woff2") format("woff2");
    font-weight: normal;
    font-style: normal
}

in addition the headers definition should be

    font-family: "frutiger-thin","Helvetica Neue",sans-serif;

instead of

    font-family: "frutiger-thin,sans-serif";

The font concept is arguably quite a mess at the moment: files are lying in different places with unclear namings and we do not have a precise documentation on how to use it in various places/projects and what is required for possible CORS whitelisting. There is nobody responsible for all of this though.

Fonts shoulds also be updated for all pkgdown sites as these are still using the old frutiger-thin font. Also previously the frutiger-thin was mistakenly named frutiger-light in our code - so the frutiger-light used in cynkratemplate is actually frutiger-thin.

Hope this helps and didn't cause more confusion than before 😅

maelle commented 1 year ago

Thank you!! I might ask again when I get to cynkratemplate :zany_face: