I have following font-family set on form body:
The font which I have
Now I need following font-family:
The font family I need
This link https://getbootstrap.com/docs/4.0/content/reboot/ tells following :
enter image description here
So according to this link the default dropped and replaced with a “native font stack”.
To switch the global font-family, I need to update $font-family-base and recompile Bootstrap. I am new to bootstrap. Please let me know how to change font-family for my entire form.
html,* {
font-family: '--apple-system','san-serif',
font-size:16px;
}
Related
I am trying to change the font family of my entire shiny app. I found this solution
* { font-family: Arial, sans-serif !important; }
from this url
This is changing every font but also removing my icons.
dashboardSidebar(sidebarMenu(
menuItem("Data", tabName = "dataimport", icon = icon("folder-open"))))
This is how it looks now. It's not working without !important as mentioned in the solution above.
What can I do to fix this?
Can you share the HTML code of the icon? It probably is a span or i tag.
Instead of adding the font-family to every single html element with *, you can add it to the body tag (see the approved answer in your link). Please don't use !important when adding the font-family when it isn't absolutely needed (information about !important in css: What are the implications of using "!important" in CSS?).
If the icon still gets overwritten by you font, you can select the span or i tag in the css and set the font-family to the default font-family with icons.
CSS:
body {
font-family: Arial;
}
as described in the heading. I spent some time on implementing a specific font on a client's website. I implemented the font mostly on all the css classes where I need it.
Somehow on the "a" class which defines the menu links it doesn't work calling the font. Why?
See screenshot 1 and 2.
On the class "div.powered-by" (which is also working like a link) for example it works and on the "a" class (which defines the menu links) it doesn't. See screenshots.
Calling the font doesn't work:
div.powered-by calling the font works:
Because the following line runs before your font-family
--primary-nav--font-family: var(--global--font-secondary);
You can use !important
a {
font-family: 'Lemon Sans Uni Regular', Arial, sans-serif !important;
}
I am using Angular & Material v6 and I have a question about the application of a custom theme on entryComponents like dialog or snack bar.
Actually, I put the Roboto font on all component using the custom theme of material but it is not applied to my dialog or snack-bar.
You can find a stackblitz example here
As you can see, the Roboto font is correctly applied on my page but if you open the dialog, the Time New Roman is used instead...
I just:
fork the example of dialog from angular material website.
add a custom theme.scss (using Roboto) and include it in angular-cli.json
remove the global font-family in style.css
Any advises, explanations ?
Somewhere in your app you need to apply your typography to the application page body so that all components automatically inherit from it including the overlay component that holds the dialog. In the stackblitz demo, you commented that out to test your typography:
body {
/* font-family: Roboto, Arial, sans-serif; */
margin: 0;
}
So you either need to replace that in your theme file with something like:
body {
font-family: mat-font-family($custom-typography);
margin: 0;
}
Or (you can't do this when using stackblitz) use the Angular Material typography class in your main index.html page:
<body class="mat-typography">
...
</body>
Also, your typography configuration needs to define sizes and weight for all of the typography levels used by Angular Material. An easy way to simply modify the default configuration is using a SASS merge. For example:
$custom-typography: map-merge(
mat-typography-config(),
mat-typography-config(
$font-family: 'Roboto, sans-serif'
)
);
This takes your definitions and writes them over the default configuration, leaving anything you didn't re-define intact.
And you only need to call mat-core() alone as it will call angular-material-typography() which in turn calls mat-base-typography().
I'm having trouble changing the font on a website I built using the WordPress theme Zerif Lite.
The page itself is (REMOVED LINK) - I want to change the font in the "testimonial" section or as its displayed there: "Teenused".
That weird font in the bottom of every box (a.client-name)
I have tried so far:
Custom CSS plugin - it lets me only change the font size, when I set new font there, it won't change anything.
Changed the theme's CSS files, also no luck there.
Will appreciate any kind of help.
You can change the font by targeting the correct selector, which is: .feedback-box .client-info .client-name. The current font is called Homemade Apple and is declared in the main theme's CSS file (style.css) at line 2797:
.feedback-box .client-info .client-name {
font-family: 'Homemade Apple', serif;
color: #404040;
}
Simply change that to your desired font, for example:
.feedback-box .client-info .client-name {
font-family: 'Montserrat', sans-serif;
color: #404040;
}
Have you try to add an !important rule to your CSS. It's either that or verify the load order from your styles.
When it comes down to a CSS style, the reason it may not be aplying is because there is another more specific selector, try adding parent selector to your rules, or it could also be that the theme's rules are loading after your rules and replacing them.
One last thing to check, when dealing with fonts: make sure your browser have access to and knows the font. If it does not finds it, it will just replace it with another one, without any warning.
I'm currently using the Recent Posts widget that comes with WordPress. Is it possible to change the CSS of the links? I want the font to be smaller and not display in bold as it does now. I know it inherits these settings (bold links and font size), but I would like to overwrite them.
Many thanks!
You can change the font styling on the recent posts by adding this to your CSS rules (changing the font size to suit your needs):
.widget-inner a {
font-weight: normal;
font-size: 14px;
}