I am using the Bootswatch Lux theme on my Django based site, but bold text just appears as little different from normal text.
Is it possible/wise to change the css is some way to produce a greater differentiation between normal and bold text?
If you use font-weight: bold, there are not many things to change because that's the default bold of the font you use. So there are 2 options, one option is to change the font and the other is to declare a new class (say bold) and give a darker color to create a more clear difference. But if you are talking about headings and buttons you can go to _variables.scss and change the font-weight to what you need.
Related
Vuetify 3 offers several classes to style font in different weights of bold and italic. But there does not seem to be a class that is equivalent to the CSS directive "font-style: normal;"
See the docs here: https://next.vuetifyjs.com/en/styles/text-and-typography/
Am I missing something?
Why do you need this, you might ask. Let me explain: I try write semantic HTML and thus I'm using em to highlight important words or phrases. But em is styled as italic on most browsers by default. I want to style it bold and colored instead, but not italic. So I need to overwrite this default style.
Is there any way to do this with Vuetify classes or is plain CSS the way to go here?
I'm using opencart in farsi language and I decided to change the font of my website. First I tried to change the font style in "body" element in css. But unfortunately it didn't work. Everything was done carefully, I used "font-face", uploaded fonts and everything. But it didn't work and I did this in main css file.
* {
font-family: something;
}
After I did so, all of the pictures in the website have lost quality, and none of the icons are shown...
how can I fix it...?
Regards
Icons are not shown because you are overriding the font family.
Have a look at Glyphicons or Font-Awesome
http://fontawesome.io/
http://glyphicons.com/
They use a font to print the icons.
For the image quality I have no clue, try to restrict the range of your font override. Maybe it's a bug on the browser that gets angry if you set a font-familty to an img tag (I'm guessing)
I'm using Wordpress.
Is it possible to set a font-family for RTL text and headers (I'm not using WPML or Polylang, just text aligned to right and written in Arabic), different from the one my theme uses as default? ie. keep the default font of my template for English language, but use a different font for text and headers (h1, h2…) aligned to right (or written in RTL language like Arabic and Hebrew).
How do I do that using my themes's style.css or a custom css?
Thanks.
This is tricky, and it really depends on what exactly you want to achieve and how you do it. You can, however, take advantage of the fact that RTL blocks (and inline text) uses the dir="rtl" property to set a general CSS rule that captures the elements that have those properties.
For example:
<h1 dir="rtl">עברית</h1>
And then add a CSS rule like this:
*[dir="rtl"] {
font-family: serif;
}
This isn't perfect and you might have to have some adjustments, but it could at least do the trick. You need to make sure all of your RTL text is defined with dir="rtl" -- which is a good practice regardless, and what W3C recommendations are.
You can check this jsfiddle as an example (I added colors to the rule to show how it affects the relevant RTL pieces).
I would like to add the following image...
in to a font-family that I am using on my website...
http://fortawesome.github.io/Font-Awesome/
which does not include this as an icon option.
What is the most effective and efficient process in achieving this?
You can create your own icon font-family with Inkscape using svg vector images. There is a great tutorial on webdesignerdepot.com about this. Don't add icons to an existing font whether that is possible or not, Font Awesome might get updated now and then with new fonts.
For my Wordpress website, I have added the cufon plugin and uploaded my font. The code (shown below) is what I put in the cufon plugin box to have my uploaded font show. The font is quite faint and there is no "bold" version of the font. I would really appreciate help for the following that I just can't figure out:
Increasing the font weight of the font or making it bold.
Replacing my navbar menu font with this Gruppo font (I'm not sure the replacement code for changing it)
Cufon.set('fontFamily', 'Gruppo').replace('#content');
You would have to access the stylesheet of your theme and just find the block referring to the nav-bar styles and switch out the font right there. Make sure you know what you're looking for (e.g. class name or id name for the specific nav-bar). Something like this:
.nav-bar-style{
font-family: 'Gruppo';
}
You can get to your style.css right from the editor under Appearance tab or if you are in ftp you can just go into the file by navigating to it. Usually the path would look like
domain.com/wp-content/themes/THEMENAME/style.css (or .../THEMENAME/styles/style.css)
Regarding the boldness issue, only the font itself can provide a browser with a bold version of itself. If the font in question has no bold characters, then it seems to me that you have only the following 2 options:
1) choose another font, this time one with bold characters
2) use the CSS text-shadow property to provide the characters with enough text shadow to look a bit darker, e.g.,
nav-bar {
font-family: 'Gruppo';
text-shadow: 5px 5px 0 black;
}
I'm not sure that this second option will make a dramatic difference, and it might make some letters look weird, but it's easy enough to try.