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;
}
Related
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 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;
}
I would like to include a code block in a presentation I am preparing with Restructured Text. But the font used in the code block is huge and it can not fit inside resulting code box:
How can I reduce the font size used in code blocks?
Set the fontSize property of the code style in your style file.
e.g.
code:
parent: literal
fontSize: 10
Some of the builtin themes (alabaster) accept usage of custom.css.
Create _static/custom.css and add the following to adjust the code-block font-size:
_static/custom.css:
.highlight { background: #f8f8f8; font-size: x-small;}
You need a layout.html in a dir mysources/_templates and in your mysources/conf.py you need a declaration templates_path = ['_templates'].
In layout.html add a declaration
div.highlight {
font-size : 0.8em; /* or another value you prefer */
}
This works for me because I use the html_theme sphinxdoc. Maybe in other themes the declarations differ. If so you must find out the declaration by a html debugger like Inspektor in Firefox or Developer Tools in Chrome or DOM Explorer in IE.
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 am trying to style the Auth0 lock control, however my styles are not being applied.
According to the documentation I should be able to style this control to match my website, Lock: Customize the look and feel.
Prepend a body key in front of the customization CSS in order to win
in CSS specification
I have added this line to my Less style sheet.
body #a0-lock.a0-theme-default .a0-panel {
font-family: 'Open Sans', sans-serif;
}
However my style is not applied, and when I debug the style sheet in Firefox I can see my code is loosing the selection.
How can I win the style selection? How can I style the Auth0 lock control?
If its important I'm running an ASP.Net MVC website where my Less is converted to CSS. I am using version 8.2 of Auth0 lock.
Make sure your order of css is also defined correctly. According to order of css definition docs
Auth0 Lock inserts it's CSS definitions in the head node of the HTML
Document and it does this at the very end. So, in order to override
the Lock's main styles you must insert your CSS in the body node,
right after the tag definition for the Auth0 Lock inclusion:
This worked for me
<script src="http://cdn.auth0.com/js/lock-7.min.js"></script>
<link rel="stylesheet" href="custom.css"/>
then in my css
body #a0-lock.a0-theme-default .a0-panel {
background-color: greenyellow;
}
For changing font-family of individual elements use more specific selectors. For eg. to change font-family of lock header use following
body #a0-lock.a0-theme-default .a0-header h1 {
font-family: 'Open Sans' !important;
}
To change all panel element font-family use * like below
body #a0-lock.a0-theme-default .a0-panel * {
font-family: 'Open Sans' !important;
}
I was able to resolve using a more specific selector. In my question I had missed out the full selector (*)
So; body #a0-lock.a0-theme-default .a0-panel became; body #a0-lock.a0-theme-default .a0-panel *
I found the easiest way to get the the full selector was by debugging the styles on the the running application.