inline index.css, omit unused fonts, preload hints

This commit is contained in:
Matt Dunn-Rankin 2020-05-18 00:56:46 -07:00
parent 41e8e5f849
commit cfabefa442
10 changed files with 44 additions and 48 deletions

View file

@ -21,6 +21,36 @@
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Dress to Impress</title>
<style type="text/css">
/* A font by Jos Buivenga (exljbris) -> www.exljbris.com */
@font-face {
font-family: "Delicious";
font-display: swap;
font-weight: 700;
src: url(/fonts/Delicious-Bold.otf);
}
@font-face {
font-family: "Delicious";
font-display: swap;
font-weight: 800 1000;
src: url(/fonts/Delicious-Heavy.otf);
}
</style>
<link
rel="preload"
href="/fonts/Delicious-Heavy.otf"
type="font/otf"
as="font"
crossorigin
/>
<link
rel="preload"
href="/fonts/Delicious-Bold.otf"
type="font/otf"
as="font"
crossorigin
/>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>

View file

@ -314,7 +314,7 @@ function PoseButton({ pose, onChange, inputRef }) {
) : (
<Flex align="center" justify="center">
<Box
fontFamily="Delicious"
fontFamily="Delicious, sans-serif"
fontSize="3xl"
fontWeight="900"
color="gray.600"

View file

@ -33,7 +33,12 @@ export function Delay({ children, ms = 300 }) {
*/
export function Heading1({ children, ...props }) {
return (
<Heading fontFamily="Delicious" fontWeight="800" size="2xl" {...props}>
<Heading
fontFamily="Delicious, sans-serif"
fontWeight="800"
size="2xl"
{...props}
>
{children}
</Heading>
);
@ -45,7 +50,13 @@ export function Heading1({ children, ...props }) {
*/
export function Heading2({ children, ...props }) {
return (
<Heading size="xl" color="green.800" fontFamily="Delicious" {...props}>
<Heading
size="xl"
color="green.800"
fontFamily="Delicious, sans-serif"
fontWeight="700"
{...props}
>
{children}
</Heading>
);

View file

@ -1,44 +0,0 @@
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
/* A font by Jos Buivenga (exljbris) -> www.exljbris.com */
@font-face {
font-family: "Delicious";
src: url(./fonts/Delicious-Roman.otf);
}
@font-face {
font-family: "Delicious";
font-weight: 700;
src: url(./fonts/Delicious-Bold.otf);
}
@font-face {
font-family: "Delicious";
font-weight: 800 1000;
src: url(./fonts/Delicious-Heavy.otf);
}
@font-face {
font-family: "Delicious";
font-style: italic;
src: url(./fonts/Delicious-Italic.otf);
}
@font-face {
font-family: "Delicious";
font-style: italic;
font-weight: 700 1000;
src: url(./fonts/Delicious-BoldItalic.otf);
}

View file

@ -1,6 +1,5 @@
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./app/App";
ReactDOM.render(
<React.StrictMode>