Using font awesome ttf with scss - css

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');
}

Related

Can't import fontawesome-webfont typography

I am trying to import a font (fontawesome version 4.4.0's webfont) I have located in a directory called 'fonts' inside my project:
I have read several StackOverflow posts and I'm trying to import it using #font-face inside css:
#font-face {
font-family: 'MyWebFont';
src: url('../fonts/fontawesome-webfont.eot');
src: url('../fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/fontawesome-webfont.woff2') format('woff2'),
url('../fonts/fontawesome-webfont.woff') format('woff'),
url('../fonts/fontawesome-webfont.ttf') format('truetype'),
url('../fonts/fontawesome-webfont.svg#svgFontName') format('svg');
}
And then using it in the body:
body {
margin: 0;
padding: 0;
font-family: 'MyWebFont';
}
However, it's not loading:
Any idea on why is this happening? I can actually see the expected font inside the files...
Thank you in advance.
Edit:
In the network tab in my browser's developer tools I can see the follwing info:
.
In the 'Response' tab inside Network, I get "failed to load response data". Maybe the problem is there?
Edit2:
Other fonts are being loaded just fine. For example, 'Raleway' (which is very similar, but not exactly the same. Notice the difference in the 'l'):
I am trying to get this font (I think it's Adobe's 'Proxima Nova', the same used in Fontawesome's site, that's the reason of the name)...
I think the problem is that font awesome is only for icons, not text.
If you go to fontawesome.com and remove this line of code:
.fa, .fas {
font-family: "Font Awesome 5 Pro";
}
You will see all the icons that have the class fa and fas will be just a rectangle.
You also need to give every element other fonts like:
.fab {
font-family: "Font Awesome 5 Brands";
}
.fa, .far, .fas {
font-family: "Font Awesome 5 Free";
}

can't use #font-face SCSS local folder

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;
}
}

Custom css font isn't loading

here is the page where I want to add custom font http://pgkweb.ru/temp/1/index.html
So the fonts are:
http://pgkweb.ru/temp/1/include/MyriadProCondRegular/MyriadProCondRegular.ttf
http://pgkweb.ru/temp/1/include/MyriadProCondRegular/MyriadProCondRegular.woff
http://pgkweb.ru/temp/1/include/MyriadProCondRegular/MyriadProCondRegular.otf
http://pgkweb.ru/temp/1/include/MyriadProCondRegular/MyriadPro-Cond.eot
And I call them from css (http://pgkweb.ru/temp/1/include/style.css):
/*FONTS*/
#font-face {
font-family: MyriadProCond;
src: url(include/MyriadProCondRegular/MyriadProCondRegular.ttf); /* Путь к файлу со шрифтом */
src: url(include/MyriadProCondRegular/MyriadProCondRegular.woff);
src: url(include/MyriadProCondRegular/MyriadProCondRegular.otf);
src: url(include/MyriadProCondRegular/MyriadPro-Cond.eot);
}
*, body, p,h3,h4 {
font-family: 'MyriadProCond', Arial, sans-serif;
color: #fff;
}
But as I see in FireFox code explorer it doesn't works (line-through). But why?
Your webfonts are inside the "include" folder, as is the stylesheet, i.e. they are both in the same folder, so you have to erase the folder name from the file path in the links, like:
src: url("MyriadProCondRegular/MyriadProCondRegular.ttf");
instead of
src: url("include/MyriadProCondRegular/MyriadProCondRegular.ttf");
the same with all the other URLs
Seems like you are missing quotes around each url, the syntax is also a little off:
#font-face {
font-family: MyriadProCond;
src: url('include/MyriadProCondRegular/MyriadPro-Cond.eot');
src: url('include/MyriadProCondRegular/MyriadProCondRegular.woff') format('woff'), /* Путь к файлу со шрифтом */
url('include/MyriadProCondRegular/MyriadProCondRegular.ttf') format('truetype'),
url('include/MyriadProCondRegular/MyriadProCondRegular.otf') format('otf');
}
See here: https://css-tricks.com/snippets/css/using-font-face/
If this doesn't work, check that the URLs are correct and the fonts are being downloaded (no 404 errors in the network tab).

Less compiler prefixes url with ../ on his own

I have a problem compiling bootstrap less into css.
I am using Visual Studio with Web Compiler extension.
https://visualstudiogallery.msdn.microsoft.com/3b329021-cd7a-4a01-86fc-714c2d05bb6c
The following variables are defined:
#icon-font-path: "fonts/";
#icon-font-name: "glyphicons-halflings-regular";
This is the part that uses variables:
#font-face {
font-family: 'Glyphicons Halflings';
src: url('#{icon-font-path}#{icon-font-name}.eot');
}
This is the resulting css:
#font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
}
The problem is that the url gets prefixed with ../.
What is causing this, how can I get url without prefix - fonts/glyphicons-halflings-regular.eot?
I have found the solution, so I am posting here if someone encounters the same problem.
Edit the compilerconfig.json and set relativeUrls option to false.
If not specified, the default value appears to be true.
{
"inputFile": "Bootstrap/less/bootstrap.less",
"outputFile": "Bootstrap/less/output/bootstrap.css",
"options": { "relativeUrls": false }
}
This appears to be equivalent to lessc --relative-urls when using Web Compiler extension.

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');
}

Resources