I am building an application where people can create banners and I have a list of fonts. This list contains web-safe fonts, custom fonts and google fonts.
For each text element the user can choose a font.
For each of this selected fonts I need to append to head either link referring to google fonts or add a style tag with font-face referring to the custom font that is being hosted by us. Overall the list is more than 1000 fonts long.
So for custom font I want to add
<style>
#font-face {
font-family: "somefamily";
font-style: normal;
font-weight: 400;
src: url("https:someurl.ttf")
}
</style>
and for each google font
<link href="https://fonts.googleapis.com/css?family=somefamily:400,600,700,800" rel="stylesheet" type="text/css">
I tried to make it work with React helmet but I don't think it is the way to go or at least I didn't manage to make it dynamic so it only shows the link or style tag for the selected font.
I also tried webfontloader but that one is piling the fonts on top of each other.
Same goes for creating the tags in JS and then appending it to the head
let url = "https://fonts.googleapis.com/css?family=";
url += font.name.replace(" ", "+");
url += ":" + font.weights.join(",");
url.replace("regular", "400");
let link = document.createElement('link')
link.href = url;
link.rel = "stylesheet";
link.type = "text/css";
document.head.appendChild(link);
In this codesandbox https://codesandbox.io/s/billowing-river-khqob?file=/src/App.js I made a small example with googlefonts that are piled up every time user chooses new one.
Is there a way how to dynamically get the fonts that user selected without keeping the previous ones?
Is it possible to somehow add it as css instead with packages like fex. emotion?
Thank you for your help
In the end I solved it using
https://github.com/planttheidea/react-style-tag
and
https://github.com/jakewtaylor/react-google-font-loader
I am trying to create a custom theme by changing the default colors on carbon.
I have imported the carbon components scss files and I set the variable $carbon-theme as recommended but it is not working. I have imported them in my main index.scss file. I would eventually like to change the color variables and create a customized theme.
This is my index.scss file
#import 'carbon-components/scss/globals/scss/styles.scss';
#import '#carbon/themes/scss/themes';
#include carbon--theme($carbon--theme--g100);
body {
background-color: $ui-02;
}
This is the mixin I am trying to create.
#mixin custom-color {
$focus: green;
}
The above does not work. The theme does not change to the expected dark gray background. How do I do this? Also, how would I create the mixin to set other colors?
#import '#carbon/themes/scss/themes';
// Use the gray 100 theme
$carbon--theme: $carbon--theme--g100;
#include carbon--theme();
#import 'carbon-components/scss/globals/scss/styles.scss';
body {
background-color: $ui-02;
}
And not put it into index.scss, put it into App.scss and import it in App.js
works for me, hope this work.
I'm trying to use some font-awesome icons on my app that Im developing on NativeScript I just dont know how to use them.
I have tried some ways like puting the unicode of the icon that I want to use on the hint like (Ex: hint="#f2c0 username") in HTML. I have tried to use the font-family: "FontAwesome,'fontawesome-webfont';" in CSS.
Im trying to put like an user icon on the hint of the TextField.
create folder name with "fonts"in your app folder download 3 files and move them in fonts folder
1. fa-brands-400.ttf
2. fa-regular-400.ttf
3. fa-solid-900.ttf
write following css class in app.css
.far {
font-family: Font Awesome 5 Free, fa-regular-400;
}
.fab {
font-family: Font Awesome 5 Brands, fa-brands-400;
}
.fas {
font-family: Font Awesome 5 Free, fa-solid-900;
}
use in xml :
<Button class="btn fas" text=""></Button>
I had built a website with React.js and webpack.
I want to use Google fonts in the webpage, so I put the link in the section.
Google Fonts
<link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet">
And set CSS
body{
font-family: 'Bungee Inline', cursive;
}
However, it does not work.
How can I solve this problem?
In some sort of main or first loading CSS file, just do:
#import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:regular,bold,italic&subset=latin,latin-ext');
You don't need to wrap in any sort of #font-face, etc. the response you get back from Google's API is ready to go and lets you use font families like normal.
Then in your main React app JavaScript, at the top put something like:
import './assets/css/fonts.css';
What I did actually was made an app.css that imported a fonts.css with a few font imports. Simply for organization (now I know where all my fonts are). The important thing to remember is that you import the fonts first.
Keep in mind that any component you import to your React app should be imported after the style import. Especially if those components also import their own styles. This way you can be sure of the ordering of styles. This is why it's best to import fonts at the top of your main file (don't forget to check your final bundled CSS file to double check if you're having trouble).
There's a few options you can pass the Google Font API to be more efficient when loading fonts, etc. See official documentation: Get Started with the Google Fonts API
Edit, note: If you are dealing with an "offline" application, then you may indeed need to download the fonts and load through Webpack.
Google fonts in React.js?
Open your stylesheet i.e, app.css, style.css (what name you have), it doesn't matter, just open stylesheet and paste this code
#import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
and don't forget to change URL of your font that you want, else working fine
and use this as :
body {
font-family: 'Josefin Sans', cursive;
}
If you are using Create React App environment simply add #import rule to index.css as such:
#import url('https://fonts.googleapis.com/css?family=Anton');
Import index.css in your main React app:
import './index.css'
React gives you a choice of Inline styling, CSS Modules or Styled Components in order to apply CSS:
font-family: 'Anton', sans-serif;
you should see this tutorial: https://scotch.io/#micwanyoike/how-to-add-fonts-to-a-react-project
import WebFont from 'webfontloader';
WebFont.load({
google: {
families: ['Titillium Web:300,400,700', 'sans-serif']
}
});
I just tried this method and I can say that it works very well ;)
Here are two different ways you can adds fonts to your react app.
Adding local fonts
Create a new folder called fonts in your src folder.
Download the google fonts locally and place them inside the fonts folder.
Open your index.css file and include the font by referencing the path.
#font-face {
font-family: 'Rajdhani';
src: local('Rajdhani'), url(./fonts/Rajdhani/Rajdhani-Regular.ttf) format('truetype');
}
Here I added a Rajdhani font.
Now, we can use our font in css classes like this.
.title{
font-family: Rajdhani, serif;
color: #0004;
}
Adding Google fonts
If you like to use google fonts (api) instead of local fonts, you can add it like this.
#import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght#300;500&display=swap');
Similarly, you can also add it inside the index.html file using link tag.
<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght#300;500&display=swap" rel="stylesheet">
(originally posted at https://reactgo.com/add-fonts-to-react-app/)
In your CSS file, such as App.css in a create-react-app, add a fontface import. For example:
#fontface {
font-family: 'Bungee Inline', cursive;
src: url('https://fonts.googleapis.com/css?family=Bungee+Inline')
}
Then simply add the font to the DOM element within the same css file.
body {
font-family: 'Bungee Inline', cursive;
}
Another option to all of the good answers here is the npm package react-google-font-loader, found here.
The usage is simple:
import GoogleFontLoader from 'react-google-font-loader';
// Somewhere in your React tree:
<GoogleFontLoader
fonts={[
{
font: 'Bungee Inline',
weights: [400],
},
]}
/>
Then you can just use the family name in your CSS:
body {
font-family: 'Bungee Inline', cursive;
}
Disclaimer: I'm the author of the react-google-font-loader package.
Had the same issue. Turns out I was using " instead of '.
use #import url('within single quotes'); like this
not #import url("within double quotes"); like this
I can see there are various different ways to include google fonts in react app. Let's explore the most preferred and optimum way.
#import vs link
The two options that google font provides are using link and #import. So now the question directs toward decision in between #import and link. There is already a Stack Overflow question regarding this comparison and here is a reference from the accepted answer
<link> is preferred in all cases over #import, because the latter
blocks parallel downloads, meaning that the browser will wait for the
imported file to finish downloading before it starts downloading the
rest of the content.
So, it's most preferable to use the link tag that google font provides
How to use link and why in a react app?
I have seen few answers giving this method as a solution but I want to make it more clear why it is most preferable.
After using create-react-app to initialize the project, you can see a comment in the index.html file inside the public folder as below.
You can add webfonts, meta tags, or analytics to this file. The build step will place the bundled scripts into the tag.
So you can simply include the link tag that google font provides in the head section of the above file.
<link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet">
Then you can use it in the CSS file and import in JSX
font-family: 'Bungee Inline', cursive;
In case someone needs it, you can use #fontsource. They have all of the Google Fonts and seems easier than most of the solutions here.
If anyone looking for a solution with (.less) try below. Open your main or common less file and use like below.
#import (css) url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
body{
font-family: "Open Sans", sans-serif;
}
Edit index.css
#import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
body {
margin: 0;
font-family: "Poppins", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
I added the #import and the #font-face in my css file and it worked.
Add link tag in index.html on root directory inside public folder.
<link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet"/>
then use it in any css file.
Create a new folder fonts in your src folder.
Download the google fonts locally and place them inside the fonts folder.
Open your index.css file and include the font by referencing the path.
#font-face {
font-family: 'Roboto';
src: local('Roboto'), url(./fonts/Roboto/Roboto-Regular.ttf) format('truetype');
}
now you can use font link this
.firstname{
font-family: Roboto, serif;
color: #0004;
}
It could be the self-closing tag of link at the end, try:
<link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet"/>
and in your main.css file try:
body,div {
font-family: 'Bungee Inline', cursive;
}
In some cases your font resource maybe somewhere in your project directory.
So you can load it like this using SCSS
$list: (
"Black",
"BlackItalic",
"Bold",
"BoldItalic",
"Italic",
"Light",
"LightItalic",
"Medium",
"MediumItalic",
"Regular",
"Thin",
"ThinItalic"
);
#mixin setRobotoFonts {
#each $var in $list {
#font-face {
font-family: "Roboto-#{$var}";
src: url("../fonts/Roboto-#{$var}.ttf") format("ttf");
}
}
}
#include setRobotoFonts();
I want to have a file just to store the colors and some other settings that I am going to use in my css styles. Because I don't want to specify the same color in different files multiple times. How can I achieve that with css modules?
For example:
setting.css
$primary-color: #785372;
$secondary-corlor: #22b390;
Button/styles.css
.button {
background: $primary-color;
display: flex;
}
From your samples that looks like Sass (which can be used in conjunction with CSS modules). If so then just import the partial containing the variables.
#import 'path/to/variables.scss';
If there's no Sass involved then postcss-modules-values is what your looking for:
variables.css
#value primary: #785372;
#value secondary: #22b390;
styles.css
#value primary, secondary from './path/to/variables.css';
.button {
background: primary;
display: flex;
}
EDIT:
Actually there's even more options, still through PostCSS plugins. postcss-simple-vars or postcss-custom-properties, the later having the clear advantage to stay close to the CSS specification.
They all share the same requirement though, importing the configuration file in a way or another.
You can do this with using CSS Custom Properties (here's a tutorial I've found).
In your settings.css file, do (the `:root':
:root {
--primary-color: #785372;
--secondary-corlor: #22b390;
}
Then, you can use those constants in the same, or a different file
.container {
color: var(--primary-color);
}
If you're using them in a different file, be sure to import both stylesheets, for example:
import './Button/styles.css'
import './settings.css'
Also, according to this answer, you can do this in html as well, by linking the two stylesheets:
<link href="settings.css" rel="stylesheet">
<link href="Button/style.css" rel="stylesheet">