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.
Related
Im new to SCSS and im trying to load a local font to my SCSS file.
This works perfectly fine in a CSS file but in a SCSS file it does not give anything, not even an error:
#font-face {
font-family: "Cairo";
font-weight: 400;
font-style: normal;
src: url(./assets/Fonts/Cairo/CairoBlock-Regular.ttf);
}
The css and scss files are both located in the same directory so the path should be same. What am I doing wrong?
If you want to have your fonts loaded properly, you need to have them linked to your page somehow at some point. Hence why putting your SCSS files into the css property is probably the way to go.
nuxt.config.js
export default {
// Global CSS: https://go.nuxtjs.dev/config-css
css: ['put-your-files-here']
}
Otherwise, here is how to load some fonts properly with Nuxt.
I'm using the open-iconic library that comes with the default Blazor template in Visual Studio.
It's referenced in the css file #import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
I added some custom ttf fonts to my root folder. When referencing them in the css file like this:
#font-face {
font-family: ALittlePot;
src: url('../fonts/ALittlePot.ttf') format('truetype');
}
then the open-iconic icons disappear. I even tried removing the content and just putting #font-face { } the same thing happened. It obviously has something to do with using #font-Face.
I tried adding my font using #import url('../fonts/ALittlePot.ttf'); but then the font didn't render.
Where am I going wrong?
My project contains the following :
A balloon JS widget with a hand-coded SCSS file common/balloon/luciad-balloon.scss :
...
.lcdClose {
...
background-image: url("close-icon-selected.png");
}
.lcdClose:hover {
...
background-image: url("close-icon.png");
}
An icon font with a generated CSS file resources/font/luciad/style.css :
#font-face {
font-family: 'LuciadRIA';
src:
url('fonts/LuciadRIA.ttf?25o3wd') format('truetype'),
url('fonts/LuciadRIA.woff?25o3wd') format('woff'),
url('fonts/LuciadRIA.svg?25o3wd#LuciadRIA') format('svg');
font-weight: normal;
font-style: normal;
}
...
I'm now creating a theme file template/css/sample-single.scss. This theme includes several components, including the two components I mentioned.
Unfortunatelty, I'm not able to do this :
#import "../../resources/font/luciad/style";
#import "../../common/balloon/luciad-balloon";
Considering a CSS import resolves the URL files relative to the file they are found in and SCSS does not adjust the URL after embedding it into sample-single.scss, the URL is still relative to the imported file and thus incorrect. This behavior is confusing, because I would expect SCSS imports to behave the same as CSS imports in this regard.
I could replace #import "../../resources/font/luciad/style" with #import "../../resources/font/luciad/style.css", considering this is a css file. Because the file is now referenced as an external file instead of embedded, this solves the issue for that particular file. However, I'd rather avoid external dependencies and prefer to embed everything in my sample-single.css.
And for #import "../../common/balloon/luciad-balloon", I do not have that option. Considering this is an SCSS file, I can not use this as an external reference. I suppose I could fix this issue by using absolute paths, but this reduces the reusability of this component. It prohibits using this component across different projects with different folder structures or server configs.
Is there a way I can include common/balloon/luciad-balloon.scss & resources/font/luciad/style.css into template/css/sample-single.scss without having to rewrite the URLs in their property values to absolute paths?
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;
Sass placeholders are hoisted to the top of compiled stylesheets. I'd like to harness this to force any #font-face declarations to the top of my stylesheets (before any other compiled placeholders).
But when I try to do this:
%font-face {
font-family: 'FontName';
src:url('fonts/FontName.eot');
// other font files
}
#font-face {
#extend %font-face;
}
Sass gives me this error: Extend directives may only be used within rules.
Does anyone know a way to make Sass placeholders work with #font-face or a workaround that will have the same result?
You should use a mixin to handle the font-face import. It isn't going to work with a placeholder.
#include font-face;