import{n as e}from"./chunk-BneVvdWh.js";import{t}from"./jsx-runtime-C2wGStra.js";import{l as n,o as r}from"./iframe-D-oZzXNK.js";import{r as i}from"./react-B8jdHdWa.js";import{t as a}from"./mdx-react-shim-8vvjMMnP.js";function o(e){let t={a:`a`,code:`code`,h1:`h1`,h2:`h2`,p:`p`,pre:`pre`,strong:`strong`,...i(),...e.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(r,{title:`Guides/Assets/Fonts`}),`
`,(0,c.jsx)(t.h1,{id:`fonts`,children:`Fonts`}),`
`,(0,c.jsxs)(t.p,{children:[`The optimised assets are available under `,(0,c.jsx)(t.strong,{children:`preply.com`}),` in the formats required by modern and legacy browsers.`]}),`
`,(0,c.jsxs)(t.p,{children:[`Refer to `,(0,c.jsx)(t.a,{href:`https://preply.atlassian.net/l/cp/0sQoEgGa`,rel:`nofollow`,children:`Create new universal brand fonts`}),` for a detailed breakdown of the formats, optimisations and technical decisions.`]}),`
`,(0,c.jsx)(t.p,{children:`You should only follow these instructions if Preply Design System is NOT installed (and can not be installed), in the application.`}),`
`,(0,c.jsxs)(t.p,{children:[`In all other cases follow the `,(0,c.jsx)(t.a,{href:`/story/guides-installation-applications--page`,children:`Installation Guides`}),`.`]}),`
`,(0,c.jsx)(t.h2,{id:`tokyo-ui-rebrand-fonts`,children:`Tokyo UI (reBrand) fonts`}),`
`,(0,c.jsxs)(t.p,{children:[`The Tokyo UI fonts are applied only for descendants of elements with the `,(0,c.jsx)(t.code,{children:`data-preply-brand="tokyo"`}),` attribute.`]}),`
`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-html`,children:`<div data-preply-ds-theme="tokyo-ui">
    <!-- All the children use the new fonts -->
</div>
`})}),`
`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.a,{href:`https://preply.atlassian.net/browse/DES-1108`,rel:`nofollow`,children:`DES-1108`}),` will fix this.`]}),`
`,(0,c.jsx)(t.h2,{id:`using-the-assets`,children:`Using the assets`}),`
`,(0,c.jsxs)(t.p,{children:[`First, in the `,(0,c.jsx)(t.code,{children:`index.html`}),` file, as close as possible to the start of the `,(0,c.jsx)(t.code,{children:`<head>`}),` tag, add:`]}),`
`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-html`,children:`<!-- Preply Fonts /story/guides-assets-fonts--page -->
<link rel="preconnect" href="https://static.preply.com" />
<link rel="preload" href="https://static.preply.com/ds/global.css" as="style" />
<link
    rel="preload"
    href="https://static.preply.com/ds/fonts/en/PreplyInter.var.woff2"
    as="font"
    type="font/woff2"
    crossorigin
/>
<link rel="stylesheet" href="https://static.preply.com/ds/global.css" />
`})}),`
`,(0,c.jsxs)(t.p,{children:[`This will make `,(0,c.jsx)(t.code,{children:`PreplyInter`}),` available for browsers but not yet apply it to everything on the page. Only text created withing Design System's components will use `,(0,c.jsx)(t.code,{children:`PreplyInter`}),` typeface.`]}),`
`,(0,c.jsx)(t.p,{children:`Add the following styles as well, also at the top of your cascade, to apply our brand to all the text on the page.`}),`
`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-css`,children:`* {
    font-family: 'PreplyInter', sans-serif;
}

@supports (font-variation-settings: normal) {
    * {
        font-family: 'PreplyInterV', sans-serif;
    }
}
`})})]})}function s(e={}){let{wrapper:t}={...i(),...e.components};return t?(0,c.jsx)(t,{...e,children:(0,c.jsx)(o,{...e})}):o(e)}var c;e((()=>{c=t(),a(),n()}))();export{s as default};