I'm trying to add multiple local fonts to nextjs 13.
The documentation says to do the following for a single file.
I tried importing the two files in the following way:
import '#/styles/globals.css';
import localFont from '#next/font/local';
const myFonts = localFont({
src: '../public/Fonts/AnultraSlabRegular.ttf',
variable: '--Anultra-Slab',
});
const myFonts2 = localFont({
src: '../public/Fonts/IntroRegular.ttf',
variable: '--Intro-Regular',
});
export default function App({ Component, pageProps }) {
return (
<main className={'${myFonts2.className} ${myFonts.className}'}>
<Component {...pageProps} />
</main>
);
}
this method did not work when assigning a font-family to specific elements.
Thanks in advance!
Are you using Tailwind? I see you are defining a variable for the font but not using it here, and there are a couple of extra steps to get Tailwind wired up.
The only syntax issue I see is the backticks on the class name that you already mentioned.
import '#/styles/globals.css';
import localFont from '#next/font/local';
const myFonts = localFont({
src: '../public/Fonts/AnultraSlabRegular.ttf',
variable: '--Anultra-Slab',
});
const myFonts2 = localFont({
src: '../public/Fonts/IntroRegular.ttf',
variable: '--Intro-Regular',
});
export default function App({ Component, pageProps }) {
return (
<main className={`${myFonts2.className} ${myFonts.className}`}>
<Component {...pageProps} />
</main>
);
}
you can also use the variable you defined in your CSS once you have them loaded. It should look something like:
button {
font-family: var(--Anultra-Slab);
}
I had similar issues where the font was being loaded but not applied because a global style was overriding the font-family to nothing, making it default to the system font. I expanded font-family in the "computed" view in dev tools to find the issue, then added font-family: inherit to the offending class to fix it.
You should be able to apply the font-family: var(--Anultra-Slab) in the browser dev tools to make sure the font is being loaded correctly, poke around, and locate the issue.
Hope this helps!
If you are using tailwind then this is how I did it -
Firstly add the font faces at the top in your root styles file (probably named as either globals.css or style.css):
#font-face {
font-family: "IntroRegular";
src: url("/Fonts/IntroRegular.ttf");
font-weight: 400;
font-display: swap;
font-style: normal;
}
#font-face {
font-family: "AnultraSlabRegular";
src: url("/Fonts/AnultraSlabRegular.ttf");
font-weight: 400;
font-display: swap;
font-style: normal;
}
And then in your tailwind.config.js file, extend the
fontFamily to include your font like this:
theme: {
extend: {
fontFamily: {
IntroRegular: ["IntroRegular", "sans-serif"],
AnultraSlabRegular: ["AnultraSlabRegular", "sans-serif"]
}
}
}
Now, you can use these fonts just like you use tailwind ones, for example:
<main className="font-AnultraSlabRegular">
I had to read the documentation more than once. (Since it is referencing the variable name in the example using Google fonts.) It took me quite some time to only discover adding multiple classes should not be done by using the className (as most examples use) to apply one font like;
// Do not use className for importing multiple local fonts
<body className={`bg-black ${nantes.className} ${spezia.className}`}>
{children}
</body>
But by using the variable name like this;
// use variable for importing multiple fonts which you can use throughout the application
<body className={`bg-black ${nantes.variable} ${spezia.variable}`}>
{children}
</body>
To be complete, this is what I have right now, which works;
layout.tsx
import localFont from '#next/font/local'
const spezia = localFont({
src: '../fonts/FaroVariableWeb.woff2',
variable: '--font-spezia'
})
const nantes = localFont({
src: '../fonts/Nantes_Variable_Upright_Web.woff2',
variable: '--font-nantes'
})
import './globals.css'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
{/*
<head /> will contain the components returned by the nearest parent
head.tsx. Find out more at https://beta.nextjs.org/docs/api-reference/file-conventions/head
*/}
<head />
<body className={`bg-black ${nantes.variable} ${spezia.variable}`}>
{children}
</body>
</html>
)
}
global.css
#tailwind base;
#tailwind components;
#tailwind utilities;
html, body {
font-family: var(--font-spezia);
color:blueviolet;
}
h1 {
font-family: var(--font-nantes);
color: aqua;
}
I am developing a react app with styled-components and unit tests writen with cypress. I have a problem with global styles. My GlobalStyles style is just normalize.css. The problem is that in the browser it looks fine and works fine, but in the cypress test environment, no global styles are applied, so the fonts are wrong, the body has margins, etc. This is not very important for testing, but I prefer to know that my app looks exactly the same while I do my tests. Can you help me?
GlobalStyle.js:
import { createGlobalStyle } from "styled-components";
export const GlobalStyle = createGlobalStyle`
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
main {
display: block;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
...
`;
App.test.jsx:
import React from "react";
import { mount } from "#cypress/react";
import { App } from "./App";
import { GlobalStyle } from "./globalStyles";
it("renders hello world", () => {
mount(
<App>
<GlobalStyle />
</App>
);
cy.get("h1").contains("Hello world!");
});
I doubt this is a Konva specific question but since I am using the library as the basis of my example I wanted to include the bare minimum of my code to replicate this.
Whenever the onMouseDownHandler (and in my full code onMouseUpHandler as well) is fired by clicking on the canvas the error "Uncaught SyntaxError: Function statements require a function name" is thrown in my google dev tools console as shown below.
From reading the docs I have written this using the correct syntax. Any help would be greatly appreciated as I have spent many an hour trying to resolve this.
<template>
<v-stage
ref="stage"
class="konva-stage"
:config="stageSize"
:onMouseDown="onMouseDownHandler"
/>
</template>
<script lang="ts">
import Vue from 'vue'
import { Prop } from 'vue-property-decorator'
import Component, { mixins } from 'vue-class-component'
import Konva from 'konva'
#Component({
name: 'MapCanvas'
})
export default class MapButtons extends Vue {
stageSize = {
width: window.innerWidth,
height: window.innerHeight
}
onMouseDownHandler (e: any) : void {
console.log('mouse down')
}
}
</script>
<style scoped lang="scss">
.konva-stage {
background-color: white;
width: 100%;
height: 100%;
position: absolute;
}
</style>
Fixed it myself!
<v-stage
ref="stage"
class="konva-stage"
:config="stageSize"
:onMouseDown="onMouseDownHandler" <-- NOT THIS
#mousedown="onMouseDownHandler" <-- THIS
/>
I am trying to workout why this is erroring.
Although If I do not have CardWrapper wrapping around CardImage the image is displaying.
import React from 'react'
import styled, { css } from 'styled-components'
const CardWrapper = styled.div`
background-color: yellow;
border-color: 1px solid red;
position: relative;
`
const CardImage = styled.img`
height: auto;
width: 100%;
`
const Card = props => {
return (
<CardWrapper>
<CardImage src={props.data.imageUrl}/>
</CardWrapper>
)
}
export default Card;
App.js
<Card data={{imageUrl: 'https://via.placeholder.com/630x354', logoUrl: "https://via.placeholder.com/100x100", text: "test"}}/>
Error
./src/Components/Card/Card.js
Error: Cannot find module '/Users/max/test/test/test/node_modules/babel-preset-react-app/node_modules/#babel/core/lib/index.js'. Please verify that the package.json has a valid "main" entry
Looks like you need to install a Node.js package. In your terminal, navigate to the project's root directory and run:
npm install babel-preset-react-app
I have the following component where I have applied the css using styled-components:
import styled from 'styled-components'
// square-block css can be re-written as a styled-component(???)
const SquareBlock = styled.div`
width: 100%;
height: 100%;
background-color: ${props => props.color};
`
export default SquareBlock
I would like to use the following fixture with react-cosmos to adapt the background-color of the component based on the props:
import { COLORS } from '../../../constants/tetronimo'
export default {
color: COLORS.I
}
In the React developer tools I noticed that the component PropsProxy had a fixture prop which has the color property:
JSON.stringify($r.props.fixture, null, 2)
{
"color": "#3cc7d6"
}
How can I ensure that props are passed correctly to react-cosmos?
Props need to be placed under fixture.props in the latest version of React Cosmos, but you seem to have already figured this out. Does this solve your problem?