Specifying h1 font family doesn't change font? - html

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

Related

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.

Bolded text in HTML reverting to a different font

I am encountering an issue with the font in a webpage I am making.
I have a font called Gotham for the main copy and I have it in the CSS as:
body * {
font-size: 1em;
font-family: Gotham;
}
I have also got a separate font used just for the company logo. I have added them in using font-face as below:
#font-face {font-family: neosans; src: url("../fonts/neo_sans/NeoSan");}
#font-face {font-family: neosans; src: url("../fonts/neo_sans/NeoSans-Bold"); font-weight: bold;}
Basically I am wanting to make company logo by using the neosans font as follows:
CompanyLogo
So I have this:
<h1><b>Company</b>Logo</h1>
And CSS as:
.splash-title h1 {font-family: neosans; font-size: 6.5em; margin: 0; padding: 0;}
But for some reason, the bolded word in the company logo is reverting to the Gotham font in bold, not the neosans. I initially thought it may be the NeoSans-Bold file, or font-family screwing something up and therefore making it Gotham, but I changed the Body * font family to neosans and it the logo looks as I want it to.
Okay, I think I have fixed this.
Originally I had:
body * {
font-size: 1em;
font-family: Gotham;
}
I have just taken the Asterisk * out of the body in CSS and that seems to have done the trick. I have just been reading about it and I must have used it without fully understanding what it does.

Thin font looks bold, despite css stylesheet

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;
}

Outlook.com changing font family in html email

When I use the line with the h3 tag by itself, the correct font is shown. Once I add the line with the h1 tag, fonts for both are incorrect. Does anyone know what is going on here? I'm at a loss. Thanks.
Here is my code:
<h1 style= "color:#000000; font-family:'Gotham-Light','Century Gothic', sans-serif; font-size: 58px; mso-line- height-rule:exactly; line-height:58px;margin-bottom:0px;padding-bottom:0px; font-weight:normal">How LTCI is Priced
</h1>
<h3 style="color:#B21F24; font-family: 'Century Gothic', sans-serif; font-size: 32px; font-style: italic; mso-line-height-rule:exactly; line-height: 100%; text-align: left;font-weight:normal">Dynamics of LTCI Pricing
</h3>
Outlook renders html with Microsoft Word's html rendering engine and only accepts certain fonts. The best practice for getting around this would be to chain your fonts how you did.
You already aswered the question but I thought I'd add a bit of the why. :)
https://litmus.com/blog/outlook-2013-still-powered-by-word-now-available-for-email-testing
I already found the answer to this - I hope it helps someone else. Outlook.com didn't like 'Gotham-Light'. As soon as I removed it everything else worked as expected.

Slow rendering using "Sans-Serif"

I have a odd issue on my "in-development" website here: http://www.cphrecmedia.dk/musikdk/stage/
The H1-h6 fonts are just "sans-serif", but often in Chrome it shows another font (screenshot: http://cl.ly/image/260B0H0l1w0C). When the mouse hover the navigation it changes to the right font. FYI this is how it should look like: http://cl.ly/image/442l071M3N1B
The code used for font is:
.nm li a {
float: left;
font-family: sans-serif;
height:22px;
padding: 12px 14px 7px 14px;
color:#white;
font-size: 12px;
line-height: 20px;
}
I mainly develop using Chrome, so I'm not sure if the issue is present in other browsers. Have anyone of you seen this issue before?
'sans-serif' is not a font name it's a font family specification.
Use a sans-serif font name like "Arial" or "Verdana" or else you will have unexpected results (the browser may replace your font with generic ones).
Try using custom font method by downloading the font and keeping it in your fonts folder.
Example:
#font-face {
font-family: myFirstFont;
src: url('Sansation_Light.ttf')
,url('Sansation_Light.eot'); /* IE9 */
}
div
{ font-family:myFirstFont; }
Try using custom web font from google:
http://www.google.com/fonts
Select a font and uses one of the three metods, i prefer CSS method.
Example:
#import url(http://fonts.googleapis.com/css?family=Roboto);
Import this in CSS and use this for you text: font-family: 'Roboto', sans-serif;