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.
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 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!
I have a site using Middleman, Webpack and Materialize, we have a React component in one of the pages that works ok apart from the fact that Material Icons are not rendered on Internet Explorer and Firefox; all icons in the rest of the site work fine across all browsers.
Any help would be appreciated.
Packages used
materialize-css 0.100.2 => I tried 0.97, 0.98 with the same result
webpack 3.10.0
react 16.2.0 => I tried with 15.xx versions and got the same result
react-materialize 1.1.1
In my layout I'm importing the icons according to the Docs
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="preload" as="style" onload="this.rel='stylesheet'">
what is being displayed at the moment is the icon name like alarm_off or as I've tried both input methods
After reading lots of blogs and issues on GitHub, I managed to solved the problem thanks to this Google issue, so I added this in my style.scss
#font-face {
font-family: "Material Icons";
font-style: normal;
font-weight: 400;
src: local("Material Icons"),
local("MaterialIcons-Regular"),
url(https://rawgit.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff2) format("woff2"),
url(https://rawgit.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff) format("woff"),
url(https://rawgit.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.ttf) format("truetype");
}
.material-icons {
font-family: "Material Icons";
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: "liga";
}
Also, I updated this in my nginx
location ~* \.(?:eot|otf|ttc|ttf|woff|woff2)$ {
expires 1M;
add_header Access-Control-Allow-Origin "*";
add_header Cache-Control "public";
Hope this help somebody else with similar issues.