TheSans C4s Webfont
TheSans C4s font stack with Helvetica and sans-serif font fallbacks. Configure your font path in NYP Framework when before you import core with the $nyp-font-path path variable.
Font files
NYP Type comes packaged with the TheSans C4s font files so you can easily include the package and copy the font files wherever you need to in your project.
You can also download the webfont and desktop files here:
Preloading
It's advised that you preload font files because NYP Framework by default uses font-display: swap; to decrease time to visible text for users. At times this may cause
Open in a new tab
but we can help minimize that by preloading our font files. For a user with a very slow connection, they'll see the very similar Helvetica stack without having to wait for the custom fonts to load.
The docs, for example, preloads all four of the TheSans C4s font files because there we know in advance that any requested page will utilize TheSans C4s. Preloading tells the browser to request the font files earlier in the critical rendering path. Normally, the CSSOM must be constructed and the browser will determine then if it needs to request any font files.
<link rel="preload" href="/fonts/TheSans/TheSansC4s-2_ExtraLight.woff" as="font" crossorigin>
<link rel="preload" href="/fonts/TheSans/TheSansC4s-2iExtraLightIta.woff" as="font" crossorigin>
<link rel="preload" href="/fonts/TheSans/TheSansC4s-3_Light.woff" as="font" crossorigin>
<link rel="preload" href="/fonts/TheSans/TheSansC4s-3iLightItalic.woff" as="font" crossorigin>
<link rel="preload" href="/fonts/TheSans/TheSansC4s-4_SemiLight.woff" as="font" crossorigin>
<link rel="preload" href="/fonts/TheSans/TheSansC4s-4iSemiLightIta.woff" as="font" crossorigin>
<link rel="preload" href="/fonts/TheSans/TheSansC4s-5_Plain.woff" as="font" crossorigin>
<link rel="preload" href="/fonts/TheSans/TheSansC4s-5iPlainItalic.woff" as="font" crossorigin>
<link rel="preload" href="/fonts/TheSans/TheSansC4s-6_SemiBold.woff" as="font" crossorigin>
<link rel="preload" href="/fonts/TheSans/TheSansC4s-7_Bold.woff" as="font" crossorigin>
You can read more at Open in a new tab