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 :)
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.
i trying to add a custom font to Vuetify with a local ttf file, to add it, i tried #font-face but the compiler runs in problems to find the file it work with a #import but the font is not online :c
here is my variable.scss file
#font-face {
font-family: "MyFont";
src: url("assets/font/myfont.ttf");
}
$body-font-family: 'MyFont', sans-serif;
and here is the error
./assets/font/MyFont.ttf in ./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-3-1!./node_modules/postcss-loader/src??ref--9-oneOf-3-2!./node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-3-3!./node_modules/vuetify/src/components/VAlert/VAlert.sass, ./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-3-1!./node_modules/postcss-loader/src??ref--9-oneOf-3-2!./node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-3-3!./node_modules/vuetify/src/components/VApp/VApp.sass and 91 others
it seems to be a problem to find the font but i cannot simply put the ttf file in the node module directory :C
I solved this problem by prepending ~# to my font path according to LinusBorg here and it is now working fine. Yours should be ~#/assets/myfont.ttf.
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
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-
Initial Post: I moved a project from my server back to my local
environment and now .less files won't compile.
.kit and .js compile well. When I save a .less file codekit says
"Success code kit compiled xy.less" but it didn't generate anything.
Also if I write some rubbish inside a less file there is still a
success message.
All the .less files show up nicely in the code kit window but it seems
to ignore less files altogether
osx Mavericks, codekit 1.9.3
I narrowed the problem down to the #font-face declaration inside a .less import.
I use a webfont from myfonts.com I added the myfonts.com css declarations like this:
#import url('//hello.myfonts.net/count/xy');
#font-face {
font-family: 'Blabla';
src: url('/webfonts/29DFBD_0_0.eot');
src: url('/webfonts/29DFBD_0_0.eot?#iefix') format('embedded-opentype'),
url('/webfonts/29DFBD_0_0.woff') format('woff'),
url('/webfonts/29DFBD_0_0.ttf') format('truetype');
}
The problematic line is the one with format('embedded-opentype') with this line inside my less files, code kit stops compiling, yet hands out a success message.
If I write Hello World on the fourth line:
#import url('//hello.myfonts.net/count/xy');
#font-face {
font-family: 'Blabla';
src: url('/webfonts/29DFBD_0_0.eot'); Hello World
src: url('/webfonts/29DFBD_0_0.eot?#iefix') format('embedded-opentype'),
url('/webfonts/29DFBD_0_0.woff') format('woff'),
url('/webfonts/29DFBD_0_0.ttf') format('truetype');
}
Codekit trows an error at me.
But if I write the same, one line below:
#import url('//hello.myfonts.net/count/xy');
#font-face {
font-family: 'Blabla';
src: url('/webfonts/29DFBD_0_0.eot');
src: url('/webfonts/29DFBD_0_0.eot?#iefix') format('embedded-opentype'), Hello World
url('/webfonts/29DFBD_0_0.woff') format('woff'),
url('/webfonts/29DFBD_0_0.ttf') format('truetype');
}
This throws in a success message and the compiled .css doesn't change.
So it must be this line right?: src: url('/webfonts/29DFBD_0_0.eot?#iefix') format('embedded-opentype'), whats wrong with that?
Contrary to your conclusion, I assume the problem to be the #import declaration that MyFonts uses to track pageviews, i.e.:
/* #import must be at top of file, otherwise CSS will not work */
#import url("//hello.myfonts.net/count/1a2b3c");
Here, the LESS preprocessor within CodeKit has trouble with the URL that lacks a file extension. The fix is to indicate the filetype in brackets right after #import:
#import (css) url("//hello.myfonts.net/count/1a2b3c");
[In fact, the above mentioned CSS segment is not necessary for displaying the webfont, it works just fine without (and does not choke CodeKit either). Omitting it might violate the licence though, because without pinging MyFonts' servers, they don't know if your within the webfont useage quota.]