I'm using Rails 4 with Sass, and I'd like to use a custom font.
How do I use #font-face with Sass if the asset pipeline in Rails 4 is no longer utilized? I can't find anything online about how to do this.
Also, most of what I do find refers to "config.rb," but I only have "config.RU" Is there a difference?
(I'm newish to Rails so please try to be unambiguous/don't refer to things that have antecedents somebody newish to Rails wouldn't recognize)
Thanks everybody!
Do you mean you do not have assets pipeline? If so, you can serve your fonts via "public" folder.
Create a directory in public: "public\fonts"
Copy your fonts there
In your css, declare the font and its location:
#font-face {
font-family: 'robotolight';
src: url('/fonts/Roboto-Light-webfont.eot');
src: url('/fonts/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/Roboto-Light-webfont.woff') format('woff'),
url('/fonts/Roboto-Light-webfont.ttf') format('truetype'),
url('/fonts/Roboto-Light-webfont.svg#robotolight') format('svg');
font-weight: normal;
font-style: normal;
}
Of course if you are organizing different fonts in different folders, you will need to indicate them as well, eg:
url('/fonts/roboto-light/Roboto-Light-webfont.eot');
Hope it helps.
Related
I just upgraded to laravel 8 and needed to build a website using fonts. I've downloaded the fonts and put them in the resources folder in a fonts folder. After that i added them to my css, but it doesn't seem to work. Am i missing a step, does it need to be compiled bij webpack first? What am i doing wrong?
Fonts:
https://fontsgeek.com/fonts/Jot-Regular
https://fonts.google.com/specimen/Roboto
style.scss:
#font-face {
font-family: JotRegular;
src: local('/fonts/JotRegular.ttf');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: Roboto;
src: local('/fonts/Roboto-Regular.ttf');
font-weight: normal;
font-style: normal;
}
h2{
font-size: 2.2rem;
font-family: JotRegular;
}
Using local for loading fonts bypasses font compilation in webpack. So the fonts will not be automatically copied in to public folder and fonts must be copied manually in the proper path, Which is not recommended. To enable auto font manipulation you can use this:
#font-face {
font-family: JotRegular;
src: url('../fonts/JotRegular.ttf'); // remember that font file path must be relative to the current css file. not the final compiled folder
font-weight: normal;
font-style: normal;
}
This way webpack automatically copy font file to the final compiled directory in public. In addition automatic file version control will be take place this way.
My sass has has a font.scss file which has the following
#font-face {
font-weight: 400;
font-style: normal;
font-family: "TT Norms Pro Regular";
src: local("TT Norms Pro Regular"), url("TT Norms Pro Regular.woff") format("woff");
}
And the fonts live in the same directory as the sass file. Example being;
/05_fonts
- fonts.scss
- TT Norms Pro Regular.woff
My main scss imports the above fonts.scss.
My issue is that a fonts folder created at the root of the directory and not in dist/assets/fonts/ where I need it to be.
From researching the issue I found that I can add mix.config.fileLoaderDirs.fonts = 'dist/assets/fonts'; to my webpack.mix.js file. This does pull the fonts into dist/assets/fonts/. But the resulting css is then;
#font-face {
font-weight: 400;
font-style: normal;
font-family: "TT Norms Pro Regular";
src: local("TT Norms Pro Regular"), url("/dist/assets/fonts/TT Norms Pro Regular.woff?2dbc9dffb1b3db6d23806b49fc286edf") format("woff");
}
Which isn't correct, it needs to be url("/assets/fonts/TT Norms Pro Regular.woff?2dbc9dffb1b3db6d23806b49fc286edf")
Upon adding mix.setResourceRoot('dist') and then making mix.config.fileLoaderDirs.fonts = '/assets/fonts';. Creates a assets/fonts folder in the root. Again not correct.
How can I get the fonts into dist/assets/fonts with the correct css url("/dist/assets/fonts/TT Norms Pro Regular.woff")?
Worked it out…
mix.setPublicPath('dist');
mix.setResourceRoot('/');
I have a laravel project where I am using single view components. I have a global.scss file where I have code below to include my fonts which are placed in public/fonts folder. In the style section of each vue component , I am using #import '../../css/global.scss'; to import the global.scss file but the fonts still dont seem to be usable. Am I doing anything wrong with this setup?
#font-face {
font-family: 'Testing-Font';
src: url('/public/fonts/Avenir-Black.tff');
}
#font-face {
font-family: 'Avenir-Light';
src: url('/public/fonts/Avenir-Light.tff');
}
#font-face {
font-family: 'Test-Fontname';
src: url('/public/fonts/Avenir-Book.tff');
}
assuming public is the director from which the web page is served, you should probably omit it from the font files paths:
#font-face {
font-family: 'Testing-Font';
src: url('/fonts/Avenir-Black.tff');
}
#font-face {
font-family: 'Avenir-Light';
src: url('/fonts/Avenir-Light.tff');
}
#font-face {
font-family: 'Test-Fontname';
src: url('/fonts/Avenir-Book.tff');
}
to see if something went wrong with the loading process, open the network tab of your favored browser's dev-tools, and look for 40x errors.
if the issue persist (and stems from 404 errors), try and use a relative path for the font files, to avoid any unknowns when your build system resolves the root path (/).
also, depending on the use case (library/application) i would include it in the entrypoint file, so any component could use it.
Either your font files have wrong extension or you just typed extension wrong in CSS. It should be ttf, not tff.
sorry could be a silly one, but I can't use #font-face with multiples, I have 3 .ttf files saved in the folder 'fonts'
#font-face
{
font-family:'sansation';
src: url('fonts/Sansation_light.ttf') format('truetype');
}
p
{
text-align:left;
font-family:'sansation';
font-size:16px;
}
The above works fine, but when I do the same thing with the others:
#font-face
{
font-family:'ttf_outwrite';
src: url('fonts/outwrite.ttf') format('truetype');
}
a
{
font-size:20px;
font-family:'ttf_outwrite';
}
...it doesn't seem to link at all. Is this possible with multiples .ttf files?
If you want to try to replicate the issue, the fonts can be downloaded in a few seconds from http://www.fontspace.com/ttf.
Any help appreciated.
Thanks,
I've been having the same problem with .ttf files working for some fonts but not others. My solution is a work around in that I converted the font to the woff file type:
#font-face {
font-family: "trade";
src: url(/static/common/fonts/trade-gothic-bold.ttf) format("truetype"), url(/static/common/fonts/trade-gothic-bold.eot) format("embedded-opentype"), url(/static/common/fonts/trade-gothic-bold.woff) format("woff");
}
I know this doesn't solve the root problem and was hoping someone had a better answer. My .ttf file is not corrupt because I converted my .woff from it. My thinking is that there has to be something in these non-working .ttf files that make them uninterpretable to the browsers, but not corrupt.
I'm having a problem with #font-face. It actually works flawlessly on Safari, internet explorer 7+ and Firefox for windows but not at all on firefox for mac.
I'm using code from the bulletproof #font-face article
Here's my Code:
#font-face {
font-family: "QlassikMediumRegular";
src: url("../fonts/Qlassik_TB.eot");
src: local("Qlassik Medium Regular"), local("QlassikMedium"), url("../fonts/Qlassik_TB.ttf") format("truetype")
}
#font-face {
font-family: "QlassikBoldRegular";
src: url("../fonts/QlassikBold_TB.eot");
src: local("Qlassik Bold Regular"), local("QlassikBold"), url("../fonts/QlassikBold_TB.ttf") format("truetype")
}
Here is the link to my site in question: link text
I typically use a more extended #font-face declaration:
#font-face {
font-family: 'TypewriterOldstyle';
src: url('../fonts/typeo-webfont.eot');
src: url('../fonts/typeo-webfont.eot?#iefix') format('eot'),
url('../fonts/typeo-webfont.woff') format('woff'),
url('../fonts/typeo-webfont.ttf') format('truetype'),
url('../fonts/typeo-webfont.svg#webfonty9r23iiq') format('svg');
font-weight: normal;
font-style: normal;
}
You could try generating at http://www.fontsquirrel.com/fontface/generator
Had the same problem, font's gave 301 error saying i did not have access to the font file.
What works best for me is placing the font file's in the same directory as the .css file, no hassle with anny .htaccess or other server config file's.
So i have one external fonts.css file containing all the css font line's within the font directory. Then i can include this .css file on the page i would like to use this font. Make sure you don't make additional directory's so you can call the font without anny directory.
more info: https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face