I want to make my font family in CSS : work sans
how can I make it
my code :
<h4 style="color : white ; font-family :work sans; font-size:14px;">hello word</h4>
You can define the following selectors in order to achieve the styling for the h4 element you asked.
The whole code is available in codepen:
or append the following selector for the h4 element in your css file:
h4 {
color: white;
font-family: work sans;
font-size: 14px;
}
Related
I want to know if there is a way to apply font family for HTML Unicode symbols. I am using degree celsius in html as ℃ and also tried placing in css as \2103. Currently the degree and C has a default font. But, I want to change the font to my required font-family.
You can create a span around that character to which you apply a class that has a font-family definition according to the desired font.
p {
font-size: 36px;
font-family: Arial, Helvetica, sans-serif;
}
.x {
font-family: Georgia, Times, serif;
font-weight: bold;
color: blue;
}
<p>The temperature is 28°C right now.</p>
<p>The temperature is 28<span class="x">°</span>C right now.</p>
I'm trying to change the font-family of the pre tag, but it's not working:
<pre font-family: "Avenir", Verdana, sans-serif; style="font-size: 10px">.......</pre>
How to fix it withing the tags without using css?
You need to put all of your inline CSS inside the style attribute, not just your font-size:
<pre style="font-family: 'Avenir', Verdana, sans-serif; font-size: 10px">.......</pre>
Im trying to change the font-family of the pre tag, but it's not
working
If you're using inline CSS then you must encapsulate all the CSS rules inside the style attribute.
change this:
<pre font-family: "Avenir", Verdana, sans-serif; style="font-size: 10px">.......</pre>
to this:
<pre style="font-size: 10px; font-family: "Avenir", Verdana, sans-serif;">Hello World</pre>
If you need to use inline CSS, you should add
style
attribute to make the code meaningful.
If you need to add the required styles to all the pre tags add the below mentioned style to your style sheet:
pre
{
font-family: "Avenir", Verdana, sans-serif;
font-size: 10px;
}
I'm using custom fonts in WordPress. I do it by defining font family. I'm having problem if line spacing with One if my fonts. If I use line-height code in my custom css I'd theme, it's applied to all the fonts which isn't required. I just want to change line spacing of problematic font. Can we define line spacing for a font while defining its font family?
Best Regards
You can implement font-family with line-height in one class. I mean something like this:
HTML:
<div class="lato-font">Text</div>
<div class="monospace-font">Text</div>
CSS:
.lato-font {
font-family: Lato, sans-serif;
line-height: 1.6;
}
.monospace-font {
font-family: monospace, serif;
line-height: 1.6;
}
In this case you can set custom line-height for each font.
You'll have to define line-height for each element or class that uses the custom font.
h1,h2,h3,h4,h5,h6,.lead-text,.some-other-class,li {
font-family: ######;
line-height: 20px;
}
I have a WordPress site here: http://www.iliveaccountable.com/
That I want to change the first element "iLiveAccountable" to font family to CaviarDreams_Italic.ttf and change the text-transform into "none" so that it will follow the exact text.
I place all my fonts on a folder and added this code on my style.css sheet and tried to play it using the inspect element since I am only targeting the first element in the navigation:
#font-face {
font-family: Caviar Dreams;
src: url(http://www.iliveaccountable.com/wp-content/themes/unicon/fonts/CaviarDreams_Italic.ttf);
font-weight: normal;
}
li#menu-item-15113{
text-transform: none;
font-family: Caviar Dreams;
}
For some reason I can't still change the font family as well as the text-transform. Any idea what I am doing wrong here? I really need to change it.
Try using
#menu-item-15113 a{
text-transform: none;
font-family: Caviar Dreams !important;
}
The "a" tag has its own font which is "Montserrat" thats why you can't change them via "li" tag only.
I have a little experience with css, and learning it day by day, but I need to figure this out.
I have a little problem with defining the styles for the page.
My page contains the following sections:
<head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:Light' rel='stylesheet' type='text/css'>
</head>
.
.
.
.
<article>
<header>
<h1 class="txtName">Your pathway to success starts here</h1>
</header>
<p class="txtDesc">
SomeText.................SomeText
</p>
</article>
and I have the .css file containing the following section:
article h1
{
color: #0140be;
font-family: 'Open Sans';
font-style: Light;
font-size: 20px;
font-weight: normal;
}
article p.txtDesc
{
line-height:1.6;
font-family: 'Open Sans', Arial, sans-serif;
font-size: 14px;
margin-left: 18px;
font-weight: 400;
}
The text inside the header is displayed with correct styles, however, text inside the paragraph is not displayed correctly. Looks like it is not recognizing given styles.
It displays the right font-family, but does not recognize font-weight.
What am I doing wrong here? Need some help.
Thank you
Link : https://www.google.com/fonts#UsePlace:use/Collection:Open+Sans
As you can see there is styles for fonts like "Light 300 Italic" or "Extra-Bold 800". You must select that styles for bolder or lighter fonts. Then you can use font-weight in css otherwise it doesnt works.
Dont Forget: When you select "light 300" you can use font-weight:300. So font-weight:200 is not make any differences. If you select too much font styles it will take more time to load fonts from google when opening your page. You can see performance indicator on right.
Your link tag should look like
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
You need to include each of the font weights that you want in the URL.
Your styles should be:
article h1
{
color: #0140be;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: 300;
}
article p.txtDesc
{
line-height:1.6;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
margin-left: 18px;
font-weight: 400;
}
You select which font style you want with the font-weight attribute.
JSFiddle