I am starting a new website in React and I need to use a font from Google called FredokaOne.
I have used the command:
npm install --save typeface-fredoka-one
Everything went well but I can't figure-out how to use it.
I tried this :
font-family: FredokaOne;
font-size: 40px;
But it still using the default font. Is there a way to checkout the proper font to use ?
or any missing params.
Thanks
Regards
You can add #import inside index.css file of react project.
Index.css
#import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');
*{
font-family: 'Fredoka One', cursive;
}
Related
I'm trying to add the Normalize.css from node_modules but it doesn't work.
I have tried everything, from a custom configuration for webpack (I'm using version 5 for my React project), to importing it into the preview.js and preview-head.html, but I can't get it to work, Storybook still keeps putting me the browser styles and it's very frustrating, because in my React project I want to use a css normalizer.
Can someone give me an example of how it would be done? Since what I have found in the documentation and on the internet has not helped me or I have not known how to do it.
Thanks
You can try put the style tag in preview-head.html
Like this:
<style>
/* copy-paste normalize code hire */
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
}
...
</style>
The storybook docs mention importing your css in preview.js
https://storybook.js.org/docs/react/configure/styling-and-css#importing-css-files
To use your CSS in all stories, you import it in .storybook/preview.js
// ./storybook/preview.js
import 'normalize.css';
I have the following .sass file in /src/style
.error {
color: red;
}
and the following line in app.js
import "./style/styles.sass";
When the app renders a , the red style is not applied. Are there additional steps I need to take to import a SASS file and apply it's style rules?
You need to have node-sass installed to get .scss and .sass files to work in CRA
You can install it like so:
$ npm install node-sass --save
$ # or
$ yarn add node-sass
From the CRA docs
You said
Here's my .scss file: .error { color: red; } .nav { border: 1px solid blue; }
Therefore, the import should be this:
import "./style/styles.scss";
NOT this:
import "./style/styles.sass";
Ok, the problem was that somehow, something deleted all the text in my .scss file. I've restored that file and things are working now. Thanks for all the help though.
I'm having trouble setting up my project to use downloaded google fonts. I'm working with a create-react-app generated project, with Sass as my pre-processor. The project structure is seen in the linked screenshot. Both the styles and fonts folders fall directly under the parent src folder. While obviously not the same thing, I got it, with a similar structure, to work on a Vue-CLI generated project, but for whatever reason it fails with React.
I've tried changing the src url ('../../fonts/' crashes the server i.e. file not found) but nothing works. What gives?
I realize that this issue has been brought up in one way or another, but none of the suggested solutions have worked for me.
Typography file
#font-face {
font-family: 'Montserrat';
src: local('Montserrat'), url('/fonts/montserrat/Montserrat-Regular.ttf') format('opentype');
}
#font-face {
font-family: 'Montserrat';
font-weight: 700;
src: local('Montserrat'), url('/fonts/montserrat/Montserrat-Bold.ttf') format('opentype');
}
#font-face {
font-family: 'Montserrat';
font-weight: 100;
src: local('Montserrat'), url('/fonts/montserrat/Montserrat-Thin.ttf') format('opentype');
}
Styles (SASS) entry file
#import 'utils/typography';
#import 'utils/variables';
#import 'utils/functions';
#import 'utils/mixins';
#import 'base';
Screenshot of project structure
you can add this to the index.html:
<link href="https://fonts.googleapis.com/css?family=Lato:400,700&display=swap" rel="stylesheet">
replace Lato with any google font
then it will be available in your project for use
I try to customize the bulma default colors. I have installed node-sass and it appears to be working and in my root scss file ive written the script
#import '../node_modules/bulma/sass/utilities/initial-variables.sass';
$blue: #72d0eb;
$pink: #ffb3b3;
$pink-invert: #fff;
$family-serif: "Merriweather", "Georgia", serif;
#import '../node_modules/bulma/sass/utilities/derived-variables.sass';
$primary: $pink;
$primary-invert: $pink-invert;
$family-primary: $family-serif;
#import '../node_modules/bulma/css/bulma.css'
However this does not appear to be changing the primary color in my project or the primary font choice. Ive imported this file into my index.js file on react and bulma is definitely working just not accepting my customizations.
Update: here is the link to the bulma docs describing how to do this
http://bulma.io/documentation/overview/customize/ I tried it that way with no success as well
I think your .scss file looks good, though you don't need to include the .sass extension (it looks like you're writing .scss, not .sass, anyway so I'd remove it.)
The main thing is you need to include a build process that will transform the scss to css. See this part of the CRA docs.
Basically in your package.json scripts:
json
"build:css": "node-sass ./src/scss/main.scss ./build/main.css",
"build:css:watch": "npm run build:css -- -w",
My script above is putting the css in build folder and I'm using a link tag in index.html, but you could build and import as well.
Hey guys after taking the advice above I reconfigured the package json. Another side note I changed my source sass script to this
#import '../node_modules/bulma/sass/utilities/initial-variables.sass';
$blue: #72d0eb;
$pink: #ffb3b3;
$pink-invert: #fff;
$family-serif: "Merriweather", "Georgia", serif;
#import '../node_modules/bulma/sass/utilities/derived-variables.sass';
$primary: $pink;
$primary-invert: $pink-invert;
$family-primary: $family-serif;
#import '../node_modules/bulma/bulma.sass'
You have to point your scss or sass file to the bulma.sass not the bulma.css file since your wanting to create a new build of the bulma.css file other than the one that comes packaged with it
Cheers
I have blueprint 90% working, and am able to implement the features - except for the icon library. I've tried several other UI toolkits, and this is the first one which I've had Icon issues with.
I have tried dumping the icons and CSS files directly into my meteor client folder and relinked the CSS dependencies, so it shouldn't be a file access issue. I would just use a different icon library, but it's a lot of work to re-link everything through the CSS file
#font-face {
font-family: "Icons16";
font-style: normal;
font-weight: normal;
src: url("icons-16.eot?#iefix") format("embedded-opentype"), url("icons-16.woff") format("woff"), url("icons-16.ttf") format("truetype"); }
I'm sorry, I don't understand the actual issue you're facing. I haven't used Meteor in some time, either, so I can't help there.
We use postcss-copy-assets in our build to ensure that the font files and other images used in the CSS files get copied to the correct place at build time.