I know some posts in the nuxt.js github repo cover this a bit, but I would like to know what is the correct way to use font-files in nuxt.js.
So far we had them in the /static/fonts directory, but other people use assets to store the font files.
What are the differences? Is one of the options better and if so, why?
Also there are different ways to include them.
Would a path like this be correct:
#font-face {
font-family: 'FontName';
font-weight: normal;
src: url('~static/fonts/font.file.eot'); /* IE9 Compat Mode */
src: url('~static/fonts/font.file.woff') format('woff'),
url('~static/fonts/font.file.otf') format('otf'),
url('~static/fonts/font.file.eot') format('eot');
}
Thanks for some clarification here :D.
cheers
J
it's very well explained on the official doc: https://nuxtjs.org/guide/assets/
assets\ is reserved for assets to be processed (eg. concat css with webpack)
static\ is useful to expose all static files from the root url (static\img\test.jpg => http://example.fr/img/test.jpg), without any process
Related
I'm using bootstrap-icons in my VueJS app. After loading the page, these errors appeared
Failed to decode downloaded font
OTS parsing error: invalid sfntVersion: 1008813135
for bootstrap-icons' .woff and .woff2 fonts.
Here is the font loading part in the bootstrap-icons.css file:
#font-face {
font-family: "bootstrap-icons";
src: url("./fonts/bootstrap-icons.woff2?856008caa5eb66df68595e734e59580d")
format("woff2"),
url("./fonts/bootstrap-icons.woff?856008caa5eb66df68595e734e59580d") format("woff");
}
Here is the import for bootstrap in my css file:
// Bootstrap
#import 'bootstrap';
#import '~bootstrap-icons/font/bootstrap-icons';
This error also happens on my production server, but with Font-Awesome, which working fine on my dev server.
Can you suggest any way to fix this, or where the source of the problem might be? I've searched the whole internet but still don't have any clue.
I've found the issue. It was my public folder that did not contain the fonts with the right path. I added the fonts to the folder with the path as specified in the error and all things works now.
P/S: This might be a temporary workaround, for if there are multiple icon packs and each requires a different font path, the build folder might get overloaded with tons of fonts folder. Would any one suggest a way to manage this problem?
I do not exactly know the solution to your problem but I did a little research and found this Link
There are numerous solutions on it, I hope one of those might help you.
Having issues with multiple .less files importing #font-face custom fonts which are local.
OPTION 1 - Doesn't work
#font-face is generated with .less in a mixin file called font.less one directory above.
#font-face {
font-family: 'custom-font';
src:
url("../fonts/client1/custom-font.woff2") format("woff2"),
url("../fonts/client1/custom-font.woff") format("woff")
}
The font-family is defined in another file or the can be the same mixin file.
#font_family_123: 'custom-font', cursive;
The .woff files are nested outside of scripts in correct path. I can also add google fonts and other hosted .woof files fine with this method. I have used relative and absolute paths, makes no difference..
OPTION 2 - Does work
If I was to include my #font-face and #font-family in a base style like "styles_default.less" everything works as expected and loads fine. Super simple.. Is there some way to separate when working with large amounts of custom fonts or perhaps this is not supported?
BTW using less-rhino 1.7.5
Best-
I am attempting to use Webpack 2 and Font Awesome in a Cordova application. The Cordova application generates a file structure like this:
app
config.xml
hooks
node_modules
package.json
platforms
plugins
webpack.config.js
www
(This naturally includes my NPM files and webpack configuration, for context. app is where I squirrel away the raw JSX source code).
The structure under www (which is where the compiled out web application should go), looks like this:
css
fonts
img
index.html
js
I created the fonts directory as a target for the webpack configuration. The problem that I am running into is that I can either have the fonts copied to some useful location under the root or I can have the filtered CSS correct, but not both.
For example, if I use an example like the one below:
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
loader: "file-loader?name=[name].[ext]&outputPath=www/fonts/&publicPath=/fonts/"
}
The files get placed under www, but the compiled source comes out strange.
#font-face {
font-family: 'FontAwesome';
src: url(/fonts/www/fonts/fontawesome-webfont.eot);
src: url(/fonts/www/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0) format('embedded-opentype'), url(/fonts/www/fonts/fontawesome-webfont.woff2) format('woff2'), url(/fonts/www/fonts/fontawesome-webfont.woff) format('woff'), url(/fonts/www/fonts/fontawesome-webfont.ttf) format('truetype'), url(/fonts/www/fonts/fontawesome-webfont.svg#fontawesomeregular) format('svg');
font-weight: normal;
font-style: normal;
}
I have yet to be able to find a happy medium with the file loader when trying to place fonts under www. The recommendations in How to configure font file output directory from font-awesome-webpack in webpack? and Can't load font-awesome with Webpack really have not gotten me anywhere.
The outputPath option in the file-loader is relative to your output directory and therefore will be included in the path. And publicPath just adds the given path to the beginning of the used paths, it basically means that the output directory will be located somewhere else on the server. This leaves the original path unchanged, since the structure within the directory must be unchanged.
To make it work as you described, you need to change how you handle the output directory. As you've already mentioned your output directory is www, that's where webpack should put everything. Therefore it makes sense to configure output.path to www.
output: {
path: path.resolve(__dirname, 'www'),
// Other output options
}
With this you don't need to specify www in every output name/path. For instance you might have done something along these lines: filename: 'www/bundle.js, this now becomes just filename: 'bundle.js'. Even though the result is the same, the concept behind it is different, because you just tell webpack where to put the output files, but only the filename itself is relevant for any processing, whereas the output directory is irrelevant.
Now you have to change the outputPath in the file-loader to fonts/ and without the publicPath you would get the following URL:
url(fonts/fontawesome-webfont.eot);
That's a relative path, and you probably want to make it a server-relative path. The only thing that is missing is the leading /, therefore you'd set the publicPath to / and your rule becomes (using the nicer webpack 2 syntax instead of inlining the options, which makes it easier to read):
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/',
publicPath: '/'
}
}
You'll probably want other loaders, that include assets, to also respect the same public path, so instead of defining it per loader, you can set it in output.publicPath.
output: {
path: path.resolve(__dirname, 'www'),
publicPath: '/',
// Other output options
}
I have a very basic Ruby on Rails installation. I have installed the bootstrap-sass gem, have the 'bootstrap-sass' ~> 2.3.1.0 in my Gemfile and ran bundle install. Restarted all applications. I have a style.css.scss file in app > assets > stylesheets which #imports 'bootstrap'; as well as the responsive. Those styles actually get pulled into my app, because they style the front-end. However, when I try to use a variable or mixin, I get the error in the image attached, as well as IntelliJ telling me it cannot find the variable. I'm new at this whole process, so I'm just trying to understand what's needed to resolve it.
I am using Ruby 2.0.0 and Rails 3.2.13rc2
https://docs.google.com/file/d/0BwMz3RH42HtQb0U1TXdHTVF0QjQ/edit?usp=sharing
#import "bootstrap";
body {
padding-top: 60px;
}
#import 'bootstrap-responsive';
.footer {
margin-top: 50px;
color: $greyLight;
a {
color: #e5e5e5;
}
}
here is a link to the live dev site on heruko, without use of the variables:
http://shrouded-ocean-4277.herokuapp.com/
EDIT: in my vendor/assets/stylesheets folder, there is no bootstrap folder or _mixins or _variables files. Should these have been installed when I placed the gem in the Gemfile and did an bundle install?
EDIT: adding my github: https://github.com/ChrisSki/omrails
Regarding your edit, the bootstrap will not be in vendor, but in a .gem file located somewhere inside your Ruby installation.
I set up a similar application recently, following this guide. I have 2 .css.scss files, one which includes and overrides parts of bootstrap, and the other one which contains my application's style (not directly related to Bootstrap). If you look at the second file, you can see that I imported bootstrap/variables because I needed to have access to some of Bootstrap's variables, and it works like a charm.
What I don't understand is why your original screenshot complains about something named variables, which I cannot see in your SCSS file... Have you tried bootstrap/variables instead?
EDIT:
I just cloned your repo, started the server and hacked style.css.scss. I think you made a typo in your tests :)
h1 {
color: $greyLight; /* Does not work!! */
color: $grayLight; /* Works :) */
}
You should declare your variables before you import bootstrap, then you can use the variables in your scss.
For example, here's how I use variables in my rails app:
/************************ CSS Variables ***************************/
$myColor: #0F851C;
/************************ Import Bootstrap ********************************/
#import 'bootstrap';
body { padding-top: 80px; }
#import 'bootstrap-responsive';
Just define your variables at the top of your scss, then import bootstrap. Then in your scss, you can use those variables like this:
#myDiv {
color: $myColor;
}
Hope this helps!
I was thinking of trying to use font-squirrels fonts in my rails app using #font-face. Hope this is the correct way of explaining it. I'm relatively new to this so was hoping someone could advise on how I would get this to work within the rails app
Thanks
OK so thought I would give the answer so it may help other people out in my situation. I just googled it and put all the pieces together, I was being lazy/afraid of the unknown on this one so apologies for that.Just trying it really helps understanding
Anyway
1) Create a folder called fonts in app/assets
2)Put all svg .eot .woff .ttf within this folder
3)In config/application.rb put the following
# Add the fonts path
config.assets.paths << "#{Rails.root}/app/assets/fonts"
# Precompile additional assets
config.assets.precompile += %w( .svg .eot .woff .ttf )
4)In your application stylesheets you place your #font-face styles, for example
#font-face {
font-family: 'DearestRegular';
src: url('Dearest-webfont.eot');
src: url('Dearest-webfont.eot?#iefix') format('embedded-opentype'),
url('Dearest-webfont.woff') format('woff'),
url('Dearest-webfont.ttf') format('truetype'),
url('Dearest-webfont.svg#DearestRegular') format('svg');
font-weight: normal;
font-style: normal;
}
5) Then wherever you want to use the font just use font-family as normal
6) Oh and restart the server to bring it all together :)