I have two custom font files in my storybook project, they are referenced like this:
import { TYPOGRAPHY } from './tokens';
import { css } from 'styled-components';
import SourceSansProRegular from '../assets/fonts/SourceSansPro-Regular.ttf';
import SourceSansProBold from '../assets/fonts/SourceSansPro-Bold.ttf';
export const fontFaces = css`
#font-face {
font-family: 'Source Sans Pro Regular';
src: url(${SourceSansProRegular}) format('ttf');
font-weight: ${TYPOGRAPHY.WEIGHTS.REGULAR};
font-style: normal;
}
#font-face {
font-family: 'Source Sans Pro Bold';
src: url(${SourceSansProBold}) format('ttf');
font-weight: ${TYPOGRAPHY.WEIGHTS.MEDIUM};
font-style: normal;
}
`;
My problem is that when I run yarn build (BABEL_ENV=production babel src -d dist), the resulting build does not include the font files. Does anyone know how to make it so the font files will be included in the dist folder?
Related
so I've been trying to add a local font to a react project using styled components for a while now. I came across a lot of similar questions with answer and just articles on the net in general but none of those solutions seem to work. My current code is this.
import { createGlobalStyle } from "styled-components";
import OpenSansTTF from './OpenSans-VariableFont_wdth,wght.ttf';
const GlobalStyles = createGlobalStyle `
#font-face {
font-family: 'Open Sans';
src: url(${OpenSansTTF}) format ('truetype');
font-weight: 300;
font-style: normal;
font-display: auto;
}
h1 {
font-family: 'Open Sans', serif;
color:red;
font-size: 5em;
}
`
export default GlobalStyles;
I've imported this filed in my App.js and added it. The other h1 styles are working and it's being displayed as a serif font. Not sure how I can fix this.
In development mode the custom fonts (Raleway) are present but it is not reflected in the staging environment. I deployed my app to Heroku.
Added the following command in the application.rb
config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
Added the font-family in the application.bootstrap.scss
#font-face {
font-family: 'raleway-regular';
font-style: normal;
font-weight: 400;
src: font-url('raleway-regular.ttf') format('truetype');
}
#font-face {
font-family: 'raleway-semibold';
src: font-url('raleway-semibold.ttf') format('truetype');
}
#font-face {
font-family: 'raleway-medium';
src: font-url('raleway-Medium.ttf') format('truetype');
}
The font files are available in the my_app/app/assets/fonts directory.
I created my rails using the command rails new my_app --javascript esbuild --css bootstrap --database postgresql
Rails version 7
Try to use url instead of font-url. It works for me. With scss and the same folder configuration.
#font-face {
font-family: 'font-name';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("font-name.ttf") format('truetype');
}
Rails creates its own font path
/assets/font-name-afb238caf5f2396b697d84a32556090b0851e382692f617c6aeaac79e02971a0.ttf
Since upgrading to Sage 9.0.10, I can't import my fonts. All my fonts (.woff & woff2) are in assets>fonts, in main.scss #import "base/fonts" and in fonts.scss I have this:
#font-face {
font-family: "Font";
src: url("/../fonts/Font-name.woff2") format ("woff2"), url("/../fonts/Font-name.woff")
format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}
With this, I have no error when I compile. I don't have this problem on my other projects.
I tested lots of things, modified the path or changed folder etc.
Maybe I have forgotten a little thing, thank you so much.
Not sure whether that matters but how about removing the extra newline in the src part:
#font-face {
font-family: "Font";
src: url("/../fonts/Font-name.woff2") format ("woff2"), url("/../fonts/Font-name.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}
I have an Angular 10 app that uses SCSS. I have declared some #font-face declarations in _typography.scss referring to the fonts in my assets/fonts directory. However, when running the application, the browser does not even initiate the request to download the font files.
Following is the style directory:
This is my _typography.scss:
#font-face {
font-family: 'Spartan';
src: 'assets/fonts/Spartan-Medium.ttf' format('truetype');
font-style: normal;
font-weight: 500;
font-display: swap;
}
#font-face {
font-family: 'Spartan';
src: 'assets/fonts/Spartan-SemiBold.ttf' format('truetype');
font-style: normal;
font-weight: 600;
font-display: swap;
}
#font-face {
font-family: 'Spartan';
src: 'assets/fonts/Spartan-Bold.ttf' format('truetype');
font-style: normal;
font-weight: 700;
font-display: swap;
}
I am #import-ing this inside my main styles.scss file:
#import 'reset';
#import 'variables';
#import 'typography';
#import 'utilities';
body {
font-family: 'Spartan', 'Segoe UI';
font-weight: 500;
font-size: 0.75rem;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 700;
}
Only Segoe UI system font is getting applied. The browser is not even initiating the requests for the font files:
I then tried preloading my fonts in my index.html, and the browser did make the requests, but the fonts were not applied.
Can someone point out why this is happening?
P.S.: Here is my assets folder structure:
In my case, I just moved across from less to sass and the fonts were not requested.
After a lot of messing about I figured out that it didn't work with sass when font-face was declared inside my html tag. It was working before this with less.
// not working
html {
font-face: ...
...
}
// working
font-face: ...
html {
...
}
I know its late, but in my case my fonts were overwritten by angular material theme.
U can check that by looking at computed styles in devtools. If that is the case then creating custom typography for angular material is recommended.
I have downloaded .ttf files from google fonts to my local css folder, but can't seem to load them properly. I have tried these approaches:
CSS
#import url('./css/css?family=Cabin+Condensed:400,500,600,700');
#font-face {
font-family: 'Cabin Condensed';
font-style: normal;
font-weight: 700;
src: local('Cabin Condensed') format('truetype');
}
body, html {
font-family: 'Cabin Condensed', sans-serif;
}
HTML
<link href="./css/css?family=Cabin+Condensed:400,500,600" rel="stylesheet">
I don't get any errors, but the font is not displayed either.
Strangely, the official docs don't even mention local fonts.
Seems to me the problem is using the local path which requires the font to be installed locally.
Try dropping the #import and add a fallback of src: url to your src: local:
#font-face {
font-family: 'Cabin Condensed';
src: local('Cabin Condensed'), url(<path to the TTF file>);
}
e.g:
#font-face {
font-family: 'Cabin Condensed';
src: local('Cabin Condensed'), url('/css/fonts/Cabin-Condensed.ttf');
}