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.
Related
I have a problem. I try to import and use a font(Rubik from google fonts) but i want it to be imported from folder, not google fonts.
Here is my code
CSS
#font-face {
font-family: "Rubik";
src: url("/Rubik-VariableFont_wght.ttf") format("truetype") tech("variations"),
url("/Rubik-VariableFont_wght.ttf") format("truetype-variations");
font-weight: 300 800;
}
html {
font-size: 62.5%;
box-sizing: border-box;
font-family: "Rubik", sans-serif;
color: var(--color-blue-dark);
}
And here is a screenshot of what is showing on browser
I tried to compress font to woff2 to match the google fonts instructions to make it work, but it didn`t
The solution i got was to add second url to a stand alone src like this
#font-face {
font-family: "Rubik";
src: url("/Rubik-VariableFont_wght.ttf") format("truetype") tech("variations"),
src: url("/Rubik-VariableFont_wght.ttf") format("truetype-variations");
font-weight: 300 800;
}
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 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?
I'm new to css so I'm a little confused. Here is what I'm doing in my index.scss file
#import url('https://fonts.googleapis.com/css?family=Nunito+Sans:400,400i,700,800,800i,900i&display=swap');
body {
font-family: 'Nunito Sans', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
I want to make all the paragraphs Nunito Sans Bold Italic. How can I do that in a specific file say components/link.js
To make all paragraphs styled with Nunito Sans in bold and italic, you first need to target every p element, then add the font-family and the font styles you need. For example:
p {
font-family: 'Nunito Sans', sans-serif;
font-weight: bold;
font-style: italic;
}
If you only want this css in that particular component, create a separate scss file and import it only into that component, for example:
#import './link-style.scss';
This may work
//index.scss
.paragraph {
font-family: 'Nunito Sans', sans-serif;
font-weight: bold;
font-style: italic;
}
<!--Link js -->
<p className="paragraph">
paragraph text
</p>
I'm trying to do a seemingly easy thing but without much luck. I have a React app that uses the Grommet UX framework. In the app, I use a Web Chat component which I would like to style.
The grommet style is correctly being applied for fonts but my custom changes for my web chat component are not being applied.
Any help would be very much appreciated.
App.js
import '../scss/custom.scss';
...
class PatientApp extends React.Component {
...
render() {
...
<Chat className='wc-app' directline='GUID_Entered_Here />
Custom.scss
#import 'elu.defaults.scss';
#import '~grommet/scss/grommet-core/index.scss';
body .wc-app, .wc-app button, .wc-app input, .wc-app textarea {
font-family: 'Segoe UI', sans-serif;
font-size: 15px;
background-color: #2AD2C9;
}
.wc-chatview-panel {
font-family: 'Segoe UI', sans-serif;
font-size: 15px;
font-style: #2AD2C9;
}
.wc-header {
font-family: 'Segoe UI', sans-serif;
font-size: 15px;
font-style: #2AD2C9;
}
.wc-message-pane {
font-family: 'Segoe UI', sans-serif;
font-size: 15px;
font-style: #2AD2C9;
}
Below is a screenshot which shows the output HTML when i run my code. On the right you will notice the classNames being referenced.
As the DOCS says:
In the /src/scss/ folder you will find the source files for generating
/botchat.css. Run npm run build-css to compile once you've made your
changes. For basic branding, change colors.scss to match your color
scheme. For advanced styling, change botchat.scss.
All,
I was able to get this working just had to set a height and width within the chatview panel and everything is now appearing correctly.