Thin font looks bold, despite css stylesheet - html

I am using the free, open source font "Roboto".
Here is my code:
font-family: 'Roboto',Sans-Serif;
font-weight: 100;
This code works great on my home page. It is thin and looks great.
But on my members area pages, it looks semi-bold.
I thought, perhaps it was because of the browser I was using (Google Chrome), but I debunked that idea because my homepage looks fine while using Google Chrome. Also, I haven't used any other browser.
Any tips on how to fix this issue?
Here is a screenshot to compare.
http://i.stack.imgur.com/XibIK.png
Here HTML code for "Username": (Note, all text on this page is boldish looking. Not just username. So it's not just this code.)
<div class='title'>Username</div>
Here HTML code for "Money doesn't buy happiness":
<h1 class="h1">Money doesn't buy happiness</h1>

As the people stated in the comments, a parent class is over-ruling the h1 and this results in bold text. I also see that you have a class h1 on the h1 element.
CSS
.title, .h1 {
font-family: 'Roboto',Sans-Serif;
font-weight: 100;
}
Or with !important to override the font-weight. Please note that !important will be helpful on classes that you always want to be same. For example on headings or buttons.
.title, .h1 {
font-family: 'Roboto',Sans-Serif;
font-weight: 100 !important;
}

Related

Converting a static HTML design to blog-like style reminiscent of magazine and finding a working CSS style?

This is the codepen for my HTML layout for a magazine - link here.
I have been experimenting with the CSS and trying to achieve a more blog-like design with my CSS, to emulate the effect seen at https://www.autocar.co.uk/car-review/bmw/7-series/first-drives/bmw-7-series-750li-xdrive-2019-review
(well, the way the article and sidebar with other articles is; the article and Driven this week part)
Currently I have this CSS:
body {
background-color: gray;
font-family: Verdana, sans-serif;
font-size: 14px;
}
p {
font-family: Verdana, sans-serif;
font-size: 13px;
line-height: 21px;
}
header {
background-color: #FFFFFF;
}
div.article {
width: 800px;
height: auto;
background-color: #FFFFFF;
float: right;
overflow: auto;
padding: 5px;
}
div.article img {
height: 340px;
}
but what sort of padding etc. could I use while keeping the div.article as white (FFFFFF) and get the header to work more effectively with the title?
if the header is in anything but h1, h2, h3 etc. it doesn't quite work - example at forked codepen.io copy - https://codepen.io/anon/pen/pBgQjw
Although this uses Verdana here for ease of use, what's the best way of getting FontSquirrel fonts like OpenSans to work locally (i.e. not linking to online source, but the directory the fonts are in); I've often used .ttf when doing fonts other than Arial or Verdana.
I may be using Gotham font soon, but for now it's OpenSans and OpenSans Bold.
OpenSans Bold is for h1, h2 in the CSS soon.
This is only a testing page on localhost, but it maybe used as a template for a PHP site.
No Javascript is in use yet but if you have any good suggestions for ones that could work, I'd appreciate it. (I've kept the design simple for now).
The grey background will be kept, and div.article in white.
I would welcome any advice on how to turn this from looking rather staid into a more professional, blog-like design.
I think you should try to use a CSS framework, e.g. Bulma (which is lightweight and easy to use and based on CSS flexbox). See Bulma docs here: https://bulma.io/documentation/
As for the font implementation I think #font-face should do the trick - you just have to download the font to your server (or local device).

CSS Font styles not working

I've been trying to add a css font style like the one on the landing page of http://www.lecrae.com. The text that says "LECRAE", I'm trying to use the same css style, but it doesn't seem to be working for me, only "W" in the word "Welcome" shows, and it doesn't look like the font too. Here's my code below:
CSS
.header { font-family: Futura, "Trebuchet MS", Arial,sans-serif;
font-weight:700;
letter-spacing:14em;
line-height:1em;
color:#333;
font-style:normal;
font-size:120px;
}
HTML
<h1 class="header">Welcome</h1>
There are three issues here:
Only the first letter "W", of your heading "Welcome" is showing.
The font(s) you specified are not showing.
You want to use Futura, but it isn't available for free.
The first issue is solved easily. You are using a huge letter-spacing of 14em, I assume you made a typo when copying the given source and it was supposed to be .14em. This explains why you can only see the first letter: all other letters are being pushed out of the screen.
The second issue is also solved easily. You are specifying fonts that might not be available on a users computer. For example, most Linux distributions do not ship with any of the fonts you specified and would hence fall back to sans-serif. If you really want to use a specific font, #import that font from a source like Google Fonts. This way, the font will be downloaded by the user's browser.
The third issue is easy as well: you either pay for the font or you need to use a different, freely available font instead.
Putting that together:
#import url('https://fonts.googleapis.com/css?family=Open+Sans:700');
.header {
font-family: 'Open Sans', sans-serif;
font-weight: 700;
letter-spacing: .14em;
line-height: 1em;
color: #333;
font-style: normal;
font-size: 120px;
text-transform: uppercase;
}
<h1 class="header">Welcome</h1>
Also note that you did not copy the text-transform: uppercase rule, which I added here.

