I have a simple react app where I want to use fontsource on CodeSandbox.
In App.tsx:
import "#fontsource/raleway";
import "./styles.css";
Then in styles.css:
h1 {
font-family: "Raleway", sans-serif;
}
But this is not working.
On Firefox I get this error on console: downloadable font: rejected by sanitizer.
On Chrome it also doesn't work with error Failed to decode downloaded font.
Related
I'm trying to get fonts to work in React with TypeScript and styled-components.
The GlobalStyle.ts looks the following:
import { createGlobalStyle } from "styled-components";
const GlobalStyle = createGlobalStyle`
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: url('./fonts/roboto-v27-latin-300.eot'); /* IE9 Compat Modes */
src: local(''),
url('./fonts/roboto-v27-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('./fonts/roboto-v27-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
url('./fonts/roboto-v27-latin-300.woff') format('woff'), /* Modern Browsers */
url('./fonts/roboto-v27-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
url('./fonts/roboto-v27-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}
*{
color: red;
font-family: "Roboto";
}
`;
export default GlobalStyle;
My index.tsx looks like this:
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import GlobalStyle from "./GlobalStyle";
ReactDOM.render(
<React.StrictMode>
<GlobalStyle />
<App />
</React.StrictMode>,
document.getElementById("root")
);
I removed some lines from both files that were unnecessary in this context.
Both files are at the same level in the directory.
The files for the fonts are all downloaded in a folder called "fonts"
"Normal" styling works like the "color: red;" in GlobalStyles.ts.
However, I simply cannot get the font to load. Does anyone know how to fix this? If you need any more information, just tell me and I will provide it!
Styled component structure and syntax looks fine.
Webfont files need to be in the public folder outside src (since they’re not being imported directly into the component the way you might with an image asset or a static css file for example). The CSS rules pointing at font urls will ultimately be relative to where the <style> tag is being inserted in the DOM, not relative to your React project folder structure. So you may need to update your url values after you’ve moved your fonts.
Also, unless you really need to support legacy browsers, you really only need woff2 format.
https://caniuse.com/woff2
I downloaded the custom font Rounded Mgen+ 1c into my react project.
But somehow, it doesn't work correctly.
What I did
Downloaded the font into public/fonts/ and src/.
Added import code into the src/index.css like below.
:
#font-face {
font-family: 'Rounded Mgen+';
src: url(./rounded-mgenplus-1c-bold.ttf) format('ttf');
}
:
I'm trying to add google fonts to my Rails 5.2 application and I can't figure out why it doesn't work/what is missing:
i added the following lines in application.scss file :
#import url('://fonts.googleapis.com/css?family=Lato:400,700,900&display=swap');
body {
padding-top: 70px;
font-family: 'Lato', sans-serif;
}
Before using #import in application.scss i tried to add in application.html.erb the following line in the head
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,900&display=swap" rel="stylesheet">
Thanks for any help!
It seems the first line in the application.scss, there's a colon ( before //fonts, after url(' ) that causes error. Removing this fixes it:
#import url('//fonts.googleapis.com/css?family=Lato:400,700,900&display=swap');
body {
padding-top: 70px;
font-family: 'Lato', sans-serif;
}
No need to add additional line into your application since it'll be compiled in your scss file.
Alternative way is to host font(s) within the app for an extra tiny bit of performance enhancement. I have tried the steps below on a Rails 6 app:
Find open source font from: https://fontsource.org/fonts
for this example lets use roboto: https://fontsource.org/fonts/roboto
Depending on which package manager you are using, do either:
yarn add #fontsource/roboto or npm install #fontsource/roboto
In app/javascript/packs/application.js add this internal import:
import "#fontsource/roboto";
You should now be able to use the font in your stylesheets. Repeat the same steps for any other additional open source font.
I'm currently developing a small project for my brother who needs to realize a website (he is in an art-school).
I was planning to do it in React (good for me to practice)
I recently started to use Sass and fell in love with it, it's so much handy than regular css !
Anyway,
He gave me a font to use for his website (https://www.velvetyne.fr/fonts/le-murmure/) but I can't manage it to import it in the project. I had read so many subjects but I can't make it work.
So I found their was two solutions, one is to use import because then the font will enter in the build pipeline, and the other is to use directly the build folder. Apparently using import is the best practice.
I found this answer saying we need to put them in an assets folder (https://github.com/angular/angular-cli/issues/5213#issuecomment-284783844) so this is what I did, this time I got no error message saying 'hey can't resolve blablabla' but it simply don't use the font.
+ I can put whatever I want like '/assets/somethings/dumb' I will not get any error message.
I'll send you a picture of my tree so you can see better
https://ibb.co/KjkCNJ1
Here is my _typography.scss
#font-face {
font-family: 'murmure';
src: url('/assets/fonts/Le_Murmure-Regular_web.eot');
src: url('/assets/fonts/Le_Murmure-Regular_web.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/Le_Murmure-Regular_web.woff') format('woff'),
url('/assets/fonts/Le_Murmure-Regular_web.woff2') format('woff2'),
url('/assets/fonts/Le_Murmure-Regular_web.ttf') format('truetype'),
url('/assets/fonts/Le_Murmure-Regular_web.svg#svgFontName') format('svg');
font-weight: normal;
font-style: normal;
}
Which I import into my main.scss
// ABSTRACTS
#import './abstracts/functions';
#import './abstracts/mixins';
#import './abstracts/variables';
// BASE
#import './base/typography';
#import './base/base';
#import './base/animations';
#import './base/utilities';
// COMPONENTS
#import './components/input.scss';
// LAYOUTS
// PAGES
#import './screens/home';
which I import into my App.tsx
import '#assets/sass/main.scss';
Finally
I have a rule in my screens/_home.scss
.home {
&__title {
font-size: 500px;
font-family: "murmure", serif !important;
}
}
And the only thing that gets applied is the font-size
https://ibb.co/gt2Bvdz
Does someone have an idea how to make the fonts import ?
I'm really stuck into this :/
Have the impression I just tried every relative imports I could
I’ve started to play around with rollupjs and can’t seem to get it working with bootstrap-sass.
I'm getting the error when bundling -
🚨 (sass plugin) File to import not found or unreadable: bootstrap.
Parent style sheet: stdin
Snippets of my code below.
I've included a rollup-plugin-sass in my rollup.config.js.
// index.js
import './jquery-global.js'
import 'bootstrap-sass'
import './style.scss'
// jquery-global.js
import jquery from 'jquery'
window.jQuery = jquery
// style.scss
#import url('https://fonts.googleapis.com/css?family=Open+Sans');
#import 'bootstrap';
body {
font-family: 'Open Sans', sans-serif;
}
Try adding the extension so that rollup knows its a sass file, don't forget the absolute path:
#import './bootstrap.scss';
Anyway, rollup sass plugins do not know to parse #import statements..for now.