Am writing down a template with use of compass sass here the font-mixin makes some problem by without setting web font.And my config file is like
http_path = "/"
css_dir = "resources/stylesheets"
sass_dir = "resources/stylesheets"
images_dir = "resources/images"
javascripts_dir = "resources/js"
and then by usage of font mixin generated output is
#font-face {
font-family: "cabinregular";
src: url('resources/stylesheets/fonts/cabin-regular.eot?#iefix') format('embedded-
opentype'), url('resources/stylesheets/fonts/cabin-regular.ttf') format('truetype'),
url('resources/stylesheets/fonts/cabin-regular.woff') format('woff');
}
The path was correct but font won't apply while am running the html.But if i specify the http path like
http_path="/somename/"
it applies. then why it won't works without specifying the http_path..?
Bringing src: url("../fonts/cabin-regular?#iefix"); before the main src make working fine
#font-face {
font-family: 'cabinregular';
src: url("../fonts/cabin-regular?#iefix");
src: url("../fonts/cabin-regular?#iefix") format("embedded-opentype"), url("../fonts/cabin-regular") format("woff"), url("../fonts/cabin-regular") format("truetype"), url("../fonts/cabin-regular.svg#cabin-regular") format("svg");
font-weight: normal;
font-style: normal;
}
Related
I am using nuxt-vite in a SSR nuxt project, here is my code
nuxt.config.js
module.exports = {
css: [
'~/assets/fonts.scss',
]
}
I want to use #mdi/font in my project, and here is where it located in node_modules:
First, I try to import the css directly:
#import '#mdi/font/css/materialdesignicons.css
But the browser can not find the fonts files
Then, I try to load the raw scss variables just like what I did when using webpack whick works without any issues.
#import "#mdi/font/scss/variables";
#import "#mdi/font/scss/functions";
#font-face {
font-family: '#{$mdi-font-name}';
src: url('#mdi/font/fonts/#{$mdi-filename}-webfont.eot?v=#{$mdi-version}');
src: url('#mdi/font/fonts/#{$mdi-filename}-webfont.eot?#iefix&v=#{$mdi-version}') format('embedded-opentype'),
url('#mdi/font/fonts/#{$mdi-filename}-webfont.woff2?v=#{$mdi-version}') format('woff2'),
url('#mdi/font/fonts/#{$mdi-filename}-webfont.woff?v=#{$mdi-version}') format('woff'),
url('#mdi/font/fonts/#{$mdi-filename}-webfont.ttf?v=#{$mdi-version}') format('truetype');
font-weight: normal;
font-style: normal;
}
#import "#mdi/font/scss/core";
#import "#mdi/font/scss/icons";
#import "#mdi/font/scss/extras";
#import "#mdi/font/scss/animated";
But the vite can not load the scss variables correctly:
How can I use the fonts in node_modules when using vite?
I googled it and read the doc but helped little.
Greate thanks to anyone help!
add this to nuxt.config.js
vite: {
css: {
preprocessorOptions: {
scss: {
additionalData: `#import "~/assets/styles/Variables.scss";\n#import "~/assets/styles/Mixins.scss";\n`
}
}
}
},
I am trying to skip a dependency loaded font (with url() ) to be exported.
I used ignore-loader module.
mix.webpackConfig({
module: {
rules: [
{
test: /context-menu-icons\.(eot|ttf|otf|woff|woff2)$/,
loader: 'ignore-loader'
}
]
}
});
The issue is it produce empty files. The behavior I am expecting is to not output these files at all.
The reason for this is this in a dependency in node_modules
#font-face {
font-family: '#{$context-menu-icon-font-name}';
src: url('#{$context-menu-icon-font-path}#{$context-menu-icon-font-name}.eot?#{$context-menu-icons-cachebust}');
src: url('#{$context-menu-icon-font-path}#{$context-menu-icon-font-name}.eot?#{$context-menu-icons-cachebust}#iefix') format('embedded-opentype'),
url('#{$context-menu-icon-font-path}#{$context-menu-icon-font-name}.woff2?#{$context-menu-icons-cachebust}') format('woff2'),
url('#{$context-menu-icon-font-path}#{$context-menu-icon-font-name}.woff?#{$context-menu-icons-cachebust}') format('woff'),
url('#{$context-menu-icon-font-path}#{$context-menu-icon-font-name}.ttf?#{$context-menu-icons-cachebust}') format('truetype');
font-weight: normal;
font-style: normal;
}
Is there a way to just ignore these files from output / copy in my dist folder ?
I could not find a solution because, font-face is loaded from a scss file.
So using options with file-loader to prevent emitting files won't work.
There would be a string in these file with module.exports = ...
In all cases the font files would be emmited empty or not.
So I used clean-webpack-plugin with these options
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
...
mix.webpackConfig({
plugins: [
new CleanWebpackPlugin({
// dry: true,
verbose: true,
// Automatically remove all unused webpack assets on rebuild
cleanStaleWebpackAssets: false,
// Do not allow removal of current webpack assets
protectWebpackAssets: false,
cleanOnceBeforeBuildPatterns: [
'**/*', // clean all
'!views','!views/**/*', // ignore views folder
'!lang','!lang/**/*', // ignore lang folder
],
cleanAfterEveryBuildPatterns: [
'fonts/vendor' // remove fonts/vendor folder after build and watch
],
}),
]
});
...
While trying to have my SCSS import some fonts I encountered the following:
I exactly copied the docs from the compass website, but when the CSS is being compiled Compass adds random numbers behind my src URLs. The SCSS code I wrote and the resulting CSS looks like this
SCSS
#include font-face("NexaBold", font-files("nexa_bold-webfont.woff", "nexa_bold-webfont.ttf", "nexa_bold-webfont.svg", "nexa_bold-webfont.eot"));
Resulting CSS
#font-face {
font-family: "NexaBold";
src: url('/fonts/nexa_bold-webfont.woff?1417439024') format('woff'), url('/fonts/nexa_bold-webfont.ttf?1417439024') format('truetype'), url('/fonts/nexa_bold-webfont.svg?1417439024') format('svg'), url('/fonts/nexa_bold-webfont.eot?1417439024') format('embedded-opentype');
}
Thanks!
Random numbers were added because browser cache fonts base on url, then these random numbers cause every time you compile your codes and put it in your html, it download fonts again.
I have Visual Studio 2013 and compile your code with sass and the result is:
#font-face {
font-family: "NexaBold";
src: font-files("nexa_bold-webfont.woff", "nexa_bold-webfont.ttf", "nexa_bold-webfont.svg", "nexa_bold-webfont.eot"); }
and here is my compass source for font-face mixin:
#mixin font-face(
$name,
$font-files,
$eot: false,
$weight: false,
$style: false
) {
$iefont: unquote("#{$eot}?#iefix");
#font-face {
font-family: quote($name);
#if $eot {
src: font-url($eot);
$font-files: font-url($iefont) unquote("format('eot')"), $font-files;
}
src: $font-files;
#if $weight {
font-weight: $weight;
}
#if $style {
font-style: $style;
}
}
}
if you look my compass version doesn't add any random number at the end of file path.
I myself suggest you to use font-face without compass, use code below:
#font-face {
font-family: 'IranSans';
src: url('/css/fonts/IranSans.eot'); /* IE9 Compat Modes */
src: url('/css/fonts/IranSans.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/css/fonts/IranSans.woff') format('woff'), /* Modern Browsers */
url('/css/fonts/IranSans.ttf') format('truetype'), /* Safari, Android, iOS */
url('/css/fonts/IranSans.svg') format('svg'); /* Legacy iOS */
}
Just add this line to your config.rb:
asset_cache_buster :none
When defining a custom font with the webfont loader (repo here), we basically define the families loaded and the related URLs:
WebFont.load({
custom: {
families : [ "My font" ],
urls : [ "assets/css/fonts.css" ]
}
});
But, it seems the loader don't detect multiple weight defined for the same font in the css file:
#font-face {
font-family: 'My font';
src: url("../fonts/my-font.eot");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'My font';
src: url("../fonts/my-font.eot");
font-weight: bold;
font-style: normal;
}
And so, the loader trigger the active event when the first font is loaded. This can be confirmed if we check the fontactive event who'll only be triggered once:
WebFont.load({
fontactive: function( fontname, fontdescription ) {
console.log( fontname, fontdescription );
// Only trigger once `My font, n4`
}
});
So, is there a way tell the webfont loader there's multiple weight to get (a bit like their google webfonts interface)?
(A fix can be to use multiple names for each font weight, but that's not the solution I'm searching for here)
I'm one of the developers of the webfontloader. You are correct that the custom module does not support loading multiple variations. Luckily we recently added support for this, so if you upgrade your version of the webfontloader (or use the one on the Google CDN) you'll get support for it.
You can use it like:
WebFont.load({
custom: {
families: ['My Font', 'My Other Font:n4,i4,n7'],
urls: ['/fonts.css']
}
});
To load the 'n4', 'i4' and 'n7' variations of "My Other Font".
I am trying to use a Compass font-face mixin, which contains the inclusion of
*.eot?iefix
My app/assets/fonts contains all the font types needed, including .eot.
When I try to run assets:precompile the task fails saying something like:
webfont.eot?iefix isn't precompiled
Do you know the possible solution for this problem?
It runs with no error in case I have config.assets.compile = true, but as I've understood it's better not to use it on production.
You can do it with pure Scss too:
#font-face {
font-family: 'DroidSans';
src: url(font-path('DroidSans-webfont.eot'));
src: url(font-path('DroidSans-webfont.eot') + '?#iefix') format('embedded-opentype'),
url(font-path('DroidSans-webfont.woff')) format('woff'),
url(font-path('DroidSans-webfont.ttf')) format('truetype'),
url(font-path('DroidSans-webfont.svg') + '#DroidSansRegular') format('svg');
font-weight: normal;
font-style: normal;
}
I've just solved this problem with a little (supported) hack.
I've created a new css file font.css.erb and place #import "font" in the place of the #font-face declaration.
#font-face {
font-family: 'SketchBlockBold';
src: font_url('font/sketch_block-webfont.eot');
src: url('<%= asset_path('font/sketch_block-webfont.eot')+"?#iefix" %>') format('embedded-opentype'),
font_url('font/sketch_block-webfont.woff') format('woff'),
font_url('font/sketch_block-webfont.ttf') format('truetype'),
url('<%= asset_path('font/sketch_block-webfont.svg')+"#SketchBlockBold" %>') format('svg');
font-weight: normal;
font-style: normal;
}
Note the use of the asset path, and the concatenation of the special file endings.
Seems to be a known issue https://github.com/rails/rails/issues/3045
Using config.assets.compile = true for now.