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?
Related
I am using Vuestic Admin as a template (based on Vuetify) and my (similar to ) component is strangely displaying different fonts for the selected option (inside the input field) and the dropdown options to be selected.
Is there a way to set all of them to the same font?
(I tried setting the "font-family" in the style field, but it hasn't worked).
My with different fonts: https://i.stack.imgur.com/pqEKj.png
I had this same issue and made the following change that resolved it:
In App.vue, move the font-family: "Source Sans Pro", Avenir, Helvetica, Arial, sans-serif; declaration from the #app scope into the body selector...
<template>
<router-view />
</template>
<style lang="scss">
#import "~#/sass/main.scss";
#app {
/* FROM HERE ✂️ */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
}
body {
/* TO HERE 👇 */
font-family: "Source Sans Pro", Avenir, Helvetica, Arial, sans-serif;
margin: 0;
background: var(--va-background);
}
</style>
I want to have different fonts for each language.
But this doesn't work.(hugo 0.90.2)
What's wrong?
#font-face {
font-family: 'Noto Sans KR';
#import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght#300;400;500;700;900&display=swap');
unicode-range: U+AC00-D7A3, U+0030-0039;
}
#font-face {
font-family: 'Poppins';
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#400;700&display=swap');
unicode-range: U+0041-005A, U+0061-007A;
}
:root {
--font-family-heading: 'Poppins', 'Noto Sans KR', sans-serif;
--font-family-paragraph: Helvetica, 'Noto Sans KR', sans-serif;
--font-family-mono: monospace, 'Noto Sans KR';
--base-color: #ffffff;
--base-offset-color: #eaeaea;
--highlight-color: #7b16ff;
--heading-color: #1c1b1d;
--text-color: #4e5157;
}
my site
https://ravenearth.com
Use the :lang selector for this. An example of this could be:
/* Selects any <p> in English (en) */
p:lang(en) {
}
You have defined css font family variables not properly.
You should provide prioritized list of one or more font family names. First going to be most prioritized font family name, if it will be missing - browser will take next font family name from list, and so on.
:root {
--font-family-heading: 'Poppins', 'Noto Sans KR', sans-serif;
--font-family-paragraph: 'Noto Sans KR', Helvetica, sans-serif;
--font-family-mono: 'Noto Sans KR', monospace;
...
}
To override root variables in accordance to selected language, you can use ":lang()" selector:
// Korean language
html:lang(ko):root {
--font-family-h1: sans-serif;
}
// English language
html:lang(en):root {
--font-family-h1: monospace;
}
The font changes in mac and iOS platforms. How to ensure the same font appears. My index.css file :
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
The first font you specified is preferred and since it is an alias it might be different among different Apple devices. If you want it to resolve to the same font everywhere, specify one, for example "Roboto". It is recommendable to use Googles WebFontLoader to download Robot in order to avoid ugly reflows when the font is not instantly available.
You can get the fonts from local repository and use font-face to insure that your fonts now are read from the same repository not from the device.
Download the fonts you intend to use and put them in public/Fonts directory, then in your root css add those fonts
e.g:
#font-face {
font-family: 'Segoe UI';
font-style: normal;
font-weight: normal;
src: local('Segoe UI'), url('SEGOE-UI.woff') format('woff');
}
{.....}
or/and whatever other fonts you're using
I would like to remove all rounded corners in my application using the Ant Design framework.
I tried adding different permutations of ant* in my index.css but i cannot get it to work.
index.css
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
.ant {
border-radius: 0px;
}
Ant Design allows you to customize our design tokens in order to meet the needs of UI diversity from business and brand, including primary color, border radius, border color, etc..
Here is documentation
#border-radius-base: 0px; // major border radius
Or override above
#import '~antd/dist/antd.less'; // Import Ant Design styles by less entry
#import 'your-theme-file.less'; // variables to override above
I was just about to change the default font with Bootstrap SASS and I found this:
//== Typography
//
//## Font, line-height, and color for body text, headings, and more.
$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$font-family-serif: Georgia, "Times New Roman", Times, serif !default;
What's the difference between sans-serif and serif in this context? Because if I inspect my page, all fonts are Helvetica Neue.
How is serif/Georgia utilised if all I'm seeing is Helvetica Neue being used?
Those are just options to change the base style for the font so if you want serif or sans-serif. They do this:
Create the three base styles:
$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$font-family-serif: Georgia, "Times New Roman", Times, serif !default;
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default;
Then set the sans-serif on a base var:
$font-family-base: $font-family-sans-serif !default;
And use that base to define the font-family for the body therefore all the document:
body {
font-family: $font-family-base;
font-size: $font-size-base;
line-height: $line-height-base;
color: $text-color;
background-color: $body-bg;
}
The other options are there if you want to customize the theme and change quickly to serif or monospace all the document.