lukechilds
/
react.dev
mirror of https://github.com/lukechilds/react.dev.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Add more fonts (#5841) 

* Use regular font for body text

* Use primary text color for content area

* Keep medium font for nav

* Add italics

* Hook up more fonts
main
dan 2 years ago
committed by GitHub
parent
faa395f25c
commit
6b22284eb3
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 329 additions and 3 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      src/components/Layout/Page.tsx
  2. 14
      src/components/Seo.tsx
  3. 2
      src/pages/_document.tsx
  4. 312
      src/styles/index.css

4
src/components/Layout/Page.tsx
View File

@ -128,7 +128,9 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
{/* No fallback UI so need to be careful not to suspend directly inside. */}
<Suspense fallback={null}>
<main className="min-w-0 isolate">
<article className="break-words" key={asPath}>
<article
className="break-words font-normal text-primary dark:text-primary-dark"
key={asPath}>
{content}
</article>
<div

14
src/components/Seo.tsx
View File

@ -138,6 +138,20 @@ export const Seo = withRouter(
type="font/woff2"
crossOrigin="anonymous"
/>
<link
rel="preload"
href="https://react.dev/fonts/Optimistic_Text_W_Rg.woff2"
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>
<link
rel="preload"
href="https://react.dev/fonts/Optimistic_Text_W_It.woff2"
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>
{children}
</Head>
);

2
src/pages/_document.tsx
View File

