project - src - scss - base - typography.scss:
#font-face {
font-family: HankenGrotesk-Bold;
src: url('../../assets/fonts/HankenGrotesk-Bold.ttf');
font-weight: bold;
font-style:normal;
}
project - src - scss - abstracts - variables.scss
$HG-Bold: HankenGrotesk-Bold;
(also tried importing the typography.scss file here but didn't change)
project - src - scss - main.scss
#import "./base/reset.scss";
#import "./base/typography.scss";
#import "./abstracts/mixins.scss";
#import "./abstracts/variables.scss";
h1 {
font-family: $HG-Bold;
}
Live SASS compiler compiles main.min.css into:
project - src - css - main.min.css
Import statement in the app that I want to use it for:
import "./css/main.min.css";
I managed to fix it. Instead of
src: url('../../assets/fonts/HankenGrotesk-Bold.ttf');
I had to use this
src: url('.././assets/fonts/HankenGrotesk-Bold.ttf');
Also, converting to .woff and redoing my links to the main.scss file solved the issue.
Related
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.
What am I doing wrong here?
I am using less#3.8.1
A.css (css file that imports from url)
#import url('https://fonts.googleapis.com/css?family=Source Sans Pro:300,400,600,700,400italic,700italic&subset=latin');
App.less (less file that imports A.css)
#import (css) './A.css';
with webpack build, it tries to load
./https://fonts.googleapis.com/css?family=Source Sans Pro:300,400,600,700,400italic,700italic&subset=latin
instead of the css from url.
Stack:
#import url('https://fonts.googleapis.com/css?family=Source Sans Pro:300,400,600,700,400italic,700italic&subset=latin');
^
Can't resolve './https://fonts.googleapis.com/css?family=Source Sans Pro:300,400,600,700,400italic,700italic&subset=latin' in ...
Summary
A.Less - imports -> B.css - (B.css uses import via url) -> Not working
Less does not automatically switch to a CSS import as a fallback anymore. Try this:
#import (css) url('https://fonts.googleapis.com/css?family=Source Sans Pro:300,400,600,700,400italic,700italic&subset=latin');
To import the CSS without it being processed
#import (inline) './A.css';
or treat the CSS as a directive and import and compile the CSS as Less
#import (less) './A.css';
I'm trying to import a web font using a sass mixin with the following extensions, .eot, .woff, .ttf
Here are the fonts file location.
For some reason the font is not rendering? I'm unsure why.
Here is my SASS mixin:
#mixin font-face($font-family, $file-path) {
#font-face {
font-family: $font-family;
src: url('#{$file-path}.eot');
src: url('#{$file-path}.woff');
src: url('#{$file-path}.ttf');
}
}
Usage: #include font-face(Roboto-Regular, '../../assets/fonts/Roboto-Regular');
This is a create-react-app. I'm using sass along with my component.
See here for folder structure as the compiled .css sits within the component folder.
Try #include font-face(Roboto-Regular, '../assets/fonts/Roboto-Regular');
as 'assets' is sibling of 'components' folder and generated 'compiled.css' is inside 'components' folder.
I'm using the following line in scss:
#import url(https://fonts.googleapis.com/css?family=Montserrat:300,700);
Which gets compiled to css without errors to... exactly the same:
#import url(https://fonts.googleapis.com/css?family=Montserrat:300,700);
But it should get compiled to:
/* vietnamese */
#font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 300;
etc...
I'm using gulp sass to compile my scss, which is based on libsass. It says here that my syntax is correct. Why isn't this working?
This is in fact expected behaviour. Quoting the Sass docs:
#import takes a filename to import. By default, it looks for a Sass
file to import directly, but there are a few circumstances under which
it will compile to a CSS #import rule:
If the file’s extension is .css.
If the filename begins with http://.
If the filename is a url().
If the #import has any media queries.
In other words: Sass does not integrate the css from google fonts directly into your css file. Instead, at runtime, the css import directive will resolve the link. Google responds differently depending on your browser by the way.
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;