I have a paragraph style applied to a wrapper, but in Internet Explorer (I'm testing with IE 11) the styles are not cascading.
My css is as follows:
.typo--paragraph p, .typo--paragraph {
font-family: "Brown Regular", "Helvetica", sans-serif;
font-weight: normal;
font-size: 13px;
font-size: 0.813rem;
line-height: 1.375rem;
color: #7272f1;
text-align: left; }
I cannot apply the .typo--paragraph class directly to the <p> tags in some cases, as the CMS has limitations. However, in cases when I do apply the style directly, it works fine.
The HTML follows this structure.
<div class="typo--paragraph">
<p>Paragraph text</p>
</div>
It's working as expected in every other browser
Related
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;
}
I'm going to start with saying I'm a total noob in coding school and to please be kind. I'm attempting to help my husband with his blog: https://directionandpace.com/ There is an issue with the title Direction and Pace.
First, he asked if I can remove title link that redundantly links back to the page. There isn't a way to easily edit WordPress HTML (just the stylesheet) so I thought I'd figure that out later and just change the link color to black instead of blue. ;)
Second, we both realized that when you click on the second page "Who We Are" the title changes to a non bold serif and ITS DRIVING ME CRAZY.
Code Below:
What should be just the body and the only Serif in the CSS:
body, button, input, select, textarea {
color: #776f6f;
font-family: Merriweather, Georgia, serif;
font-size: 15px;
line-height: 2;
}
The CSS for the Title:
.entry-title {
font-family: Montserrat, "Helvetica Neue", sans-serif;
font-size: 28px;
font-weight: 700;
margin-bottom: 5px;
}
Is it somehow assuming the entire second page (including the title) is the body? Halp.
The issue is that on your homepage that text is wrapped in a <h1> element but in the who-we-are page it's wrapped in a <p> element. Your CSS has the rule:
h1, h2, h3, h4, h5, h6 {
margin: 0 0 15px 0;
font-family: Montserrat, "Helvetica Neue", sans-serif;
font-weight: 700;
text-rendering: optimizeLegibility;
color: #1a1a1a;
}
that is applied on the homepage but not on the who-we-are page. Easiest solution would be to update the code or template for the who-we-are page to change the <p> to a <h1> to match the home page.
Home page heading HTML:
<div id="site-identity">
<h1 class="site-title">Direction & Pace</h1>
<p class="site-description">Explore. Experience. Always.</p>
</div>
Who we are heading HTML:
<div id="site-identity">
<p class="site-title">Direction & Pace</p>
<p class="site-description">Explore. Experience. Always.</p>
</div>
The title on the main page is wrapped in a heading tag, so it's getting the correct heading styling:
<h1 class="site-title">Direction & Pace</h1>
However, the title on the about page is wrapped in a <p> tag, so it's getting the body styling:
<p class="site-title">Direction & Pace</p>
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
On the left is Chrome and on the right is IE9.
As you can see with the image above, even with the Meyer CSS Reset there are yet inconsistencies between browsers. Two examples in this image:
IE9 clearly has a darker font for just about all text.
For whatever reason, the <hr/> tags aren't lining up (but they sure are close) and that throws off the rest of the content.
Is there something more I need to do, other than applying the Meyer CSS Reset to get some more consistency between these browsers?
Additionally, with the content you see above, other than colors and font sizes, there are no margins or padding applied after the reset.
CSS
h1 {
font-family: Lato;
font-size: 26px;
font-weight: normal;
color: #154995;
}
h2 {
font-family: Lato;
font-size: 24px;
font-weight: normal;
color: #333333;
}
h3 {
font-family: Lato;
font-size: 20px;
font-weight: normal;
color: #154995;
}
h4 {
font-family: Lato;
font-size: 18px;
font-weight: bold;
color: #333333;
}
h5 {
font-family: Lato;
font-size: 16px;
font-weight: bold;
color: #333333;
}
.small-text {
font-family: Arial, sans-serif;
font-size: 12px;
font-weight: regular;
color: #333333;
}
The differences you point out are all based on the fact that two different fonts are being used in your chrome and IE9 outputs. Once you tweak the css font-family so both browsers use the same font then it should be ok.
UPDATE:
After seeing your css, you're specifying only Lato font for your elements, it seems both chrome and IE9 can't find the font Lato so both are applying a default font, which is different from one to another, try specifying fallback fonts like:
font-family: Lato, Arial, sans-serif;
If above still give you different outputs then Lato is being picked in one browser and not other, you can check that by using:
font-family: Arial, sans-serif;
for all your elements and see the output is the same on both browsers.
UPDATE 2:
Also see instructions on how to add a Lato webfont to your website:
http://www.google.com/webfonts#UsePlace:use/Collection:Lato
According to me font-family you are using is probably not a system font, it's a web font so what's the thing here is 1 browser is taking up the web font and other is not, so the default Times New Roman font is used
The introduction of #font-face in CSS3 allows web designers to use fonts that look the same across all browsers. That is what I thought until trying it out with the following code in jsFiddle:
HTML:
<div>
The_Quick_Brown<br>
Fox_Jumps_Over<br>
The_Lazy_Dog
</div>
CSS:
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url('http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
}
div {
display: block;
width: 496px;
height: 86px;
font-size: 1.3em;
font-family: 'Open Sans';
font-style: normal;
margin: 0;
border: 0;
padding: 0;
background: cyan;
letter-spacing: 1.44em;
line-height: 1.44;
overflow: hidden;
}
This is the view from Firefox 12.0. Take note of the partially obscured 'o' in 'brown', the position of 'g' in 'dog' and the underscore '_' at the bottom edge.
This is the view from Google Chrome 19.0.
Despite explicitly setting letter-spacing and line-height for the same font, why are the results still different?
Your code is correct. The problem is your browser/ Each browser (browser rendering engine to be specific) renders contents in a different manner. You may not get the exact same output from each browser all the time. The features and all other blings might be the same but it is almost always a different story in terms of rendering a web page.
we don't have nothing much to do in this issue. Its totally depends on the browser's text rendering engine. Every single browser renders text differently.