@ -9,7 +9,7 @@ const MyDocument = () => {
return (
<Html lang="en">
<Head />
<body className="font-text antialiased text-lg bg-wash dark:bg-wash-dark text-secondary dark:text-secondary-dark leading-base">
<body className="font-text font-medium antialiased text-lg bg-wash dark:bg-wash-dark text-secondary dark:text-secondary-dark leading-base">
<script
dangerouslySetInnerHTML={{
__html: `

312
src/styles/index.css
View File

@ -15,6 +15,8 @@
src: url('/fonts/Source-Code-Pro-Regular.woff2') format('woff2');
}
/* Latin */
@font-face {
font-family: 'Optimistic Display';
src: url('https://react.dev/fonts/Optimistic_Display_W_Md.woff2')
@ -24,6 +26,15 @@
font-display: swap;
}
@font-face {
font-family: 'Optimistic Display';
src: url('https://react.dev/fonts/Optimistic_Display_W_MdIt.woff2')
format('woff2');
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Optimistic Display';
src: url('https://react.dev/fonts/Optimistic_Display_W_SBd.woff2')
@ -33,6 +44,15 @@
font-display: swap;
}
@font-face {
font-family: 'Optimistic Display';
src: url('https://react.dev/fonts/Optimistic_Display_W_SBdIt.woff2')
format('woff2');
font-weight: 600;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Optimistic Display';
src: url('https://react.dev/fonts/Optimistic_Display_W_Bd.woff2')
@ -42,15 +62,33 @@
font-display: swap;
}
@font-face {
font-family: 'Optimistic Display';
src: url('https://react.dev/fonts/Optimistic_Display_W_BdIt.woff2')
format('woff2');
font-weight: 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Optimistic Text';
src: url('https://react.dev/fonts/Optimistic_Text_W_Rg.woff2')
format('woff2');
font-weight: 300;
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Optimistic Text';
src: url('https://react.dev/fonts/Optimistic_Text_W_It.woff2')
format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Optimistic Text';
src: url('https://react.dev/fonts/Optimistic_Text_W_Md.woff2')
@ -60,6 +98,15 @@
font-display: swap;
}
@font-face {
font-family: 'Optimistic Text';
src: url('https://react.dev/fonts/Optimistic_Text_W_MdIt.woff2')
format('woff2');
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Optimistic Text';
src: url('https://react.dev/fonts/Optimistic_Text_W_Bd.woff2')
@ -69,6 +116,269 @@
font-display: swap;
}
@font-face {
font-family: 'Optimistic Text';
src: url('https://react.dev/fonts/Optimistic_Text_W_BdIt.woff2')
format('woff2');
font-weight: 700;
font-style: italic;
font-display: swap;
}
/* Arabic */
@font-face {
font-family: 'Optimistic Display';
src: url('https://react.dev/fonts/Optimistic_Display_Arbc_W_Md.woff2')
format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
unicode-range: U+0600-06FF;
}
@font-face {
font-family: 'Optimistic Display';
src: url('https://react.dev/fonts/Optimistic_Display_Arbc_W_SBd.woff2')
format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
unicode-range: U+0600-06FF;
}
@font-face {
font-family: 'Optimistic Display';
src: url('https://react.dev/fonts/Optimistic_Display_Arbc_W_Bd.woff2')
format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
unicode-range: U+0600-06FF;
}
@font-face {
font-family: 'Optimistic Text';
src: url('https://react.dev/fonts/Optimistic_Text_Arbc_W_Rg.woff2')
format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
unicode-range: U+0600-06FF;
}
@font-face {
font-family: 'Optimistic Text';
src: url('https://react.dev/fonts/Optimistic_Text_Arbc_W_Md.woff2')
format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
unicode-range: U+0600-06FF;
}
@font-face {
font-family: 'Optimistic Text';
src: url('https://react.dev/fonts/Optimistic_Text_Arbc_W_Bd.woff2')
format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
unicode-range: U+0600-06FF;
}
/* Cyrillic */
@font-face {
font-family: 'Optimistic Display';
src: url('https://react.dev/fonts/Optimistic_Display_Cyrl_W_Md.woff2')
format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
unicode-range: U+0400-045F, U+2116;
}
@font-face {
font-family: 'Optimistic Display';
src: url('https://react.dev/fonts/Optimistic_Display_Cyrl_W_SBd.woff2')
format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
unicode-range: U+0400-045F, U+2116;
}
@font-face {
font-family: 'Optimistic Display';
src: url('https://react.dev/fonts/Optimistic_Display_Cyrl_W_Bd.woff2')
format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
unicode-range: U+0400-045F, U+2116;
}
@font-face {
font-family: 'Optimistic Text';
src: url('https://react.dev/fonts/Optimistic_Text_Cyrl_W_Rg.woff2')
format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
unicode-range: U+0400-045F, U+2116;
}
@font-face {
font-family: 'Optimistic Text';
src: url('https://react.dev/fonts/Optimistic_Text_Cyrl_W_Md.woff2')
format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
unicode-range: U+0400-045F, U+2116;
}
@font-face {
font-family: 'Optimistic Text';
src: url('https://react.dev/fonts/Optimistic_Text_Cyrl_W_Bd.woff2')
format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
unicode-range: U+0400-045F, U+2116;
}
/* Devanagari */
@font-face {
font-family: 'Optimistic Display';
src: url('https://react.dev/fonts/Optimistic_Display_Deva_W_Md.woff2')
format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8,
U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
@font-face {
font-family: 'Optimistic Display';
src: url('https://react.dev/fonts/Optimistic_Display_Deva_W_SBd.woff2')
format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8,
U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
@font-face {
font-family: 'Optimistic Display';
src: url('https://react.dev/fonts/Optimistic_Display_Deva_W_Bd.woff2')
format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8,
U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
@font-face {
font-family: 'Optimistic Text';
src: url('https://react.dev/fonts/Optimistic_Text_Deva_W_Rg.woff2')
format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8,
U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
@font-face {
font-family: 'Optimistic Text';
src: url('https://react.dev/fonts/Optimistic_Text_Deva_W_Md.woff2')
format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8,
U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
@font-face {
font-family: 'Optimistic Text';
src: url('https://react.dev/fonts/Optimistic_Text_Deva_W_Bd.woff2')
format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8,
U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* Vietnamese */
@font-face {
font-family: 'Optimistic Display';
src: url('https://react.dev/fonts/Optimistic_Display_Viet_W_Md.woff2')
format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'Optimistic Display';
src: url('https://react.dev/fonts/Optimistic_Display_Viet_W_SBd.woff2')
format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'Optimistic Display';
src: url('https://react.dev/fonts/Optimistic_Display_Viet_W_Bd.woff2')
format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'Optimistic Text';
src: url('https://react.dev/fonts/Optimistic_Text_Viet_W_Rg.woff2')
format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'Optimistic Text';
src: url('https://react.dev/fonts/Optimistic_Text_Viet_W_Md.woff2')
format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'Optimistic Text';
src: url('https://react.dev/fonts/Optimistic_Text_Viet_W_Bd.woff2')
format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* Write your own custom base styles here */
html {
color-scheme: light;

Write Preview
Loading…
Cancel
Save