Skip to main content



    Use TheSans C4s across projects to set consistent branding in typography.


    TheSans C4s Webfont

    NYP Framework uses a 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:


    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 FOUT 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>