I created a react project using create-react-app, and am working with this folder structure:
src/
Components/
Menu/
Menu.scss
Global/
fonts/
myfont.ttf
etc...
myfont.scss
In Menu.scss, I import using #import '../../Global/myfont';.
In myfont.scss, I include the font face:
#font-face {
font-family: 'myfont';
src: url('./fonts/myfont.ttf');
...
font-weight: normal;
font-style: normal;
}
I get "Error: Module not found".
If, for testing, I change the path to src: url('../../Global/fonts/myfont.ttf');, everything works.
Is there a way to set the URL path so it works regardless of where it is imported from?
I suggest you make a "base" scss file, where you write/import your fonts, icons, and other website-wide components, like header, footer etc. Then you import that base.scss file in each of your page's css.
base.scss:
$font-path: "../../Global/fonts" !default;
#font-face{
src: url('#{$font-path}/myfont.ttf');
...
}
...
And in each page, add:
#import "base;
Related
i have a font-awesome CSS-Fille which i load in the footer of my website. In the CSS File the fonts are loaded kike this:
font-display:swap;src:url(../webfonts/fa-brands-400.eot);src:url(../webfonts/fa-brands-400.eot?#iefix)
format("embedded-opentype"),url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-
brands-400.woff) format("woff"),url(../webfonts/fa-brands-400.ttf)......
not i look for an solution to preload these fonts. Is there an easy way to do that?
Not sure if thats what you mean, but you can define a font-face in a seperate css file, e.g.:
#font-face {
font-family: faBrands;
font-weight: 400;
src: url('/webfonts/fa-brands-400.eot');
}
#font-face {
font-family: faBrands;
font-weight: 400;
src: url('/webfonts/fa-brands-500.eot');
}
Assuming the folder webfonts is under public, you can then write in a css file:
font-family: faBrands;
Just make sure to import the font face css file first.
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
My directory structure is
-app
-main.css
-assets
-Roboto
-roboto-font.css
-Roboto font files...
But when I use
#import url("./assets/Roboto/roboto-font.css");
in my main.css file but the font doesn't apply to any elements. This is the contents of roboto-font.css
#font-face {
font-family: "Roboto";
font-style: normal;
font-weight: 100;
src: url(./Roboto-Thin.ttf) format('tff');
}
You can import the font directly from google by adding this
#import url('https://fonts.googleapis.com/css?family=Roboto');
And using it with this font-family: 'Roboto', sans-serif;
You can find more details here https://fonts.google.com/specimen/Roboto?selection.family=Roboto
When you use a path starting with a ./ this means the path should start from the current directory. If your main.css file is in the app folder, it will import the roboto-font.css file correctly.
However, the roboto-font.css file is trying to import the font file from the path ./assets/Roboto/Roboto-Thin.ttf while roboto-font.css itself is already inside assets/Roboto. You should remove the assets/Roboto from this url() property as all font files are already in the same directory as this stylesheet. Try using url(./Roboto-Thin.ttf).
Also try to use appropriate web font formats, or just import from Google as suggested by #Radu.
I'm trying to import a custom icon font called "Picons Thin" into my Ionic project. I put the font formats titled piconsthin-webfont.ttf, piconsthin-webfont.woff, and piconsthin-webfont.woff2 into the www/assets/fonts folder, and created a piconsthin-webfont.scss file in the same folder which contains the following:
$piconsthin-webfont-font-path: $font-path !default;
#font-face {
font-family: "piconsthin";
src: local("piconsthin"),
url('#{$piconsthin-webfont-font-path}/piconsthin-webfont.woff2') format('woff2'),
url('#{$piconsthin-webfont-font-path}/piconsthin-webfont.woff') format('woff'),
url('#{$piconsthin-webfont-font-path}/piconsthin-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
I then went to variables.scss and saw the fonts section at the bottom that was importing roboto and noto-sans, and assumed this was calling the scss files in the fonts folder. So I added my own line:
#import "piconsthin-webfont";
But that just gives an error in Ionic that says "File to import not found or unreadable: piconsthin-webfont".
I've tried just putting the picons #font-face css into one of the other font scss files that I knew could be found, and I've tried putting the #font-face css into the main src/app/app.scss file, but nothing I do makes the font show up on the front end... what am I doing wrong?? What step am I missing??
Put your fonts in the source folder (src/assets/fonts/CHESSMASTER8000_BOLD.ttf) then connect it in the variables.scss file like this
#font-face {
font-family: "Chessmaster-8000";
font-style: bold;
src: url('../assets/fonts/CHESSMASTER8000_BOLD.woff');
}
We are using FontAwesome with Bootstrap. However, when we try to use FA with our custom minifier, it attempts to load the fonts from a relative path, which returns a 404, due to the way the minified URL structure is setup.
So we figured the best way to fix this was to add an additional CSS file to our minify list that would override the #font-face src URLs that FontAwesome's font uses. We basically just copied the #font-face definition from FontAwesome, and specified absolute URL locations.
However, now what happens is our correct URLs load the fonts AND the originally specified URLs from the FontAwesome CSS are attempted (resulting in the same 404 errors as before).
Are we doing something wrong, or is there really no way to override the #font-face src URLs so that 'upstream' definitions are totally ignored?
Simple override the font-family of the base CSS class:
.fa {
font-family: 'FontAwesome2' !important;
}
Then, paste/include and edit the font definition:
#font-face {
font-family: 'FontAwesome2';
src: url('//host.domain/yourpath/fontawesome-webfont.eot?v=3.1.0');
...
font-style: normal;
}
UPDATE: The "solution" below did not actually work... we did in fact have a typo, but in subsequent testing, this was still not the root cause, and we are still facing the issue.
The solution is to be VERY CAREFUL when overriding the #font-face, making sure to provide all of the same formats used in the original #font-face. Otherwise it appears the browser sees it as a different definition, and will try to download files referenced in both, rather than overriding it.
So here is the definition in FontAwesome's CSS, which is referenced first.
#font-face {
font-family: 'FontAwesome';
src: url('../font/fontawesome-webfont.eot?v=3.1.0');
src: url('../font/fontawesome-webfont.eot?#iefix&v=3.1.0') format('embedded-opentype'),
url('../font/fontawesome-webfont.woff?v=3.1.0') format('woff'),
url('../font/fontawesome-webfont.ttf?v=3.1.0') format('truetype'),
url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.1.0') format('svg');
font-weight: normal;
font-style: normal;
}
And when we tried to override, we accidentally dropped the "format('svg')" definition:
#font-face {
font-family: 'FontAwesome';
src: url('//ourdomain.com/includes/font-awesome-3.1.x/font/fontawesome-webfont.eot?v=3.0.1');
src: url('//ourdomain.com/includes/font-awesome-3.1.x/font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
url('//ourdomain.com/includes/font-awesome-3.1.x/font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
url('//ourdomain.com/includes/font-awesome-3.1.x/font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
font-weight: normal;
font-style: normal;
}
Once we added the format('truetype') definition, we no longer experienced the additional hits that had resulted in 404s.
If you are using SCSS you likely have a main scss file in your src folder which contains an #import "font-awesome" that imports font-awesome from node_modules/font-awesome/scss/font-awesome.scss.
You can duplicate this font-awesome.scss file into your src folder and customise it. Then you can also duplicate font-awesome/scss/path.scss into your src folder too and customise that.
in main.scss (or whatever your initial scss file is called)
#import "path/custom-fontawesome";
in custom-fontawesome.scss
#import "~font-awesome/scss/variables";
#import "~font-awesome/scss/mixins";
#import "custom-fontawesome-path";
#import "~font-awesome/scss/core";
#import "~font-awesome/scss/larger";
#import "~font-awesome/scss/fixed-width";
#import "~font-awesome/scss/list";
#import "~font-awesome/scss/bordered-pulled";
#import "~font-awesome/scss/animated";
#import "~font-awesome/scss/rotated-flipped";
#import "~font-awesome/scss/stacked";
#import "~font-awesome/scss/icons";
#import "~font-awesome/scss/screen-reader";
in custom-fontawesome-path.scss
$fa-font-path: "../fonts-path";
#font-face {
font-family: 'FontAwesome';
src: url('#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2');
font-weight: normal;
font-style: normal;
}
You can customise the path to the font files by setting the $fa-font-path: "../fonts-path";