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('/');
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.
Noob to Gatsby and SCSS I wanted to dive into both and learn them beginning of the new year. After following the Gatsby tutorial I wanted to dive in and build a site based off the gatsby-starter.
Followed the documentation for install & config for SASS.
In src created a directory named fonts and added Open Sans:
src/fonts/OpenSans-Regular.ttf
src/fonts/OpenSans-Bold.ttf
src/fonts/OpenSans-Italic.ttf
created a directory in src for SCSS called main.scss and created a partial directory to bring in typography:
src/styles/main.scss
src/styles/partials/_typography.scss
main.scss:
#import 'partials/typography';
body {
font-family: $font-primary;
}
_typography.scss:
$font-primary: 'Open Sans', sans-serif;
// Body Font:
#font-face {
font-family: $font-primary;
font-style: normal;
font-weight: normal;
src: url('../../fonts/OpenSans-Regular.ttf') format('truetype');
}
In index.js I bring in the SCSS with no issues:
import React from 'react'
import '../styles/main.scss'
const Home = () => {
return <div>Hello world!</div>
}
export default Home
but in the terminal I get font errors for each font:
Can't resolve '../../fonts/OpenSans-Regular.ttf' in '/path/to/project/src/styles'
If you're trying to use a package make sure that '../../fonts/OpenSans-Regular.ttf' is installed. If you're trying to use a local file make sure that the path is correct.
error Generating development JavaScript bundle failed
Per research I dont see an answer and I've read:
global scss in Gatsby
Using Local Fonts
gatsby-config.js:
module.exports = {
plugins: [`gatsby-plugin-sass`],
}
Why am I getting an error when trying to bring in local fonts for this site? Also, I'm bringing in the local font because I read in the documentation there is an offline ability.
Edit:
Forked Gatsby with the Hello World Starter:
The mindset and your approach is perfectly valid and the issue relies on the relativity of the paths in your _typography.scss. Use something like this:
$font-primary: 'Open Sans', sans-serif;
// Body Font:
#font-face {
font-family: $font-primary;
font-style: normal;
font-weight: normal;
src: url('../fonts/OpenSans-Regular.ttf') format('truetype');
}
Notice the error prompted:
Can't resolve '../../fonts/OpenSans-Regular.ttf' in
'/path/to/project/src/styles'
/path/to/project/src/styles it's weird, it seems that you have something hardcoded somewhere because of the /path/to/project/ part. Give it a look too.
The issue relies on your path, which is relative to the main.scss file, not to the partial since, in the end, the partial belongs to the main.scss file because you are importing it directly.
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.
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.
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