I can't figure out what I did wrong, or just PrimeNG does not change default font by default? In the css file i can see "--font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;" but in browser its just Times New Roman.
Here is my styles in angular.json
styles in angular.json
I just got the same issue. For what I found here, it seems the font is not applied to the body and that you could do the following in your styles.scss:
body {
background-color: var(--surface-a);
font-family: var(--font-family);
color: var(--text-color);
}
Related
I would like to override the global Antd font. I've found a few examples but the Antd styling is always taking precedence.
In the top level component (App.tsx) I'm importing an scss file. This file is being loaded correctly as I can see the style being overridden when inspecting the page.
app.scss
#font-face {
font-family: 'Mulish', serif !important;
}
&:root{
font-family: "Mulish", serif !important;
}
html body{
font-family: "Mulish", serif !important;
}
body{
font-family: "Mulish", serif !important;
}
The font-family is instead set to the Antd default. If I turn disable this css when inspecting it falls back to the Mulish font.
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
How can the global font be overridden with Antd 4.23.0?
I have a weird issued when setting the font-family in a css styleSheet to render html in a WebView.
I imported 2 fonts in xcode (Arial Rounded MT Bold and Arial Rounded MT). Those fonts work perfectly in Text components, but in WebView, only Arial Rounded MT Bold works. I use this to set the font:
const styleSheet = `* {
font-family: "Arial Rounded MT Bold";
font-size: 11px;
color: ${appColors.textGrey};
}`
Any idea how to make Arial Rounded MT work?
I finally found the answer, it's dead simple.
It works when I write it like this:
font-family: 'Arial Rounded MT', Arial, sans-serif;
I am attempting to change the font of the options inside mat-select ("In what city were you born", etc).
I noticed if I set ViewEncapsulation to none (e.g. let styles bleed in from other files), it does allow me to change the font family, but setting this to none causes other unwanted styles to bleed in even though I have these all set to ":host"
Note: I noticed when I change the font for this class in dev tools that it changes the font successfully:
However when I add the style to my css file and try it even with ng-deep, it still doesn't change the font.
add this to your styles.css / styles.scss file in your Angular project:
.mat-option-text {
font-size: 16px !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
}
It's screenshot of the code I am working with. I want to understand the font-family declaration syntax and in what sequence it works
Here's the code:
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
"Helvetica Neue", Arial, sans-serif;
font-size: 1.6rem;
line-height: 1.5;
text-align: center;
color: #333333;
margin: 0;
}
Basically I want to understand the font-family declaration syntax
The font-family property can hold several fonts. If the browser does not support the first font, it tries the next font. If the browser supports "Segoe UI" it will be "Segoe UI" otherwise it moves to next.
So as a best practice order your fonts in the order you need.
The font family is applied in order from the font you entered first.
For example, if a user's PC does not have a font, it is applied in order from the very beginning.
if there is a corresponding font, the fonts that follow the applied font will not be applied.
If the font name contains spaces, use quotation marks to indicate that it is a single font.
I'm not good at English, so I don't know if I delivered it correctly, but I hope it helped.
The option to toggle between sans-serif and serif using the font-setting button doesn't work when I change the fonts in style.CSS. Any suggestions?
This seems to happen when I change fonts for the main text, such as:
_output.yml
bookdown::gitbook:
css: style.css
style.CSS
p {
font-family: Arial;
}
But not all text changes. For example, if you change just the font for lists, the button still works fine.
style.CSS
li {
font-family: Arial;
}
The button itself seems to work fine, toggling between the class
.font-family-1 = sans-serif and .font-family-0 = serif
Currently, I think what you are observing is the expected behavior of the fontsetting gitbook plugin.
The button itself seems to work fine, toggling between the class .font-family-1 = sans-serif and .font-family-0 = serif
When you click on the button, the html root node of the book change class between .font-family-1 and .font-family-0
If you want to change the default font-family used for the book, you can customize css to override the default which is
.book.font-family-0 {
font-family: Georgia, serif;
}
.book.font-family-1 {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
The button will change the class to the root not of class .book and apply the correct css to the all book.