Followed the documentation and added a _document.js file with the provided code:
import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
<Html>
<Head>
<link href="https://fonts.googleapis.com/css2?family=Almarai:wght#300;400;700&display=swap" rel="stylesheet" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument
When I use my chrome extension font checker and verify in the inspector, it states that it using the defaults fonts. Any idea how I can get this to work? Might there be some interference with the fact that I'm using tailwindcss?
in globals.css
/* Google Font */
#import url('https://fonts.googleapis.com/css2?family=Kurale&display=swap');
/* From Public Directory */
#font-face {
font-family: 'Kurale';
src: url('/fonts/Kurale.ttf');
font-style: medium;
font-weight: normal;
font-display: swap;
}
Check this, use <style data-href= instead of
For the fonts with NExtJS and Vercel I recommend you to use fontsource
Import all fonts in the globals.css or in the stylesheet imported in _app.tsx
#import url("https://fonts.googleapis.com/css2?family=Montserrat:wght#100;200;300;400&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Kdam+Thmor+Pro&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Lobster&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Poiret+One&display=swap");
All the fonts had to be imported separately. For me, importing them
all together didn't work in the production.
Instead of <link> try using #import in your globals.css (or any stylesheet which is imported to the _app.js):
/* globals.css */
#import url("https://fonts.googleapis.com/css2?family=Almarai:wght#300;400;700&display=swap");
None of the usual things worked for me.
I was trying to import the following in the global.css file:
#import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght#100;200;300;400;500;700&display=swap");
and the font wasn't loading. I had to inject the actual font instead:
/* IMPORTANT: For some reason directly importing the font from fonts.googleapis.com/css2 is not working. Instead I had to inject its contents */
/* #import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght#100;200;300;400;500;700&display=swap"); */
/* latin-ext */
#font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Hp2ywxg089UriCZ2IHTWEBlwu8Q.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
#font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Hp2ywxg089UriCZOIHTWEBlw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
#font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Cp2ywxg089UriAWCrCBamC3YU-CnE6Q.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
#font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Cp2ywxg089UriAWCrCBimC3YU-Ck.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
#font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Cp2ywxg089UriASitCBamC3YU-CnE6Q.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
#font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Cp2ywxg089UriASitCBimC3YU-Ck.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
Related
I'm using create-react-app and prefer not to eject.
i imported in index.html file . and give it default font. but its not working.
<style>
#font-face {
font-family: Gumela;
src: url("../src/fonts/*");
}
* {
font-family: "Gumela";
font-weight: normal;
font-size: 20px;
}
body {
margin: 0;
}
</style>
Try importing the fonts in your app.css or index.css file.
And try:
#font-face {
font-family: Gumela;
src: url("../src/fonts/*");
font-display: swap; // This will swap font once its loaded, for SEO purpose.
}
* {
font-family: Gumela;
font-weight: normal;
font-size: 20px;
OR
font: Gumela normal 20px;
}
I imported the font here: https://www.onlinewebfonts.com/download/00561b492d88a5287a5def1e83a34882 and it worked for me.
just add this in head before your style tag.
<link href="//db.onlinewebfonts.com/c/00561b492d88a5287a5def1e83a34882?family=Gumela" rel="stylesheet" type="text/css"/>
You can insert font-face on your App.css file
#font-face {
font-family: Gumela;
src: url('./fonts/Gumela\ Regular.otf');
}
I have tried following the instructions listed on Bootstrap's website, as well as various StackOverflow questions, and am still unable to override a single style element of Bootstrap. I'd appreciate help, I'm not particularly knowledgeable of web dev.
Here is my setup.
I used create-react-app to generate a file structure. I have an index.js where I immediately import './index.scss';
Here is my index.scss
#import "../node_modules/bootstrap/scss/functions";
#import "../node_modules/bootstrap/scss/variables";
#import "../node_modules/bootstrap/scss/mixins";
body {
margin: 0;
font-family: Catamaran, -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: Catamaran source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; }
/* playfair-display-regular - latin */
#font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 400;
src: url("./fonts/playfair-display-v25-latin-regular.eot");
/* IE9 Compat Modes */
src: local(""), url("./fonts/playfair-display-v25-latin-regular.eot?#iefix") format("embedded-opentype"), url("./fonts/playfair-display-v25-latin-regular.woff2") format("woff2"), url("./fonts/playfair-display-v25-latin-regular.woff") format("woff"), url("./fonts/playfair-display-v25-latin-regular.ttf") format("truetype"), url("./fonts/playfair-display-v25-latin-regular.svg#PlayfairDisplay") format("svg");
/* Legacy iOS */ }
/* catamaran-regular - latin */
#font-face {
font-family: 'Catamaran';
font-style: normal;
font-weight: 400;
src: url("./fonts/catamaran-v8-latin-regular.eot");
/* IE9 Compat Modes */
src: local(""), url("./fonts/catamaran-v8-latin-regular.eot?#iefix") format("embedded-opentype"), url("./fonts/catamaran-v8-latin-regular.woff2") format("woff2"), url("./fonts/catamaran-v8-latin-regular.woff") format("woff"), url("./fonts/catamaran-v8-latin-regular.ttf") format("truetype"), url("./fonts/catamaran-v8-latin-regular.svg#Catamaran") format("svg");
/* Legacy iOS */ }
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1020px,
xxl: 1080px
);
$blue: #306779;
$primary: #306779;
#import "../node_modules/bootstrap/scss/bootstrap.scss";
The fonts are loading correctly, but the bootstrap variables are not. I have also attempted to manually transpile a scss file into a css file and import that into the <head> using <link rel="stylesheet" href="../scss/custom.css" />, however that also does not work and I still see the normal bootstrap color scheme.
I use the Roboto font in my React project and I have a strange problem, when I access my application locally the font is not applied to my texts, however if I open the element inspector and I uncheck and recheck a css property (no matter which one) the font is applied everywhere!
I use scss files with node-sass and my font is local and defined using #font-face
Here is the .scss file for the font
#font-face {
font-family: Roboto;
src: url("./Roboto/Roboto-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: optional;
}
#font-face {
font-family: Roboto;
src: url("./Roboto/Roboto-Italic.ttf") format("truetype");
font-weight: 400;
font-style: italic;
font-display: optional;
}
#font-face {
font-family: Roboto;
src: url("./Roboto/Roboto-Medium.ttf") format("truetype");
font-weight: 500;
font-style: normal;
font-display: optional;
}
#font-face {
font-family: Roboto;
src: url("./Roboto/Roboto-MediumItalic.ttf") format("truetype");
font-weight: 500;
font-style: italic;
font-display: optional;
}
#font-face {
font-family: Roboto;
src: url("./Roboto/Roboto-Bold.ttf") format("truetype");
font-weight: 700;
font-style: normal;
font-display: optional;
}
#font-face {
font-family: Roboto;
src: url("./Roboto/Roboto-BoldItalic.ttf") format("truetype");
font-weight: 700;
font-style: italic;
font-display: optional;
}
I import all my .scss file into a main.scss file and I import this file to my App.js. Everything related to css is working fine except the font :(
Has anyone experienced a similar problem? I also use a font for icons and it works perfectly
Thanks in advance !
The solution is to not use "font-display: optional" ...
Hello I would like to use different font weights of Inter font (400, 500, 700). Right now it only loads Inter regular. I'm using create-react-app with typescript and styled-components.
globalStyles:
export const GlobalStyle = createGlobalStyle`
#font-face {
font-family: 'Inter';
src: url(${Inter}) format("truetype"),
url(${InterWoff}) format("woff"),
url(${InterWoff2}) format("woff2");
font-weight: normal;
font-style: normal;
};
#font-face {
font-family: 'Inter';
src: url(${InterMedium}) format('truetype')
url(${InterMediumWoff}) format('woff'),
url(${InterMediumWoff2}) format('woff2');
font-weight: 500;
font-style: normal;
};
#font-face {
font-family: 'Inter';
src: url(${InterBold}) format('truetype')
url(${InterBoldWoff}) format('woff'),
url(${InterBoldWoff2}) format('woff2');
font-weight: bold;
font-style: normal;
}
body {
margin: 0;
font-family: 'Inter', -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;
}
This is how I was able to do it
import { createGlobalStyle } from 'styled-components'
import { GalanoGrotesqueMedium, GalanoGrotesqueRegular } from 'assets/fonts'
const GlobalStyles = createGlobalStyle`
#font-face {
font-family: 'GalanoGrotesqueRegular';
src: url(${GalanoGrotesqueRegular}) format('truetype');
}
#font-face {
font-family: 'GalanoGrotesqueMedium';
src: url(${GalanoGrotesqueMedium}) format('truetype');
}
* {
font-family: 'GalanoGrotesqueRegular';
}
`
export default GlobalStyles
where I am importing .ttf fonts
This is my assets/fonts
export {default as GalanoGrotesqueMedium} from './fonts/GalanoGrotesqueMedium.ttf'
export {default as GalanoGrotesqueRegular} from './fonts/GalanoGrotesqueRegular.ttf'
Based on your code, I would try naming the different fonts and then adding them to the font-families, as such:
export const GlobalStyle = createGlobalStyle`
#font-face {
font-family: 'Inter-Regular';
src: url(${Inter}) format("truetype"),
url(${InterWoff}) format("woff"),
url(${InterWoff2}) format("woff2");
font-weight: normal;
font-style: normal;
};
#font-face {
font-family: 'Inter-500';
src: url(${InterMedium}) format('truetype')
url(${InterMediumWoff}) format('woff'),
url(${InterMediumWoff2}) format('woff2');
font-weight: 500;
font-style: normal;
};
#font-face {
font-family: 'Inter-Bold';
src: url(${InterBold}) format('truetype')
url(${InterBoldWoff}) format('woff'),
url(${InterBoldWoff2}) format('woff2');
font-weight: bold;
font-style: normal;
}
body {
margin: 0;
font-family: 'Inter-Regular', 'Inter-500', 'Inter-Bold', -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;
}
This is how I do it:
fontsCSS.ts
import { css } from "styled-components";
export const fontsCSS = css`
#font-face {
font-family: "Inter";
src: url('/fonts/Inter-Regular.ttf');
font-weight: normal;
font-style: normal;
font-display: block;
}
#font-face {
font-family: "Inter";
src: url('/fonts/Inter-Semibold.ttf');
font-weight: bold;
font-style: normal;
font-display: block;
}
`;
GlobalStyles.ts
import { createGlobalStyle } from "styled-components";
import { resetCSS } from "#styles/resetCSS";
import { baseCSS } from "#styles/baseCSS";
import { fontsCSS } from "#styles/fontsCSS";
const GlobalStyles = createGlobalStyle`
${resetCSS}
${baseCSS}
${fontsCSS}
`;
export default GlobalStyles;
App.tsx
import React from "react";
import { theme } from "#styles/theme";
import { ThemeProvider } from "styled-components";
import GlobalStyles from "#styles/GlobalStyles";
interface App {}
const App: React.FC<App> = (props) => {
console.log("Rendering App...");
return(
<ThemeProvider theme={theme}>
<GlobalStyles/>
<RestOfTheApp/>
</ThemeProvider>
);
};
export default React.memo(App);
Use exact font-weights in font-family declarations instead of normal, bold.
When using font-family, declare font-weight as well. Browser will pick the correct font file based on the combination of font-family and font-weight.
I have my mui theme defined like this:
export default createMuiTheme({
typography: {
fontFamily: '"Nunito Sans", "Helvetica", "Arial", sans-serif',
fontWeightLight: 300,
fontWeightMedium: 600,
fontWeightRegular: 400
}
}
});
I have the fonts being loaded in using App.css from local files. I can see from the network requests that these files are being found.
/* latin */
#font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 300;
src: local('Nunito Sans Light'), local('NunitoSans-Light'),
url(../assets/font/pe03MImSLYBIv1o4X1M8cc8WAc5tU1E.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
#font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 400;
src: local('Nunito Sans Regular'), local('NunitoSans-Regular'), url(../assets/font/pe0qMImSLYBIv1o4X1M8cce9I9s.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
#font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 600;
src: local('Nunito Sans SemiBold'), local('NunitoSans-SemiBold'),
url(../assets/font/pe03MImSLYBIv1o4X1M8cc9iB85tU1E.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
The issue is that the UI is falling back to "Helvetica". I can see no reason why "Nunito Sans" is not being used by MUI. Annoyingly this setup was working fine before and is now failing. Anyone any ideas why this might not work? Thanks!
Here’s a working example: https://codesandbox.io/s/mzlmxpw4r8?fontsize=14
I think there are two possible problems you could be having.
Configuring the Material UI theme
// Import the wrapper component, and the the creator function
import { MuiThemeProvider, createMuiTheme } from "#material-ui/core/styles";
// Create a new theme using Nunito Sans
const theme = createMuiTheme({
typography: {
fontFamily: "Nunito Sans, Roboto, sans-serif"
}
});
const App = function(props) {
// Pass the theme as a prop to the theme provider
return (
<MuiThemeProvider theme={theme}>
<Demo />
</MuiThemeProvider>
);
};
For the sake of this demo, I thought it would be easier to use the hosted version of Nunito Sans on Google Fonts, so my index.html file also has the following:
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,500"
/>
Changing how you load the fonts
You mentioned you’re seeing the requests for the files coming through, so it’s probably not this, but I thought I would note it anyway.
From the example CSS you provide, it looks to me like you’ve copied the CSS declaration from Google Fonts itself. When I visit now for Nunito Sans, I get the exact same result: https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,50
However, this is different depending on the browser requesting the CSS. For example, if you are on an browser that supports WOFF but not WOFF2, you’ll be served the WOFF files.
Google Fonts has its own reasons and logic to handle this automatically, so it’s worth considering if it would be a good option for you. Otherwise, if you do want to host the fonts locally, downloading them directly from the Google Fonts API will be less reliable than getting them from another source with all the formats you might want (WOFF and WOFF2 is almost always sufficient at this point, and you can support an extra ~9% of browsers in use by adding the WOFF formats, without much extra effort).
For example, after download the WOFF as well:
#font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 400;
src:
url('../assets/font/NunitoSans-400.woff2') format('woff2'),
url('../assets/font/NunitoSans-400.woff') format('woff');
}
Or, because Material UI works with the typefaces- packages on npm, you could install the formats and CSS you need that way:
npm install typeface-nunito-sans
Then at the top of your entry JavaScript file:
import "typeface-nunito-sans";
// Or require('typeface-nunito-sans') if you aren’t using import
Still, my first suggestion would be to start with the live Google Fonts version of Nunito Sans, and change your approach from there as necessary:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,500" />
Hope that helps!