Font-Family uses different font on same header

When loading a Google font (Open sans) like this:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700' rel='stylesheet' type='text/css'>
and using it in the CSS like this:
font-family: 'Open Sans',sans-serif !important;
On different pages but the same header, css etc the page loads:
page 1: font-family: 'Open Sans',sans-serif !important;
page 2: font-family: 'Open Sans',sans-serif !important;
On both pages the Google-font and css get loaded.
Anybody a idea what may cause this?
Try to make your CSS rule more specific. I see you're using the !important tag, so you're probably overwriting existing rules from a framework or elsewhere.
For example, if you're trying to give a font to all headers, you probably have other divs surrounding them. Let's say that div's called content:
body .content .h1, body .content .h2 {
font-family: 'Open Sans',sans-serif !important;
}
The best thing to do would be the see why your styles aren't being set in inspect element. Right click with Chrome > Inspect over your headers, and see what's styling them. You should try and not use !important rules anywhere unless completely necessary.

Specifying h1 font family doesn't change font?

I have been stuck on this problem for awhile now, unable to find a solution through other sources. I am trying to change the font size for my h1 tag to oswald bold, I thought I knew how to do it but it doesn't want to work. heres my html...
<div id="Title1"><h1>Widest range of Holden parts in New Zealand</h1></div>
css...
h1 {
font-family:"Oswald Bold", bold, sans-serif;
text-align: center;
font-size: 60px; }
I have found a way of it working through editing the h1 rule directly through the dreamweaver but this creates a new stylesheet "stylesheet.css" which I don't need.
Any input is helpful, thanks.
You have to put correctly and specify the generic family like this:
font-family: 'Oswald', sans-serif;
more info

Font looks different on photoshop and at website

Simple question: Why this 2 fonts looks different at photoshop and at website.
At this picture - this first text is from html code, second is an image from photoshop. The same font, the same size - 30. But this first looks more "bold" than second. Why? I want to have a identically font as it is at photoshop (second picture).
Here css code:
#font-face {
font-family: "SegoeWP";
src: url("fonts/play/SegoeWP.eot");
src: url("fonts/play/SegoeWP.eot?#iefix")
format("embedded-opentype"),
url("fonts/play/SegoeWP.woff") format("woff"),
url("fonts/play/SegoeWP.ttf") format("truetype"),
url("fonts/play/SegoeWP.svg#PlayRegular") format("svg");
font-weight: lighter;
}
#strona {
width: 1120px;
margin-left: auto;
margin-right: auto;
}
#Section1
{
font-family: "SegoeWP", Tahoma, Arial, sans-serif;
font-size: 30px;
}
header, footer, article, section, hgroup, nav, figure {
display: block;
}
body {
font-family: "SegoeWP", Tahoma, Arial, sans-serif;
background-image:url('background.jpg');
background-repeat: no-repeat;
background-position: top center;
color: #ffffff;
}
And html code.
<section id="Section1"> { mywebsite.NET } </section>
<img src="mojeportfolio.png" />
any ideas? Greetings!
MORE
i found, that I have 3 types of SegoeWP font in folder. "SegoeWP", "SegoeWP-Light", "SegoeWP-Semibold". "SegoeWP" looks a litle bit too "bold", but this "SegoeWP-Light" is perfect and looks identical as in photoshop when i doubleclick it. How can I use it on my website? When I change this part -> url("fonts/play/SegoeWP-Light.*"), nothing change at website. What is wrong?
photoshop handles fonts a lot differently than a web browser ... because photoshop used functions like smoothing, kernel and others the font will almost always look different in a browser
To get the same result try using font-smoothing: antialiased, and reducing the font size so it matches your Photoshop image.
The biggest difference is because Adobe Photoshop will not do subpixel font-smoothing—unlike most browsers. In your example image this is easily visible if you zoom in(see the color shifts around the edges). Windows has a history of using an extra crisp form of subpixel font rendering, which exacerbates the problem as the perceived font weight can change severely.
Smashing Magazine has an excellent article on font rendering.
Make sure you are adding the css to the right location sometimes that could be the issue. For full notes on how to lessen the weight of a font you can find it here:
http://www.w3schools.com/css/tryit.asp?filename=trycss_font-weight