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
Related
I would like to preload a custom font. I'm using rails 6 with webpack.
In config/_fonts.scss :
#font-face {
font-family: 'customfont';
src: font-url('customfont.eot?81236734');
src: font-url('customfont.eot?81236734#iefix') format('embedded-opentype'),
font-url('customfont.woff2?81236734') format('woff2'),
font-weight: normal;
font-style: normal;
font-display: swap;
}
I import this font in my application scss :
#import "config/index";
But I would like to preload this font. What's the best pratice to do that ?
If I am not mistaken you have to add a link tag in head of the view as per this article : https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
Then for the href use the asset_pack_url helper in order to point to the right file.
Also be careful the asset_path_url needs to point to the folder where your compiled asset resides without mentionning "public/packs"
Then you probably have to use something like <%= asseet_pack_url 'media/fonts/my-font.woff' %> or something like that
(Also I am considering you are using Webpack to deliver images/css and fonts. If you are using the asdset pipeline just use the usual helpers)
Recently had same question. Here is what I did for Rails 6 with webpack.
Per my understanding webpack produces manifest.json which you can find in public directory of your app (it is configured in webpacker.yml).
When you open manifest.json you should also see references for fonts.
In my manifest it appeared similar to the following:
"media/images/some-font.woff2": "/packs/media/images/4d419d560889218c146f.woff2"
Now when you know that the pack path is available, it is easy to construct preloading in head section (example in haml):
= preload_link_tag(asset_pack_path('media/images/some-font.woff2'))
I have added font and tried to make mixin (also tried as varible, result is the same) to use it.
All sass files are connected through "style.sass"
#import '_interface'
#import '_fonts'
file "_fonts.sass", where I added font and made mixin
#font-face
font-family: 'Museo Sans Light'
src: url('../fonts/MuseoSansCyrl-300.eot')
src: url('../fonts/MuseoSansCyrl-300.eot?#iefix') format('embedded-opentype'),
url('../fonts/MuseoSansCyrl-300.woff') format('woff'), url('../fonts/MuseoSansCyrl-300.ttf')
format('truetype')
font-weight: normal
font-style: normal
#mixin reg
font-family: 'Museo Sans Light'
font-weight: 300
Then I tried to use it into "_interface.sass" for body tag:
body
box-sizing: border-box
color: $text-color
+reg
In the result I caught sass exception "no mixin named reg"
I will very grateful, If someone help!
Thank You.
SASS files are processed and loaded in an order-dependent way, so the file in which a mixin (or variable or function, etc.) is declared must be imported before that mixin is used in other files.
In your example, your mixin reg is declared in _fonts and used in _interface. For SASS to recognize and load reg, _fonts must be imported. After _fonts is imported, all subsequently loaded files, like _interface, will have access to reg.
A common pattern of working with shared SASS mixins, variables, or functions, is to create and store them in a single place (e.g. a file named _mixins, _vars, _functions) which you then import in your main SASS stylesheet before individual stylesheet modules. That way, you know that everything you need is already declared and available.
That might look something like this:
#import "_vars"; // Everything below knows about contents of _vars
#import "_mixins"; // Everything below knows about contents of _mixins
// These files can use everything above!
#import "_fileThatUsesSharedVariables";
#import "_fileThatUsesMixins";
#import "_fileThatUsesMixinsAndVariables"; // This last file can use everything above it!
I want to add AvantGard font to one paragraph in my React app, but it seems the font has no effect and I don't know why, here is how I am adding it:
I keep it as a ttf file in my assets folder.
I have global scss file index.css and I declare it there like this:
#font-face {
font-family: 'AvantGard';
font-style: normal;
src: url('./assets/fonts/avant_gartt/AvantGard.ttf');
}
I also have a variables.scss in which I keep it like this:
$avantGard: 'AvantGuard';
I import my variables in my component's css like this:
#import './variables.scss';
and then I just set the font-size of my paragraph:
font-family: $avantGard;
Does anyone have any idea why my font does not work? The rest of my fonts work the same way, but not this one.
Check your spelling on number 3.
AvantGard or AvantGuard?
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');
}
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;