can't use #font-face SCSS local folder - css

I have two "ttf" Font files that I have to use with Sass - SCSS and I can't use it directly from the folder
My _mixin.scss file:
#mixin font-face($font-name, $font-path, $font-weight, $font-style) {
#font-face {
font-family: "Lato-Bold";
src: url("../../css/fonts/Lato/Lato-Bold.ttf") format('truetype');
font-weight: 700;
font-style: bold;
}
}
This is correct?
this give me an ERROR when compile..it's my first time using font-face and ttf files. This is a project, so I can't add other fonts, I have to use it like that, can you help me?
How can I use this mixin, how to include in my font-family in my CSS and/or Html?
I'm trying to write this in my _typography.scss file and this give an error":
#include font-face("Lato-Bold", "../../css/fonts/Lato/Lato-Bold", 700, bold);
ERROR in ./src/scss/main.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/lib/loader.js!./src/scss/main.scss)
Module not found: Error: Can't resolve '../../css/fonts/Lato/Lato-Bold.ttf' in '/Users/****/Desktop/****/src/scss'
# ./src/scss/main.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/lib/loader.js!./src/scss/main.scss)
Ps: I'm using webpack.config.js | webpack-dev-server and compiling sass with --watch
Thank you for your help!


try this in your mixin
#mixin font-face($font-name, $font-path, $font-weight, $font-style) {
#font-face {
font-family: $font-name;
src: url(#{$font-path});
font-weight: $font-weight;
font-style: $font-style;
}
}

Related

Using font awesome ttf with scss

I'm trying to use font awesome with scss.
#font-face {
font-family: 'awesome';
src: url('../../fonts/font-awesome/fa-light-300.ttf') format('ttf');
}
the path seems to be correct but i'm getting errors:
Failed to compile.
./src/assets/styles/main.scss
(./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-3-1!./node_modules/postcss-loader/src??ref--8-oneOf-3-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-3-3!./src/assets/styles/main.scss)
Module not found: Error: Can't resolve
'../../fonts/font-awesome/fa-light-300.ttf' in
'C:\Users\idogo\Desktop\‏‏תיקיה חדשה\sprint-4\src\assets\styles'
I hope you can help me,
thanks

Appernetly all i needed is to add ~# at the begining of the path.
#font-face {
font-family: 'awesome';
src: url('~#/fonts/font-awesome/fa-light-300.ttf') format('ttf');
}

Add an external font in css using file of type .File

Is it possible to add an external font in css using file of type .File?
Here is what I tried with no luck:
#font-face {
font-family: AvenirHeavy;
src: url("fonts\AvenirLT\AvenirLT-Heavy.tff");
}
.applyFont {
font-family: AvenirHeavy;
}
Also I tried this:
#font-face {
font-family: AvenirHeavy;
src: url("fonts\AvenirLT\AvenirLT-Heavy.File");
}
.applyFont {
font-family: AvenirHeavy;
}
Here are the details about the font:
And for some reasons ide (WebStorm) does not know about font inclusion and tells me that it Cannot resolve file:
The first four characters are:
NUL NUL NUL NUL.

How to include fonts #font-face

I have downloaded a font libertaion_sans that is keep inside a Wordpress theme under a font folder like this \fonts\liberation_sans
I saw lots of videos on Youtube and some links on StackOverflow, but I failed to include them correctly.
If I am not wrong we have to define these fonts in style.css before actually using this:
font-family
Can some one please help me.
Currently,
I am interested in using them →
font-family: LiberationSans-Bold;

Something like this => In your css file
#font-face {
font-family: 'YourFontName'; /*a name to be used later*/
src: url('/fonts/font.ttf'); /*URL to font*/
}
And use like font-family: 'YourFontName' in any css rule.
Cheers!
PD: Create each separatly.
#font-face {
font-family: 'LS-bold'; /*a name to be used later*/
src: url('/fonts/ls-bold.ttf'); /*URL to font*/
}
#font-face {
font-family: 'LS-Regular'; /*a name to be used later*/
src: url('/fonts/ls-regular.ttf'); /*URL to font*/
}
..etc...
And if you want to use the bold font, you have to font-family:'LS-bold'.
Understood?

CSS not recognizing one my linked fonts

In CSS, I'm linking to two local fonts. Only one is being recognized currently and I really have no idea what I'm doing wrong.
#font-face {
font-family: 'The Rainmaker';
src: url('The Rainmaker.otf');
}
#font-face {
font-family: 'Timeline';
src: url('Timeline.ttf');
}

Css Font won't import online

i have a imported css font with the following code:
#font-face
{
font-family: font;
src: url('myriad pro/myriad pro/MyriadWebPro.ttf'),
url('myriad pro/myriad pro/MyriadWebPro.ttf');
}
The problem is that online doesn't work but locally works.What is causeing the problem

Try renaming the file path, for example ---> "myriad-pro/myriad-pro/MyriadWebPro.ttf". Is your css file in the folder with the font. Check if your path is right.
P.S: Remove the bottom url (that on the third line.). When I use font-face I use only two. Example: font-family: Consolas;
src: url('Consolas.ttf');

#font-face
{
font-family: MyriadPro; /* just declares a font in your stylesheet */
src: url('myriad pro/myriad pro/MyriadWebPro.ttf'),
url('myriad pro/myriad pro/MyriadWebPro.ttf');
}
body
{
/* now you need to use it */
font-family: MyriadPro, sans-serif;
/* so name it something useful, instead of just "font" */
}
answering old questions
for those who come looking after

Resources