I have tried
#font-face {
font-family: Jua;
src: url('/fonts/jua.ttf');
}
#font-face {
font-family: Jua;
src: url('..../fonts/jua.ttf');
}
#font-face {
font-family: Jua;
src: url('.../fonts/jua.ttf');
}
Im trying to change my body text with.
body,
button,
input,
select,
optgroup,
textarea {
color: #d6d6d6;
font-family: Jua !important;
font-size: 16px;
font-size: 1rem;
line-height: 1.5;
}
Also tried puting the fonts in my theme root directory, Cleared cache
A couple of this you could do.
Check your fonts loads in the browser.
I only see above. So, maybe check your directory permission.
And then check your CSS font path.
Try to add absolute path and check. Then do the path modification.
In your case your src attribute for #font-face should have value url('fonts/jua.ttf') because font file is in directory, which is on the same level as stylesheet file.
Related
Does anybody know how to force mdbook to use the whole content area? Currently there is a large margin left and right and the whole content (especially tables) are heavily compressed.
See https://github.com/rust-lang/mdBook/issues/1847
Full quote from the link:
There isn't a specific setting for the width. Something like this should work:
:root {
--content-max-width: 500px;
}
There are several css files and such that you can override. https://rust-lang.github.io/mdBook/format/theme/index.html discusses the files, and mdbook init --theme will give you a copy of the defaults.
The answer of sarema points exact to the correct solution, but there is still one detail which is important. So, for everyone else who is interessted in this problem, here the full solution:
In the main book.toml file you can specify a custom .css file:
[output.html]
additional-css = ["custom.css"]
In this custom.css file you can override all available css classes as sarema already has posted:
:root {
--content-max-width: 500px;
}
When you take a look to the page source within your web browser, you can examine all the available css classes. https://rust-lang.github.io/mdBook/format/theme/index.html gives an overview about the main .css files, but in order to get the details there is no other solution than to examine this files by hand. So in my case I have additionally changed some margins of .css classes I found in the page sources like this:
:root {
--content-max-width: 80%;
}
.chapter li.part-title {
color: var(--sidebar-fg);
margin-bottom: -5px;
margin-top: 11px;
font-weight: bold;
}
.chapter li.chapter-item {
line-height: 1.5em;
margin-left: 0.5em;
margin-top: 0.6em;
}
Hope, this description is helpful for some others who despair of the styling of their mdbook ;)
I want to include a font of my choice in Firefox Reader View Styling.
Please let me know if Firefox uses a local CSS file for styling or it is located somewhere else?
Moreover What is the CSS File name Firefox uses for Reader View and how can I edit the same.
Thanks in Advance!
You find the CSS file for the "Firefox Reader View" under the path
cd /home/$USER/.mozilla/firefox/<PROFILE_FOLDER>/chrome/userContent.css
only if you already did set it up:
Enter in your Firefox URL-search-bar: about:support.
Open your Profile Folder by selecting Show Folder.
Create a new folder inside your profile folder called chrome.
Navigate into chrome and create a new plain-text file called userContent.css
Edit userContent.css according to your CSS preferences.
In new Firefox profiles, starting from Firefox 69, you additionally have to enable toolkit.legacyUserProfileCustomizations.stylesheets in about:config, cf. Firefox 69: userChrome.css and userContent.css disabled by default.
In my case it looked like the following:
cd /home/$USER/.mozilla/firefox/<PROFILE_FOLDER>/
mkdir chrome
cd ./chrome
touch userContent.css
CSS-Example:
#-moz-document url-prefix("about:reader") {
body.dark {
color: salmon !important;
background-color: black !important;
}
body.light {
color: #222 !important;
background-color: #EEE !important;
}
body.sepia {
color: #5B4636 !important;
background-color: #F4ECD8 !important;
}
body.serif {
font-family: serif !important;
}
body.sans-serif {
font-family: sans-serif !important;
}
}
See this Reference for further explanations.
You don't need to add or change .css, follow these steps:
In address bar, type about:config, then click the button to accept the risk.
In the search box, type or paste the new preference name: pdfjs.viewerCssTheme
Double-click to edit and set the value to 2 for a dark theme, then click the blue checkmark button to save the change. (0 = default, 1 = light).
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 have a Wordpress website and am trying to change the font size of the main menu. From Chrome, When I do an "inspect element" on the page I can see that the menu element is laid out thusly:
.blog-menu a {
font-size: 13px;
}
When I change the font-size to another value from within inspect element, the change is properly displayed on the page. However when I add the code:
.blog-menu a {
font-size: 25px;
}
to my style.css file, the change is not registered. Any thoughts as to what I'm doing wrong? Probably something stupid.
This can often be caused by styles being applied from your cache. To clear your cache and reload the page, pressing CMD/CTRL+Shift+R (Mac OSX and Windows, respectively).
If the new style is still not being applied, it's possible that another style is overriding it. This can be caused by a style being applied after your code, or before your code with the !important tag.
Some questions that may help you figure this out:
What does your environment look like? Is your style.css in a child theme's folder? Is another stylesheet being called after your style.css?
Updated as per comment conversation:
<style type="text/css">
.blog-menu a
{
font-size: 25px !important;
}
</style>
<div class="blog-menu">
<a>This should be 25px</a>
</div>
I have the font-awesome icon-font working on my locahost as well as my mysite.com which are both nginx servers. Strangely, when I tried to implement a similar icon font set from Glyphicons the icons only render on mysite.com but not on my localhost.
Here's what the icons look like normally vs. how they look on my localhost:
normal:
busted:
The problem is that the font-family: 'Glyphicons' attribute is not being recognized on my localhost because simply commenting out the font CSS property on mysite.com re-creates the red box appearance:
.glyphicons i::before {
position: absolute;
left: 0;
top: 0;
font: 24px/1em 'Glyphicons'; // commenting out this line re-creates the red box pattern
font-style: normal;
color: #1D1D1B;
color: red;
}
I'd like to thank #David (see comments above) for helping me answer my own question. The issue was a file permission issue. I had just added the Glyphicons folder to my localhost application folder (i.e., /html) and it didn't have the right permissions. Simply typing the following in the command line solved the problem:
html TimPeterson$ chmod -R 777 assets/glyphicons/ /*this command allows access to all (777) for all files and folders (-R) within the glyphicons folder*/
So it wasn't CSS, mime-types, or anything else to do with Nginx as I had originally thought.