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;
}
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 use system font on my web, and all icons are colored. ⚡ is not on safari. Does anyone have any idea how to fix it in the text? I need to have it the same in chrome and safari.
I have set the system font like this:
https://css-tricks.com/snippets/css/system-font-stack/
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
I know I can use Apple Color Emoji for colored emojis, but this is not usable for text.
Chrome:
Safari:
edit: It is the same on StackOverflow, for example this: 👋 is colored in safari.
I have solved it by wrapping emojis by <span> and added CSS to that tag font-family: Apple Color Emoji
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.
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);
}
I'm using Bootstrap 4. Chrome displays the UPWARDS BLACK ARROW (⬆) as
Bootstrap lists the default fonts as
$font-family-sans-serif:
// Safari for OS X and iOS (San Francisco)
-apple-system,
// Chrome < 56 for OS X (San Francisco)
BlinkMacSystemFont,
// Windows
"Segoe UI",
// Android
"Roboto",
// Basic web fallback
"Helvetica Neue", Arial, sans-serif,
// Emoji fonts
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
"Segoe UI" (and "Helvetica Neue", Arial, sans-serif) displays UPWARDS BLACK ARROW (⬆) as
It is "Segoe UI Emoji" which is displaying a blue boxed arrow. Why does Chrome use that font even though it is second from last in the font-family list and other fonts already render it?
.bs-font {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue", Arial, sans-serif,"Apple Color Emoji";
}
.sui-font {
font-family: "Segoe UI Emoji";
}
<span class="bs-font">⬆</span><br/>
<span class="sui-font">⬆</span>