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.
Related
I am trying to get a custom font working, code as follows:
#font-face {
font-family: 'Biko';
src: url('/fonts/Biko_Bold.otf') format('opentype');
font-weight: bold;
}
body {
font-family: 'Biko', Fallback, sans-serif;
}
This font displays like so:
However this is not correct, the top of the letter i should be rounded, this is what the font should look like (note this is a screenshot of the OTF preview):
Any ideas what I might be doing wrong here?
I am currently trying to add a custom font to my website but it wont seem to work, I am not very good atm programming but my friend isn't home so I just wanted to get a solution for him. It currently works if using Calibri as font but any custom downloaded fonts dosent work. He is trying to use the HelveticaNeue font. The font is located in a folder called "fonts" in godaddy's server folder thing. Thanks! :) Here is the code:
#font-face {
font-family: "HelveticaNeue";
src: url("fonts/HelveticaNeue.otf);
}
h1{
font-family: Calibri;
letter-spacing: 6px;
}
p{
font-family: Calibri;
letter-spacing: 1px;
}
Add a simple font-face
#font-face {
font-family: 'Typogrotesk'; /*a name to be used later*/
src: url('TheURLToTheFontFile'); /*URL to font*/
}
then use it from css, html and javascript like this
This is for css
.example {
font-family: 'Typogrotesk';
}
The best way that i use for all my custom font is to generate the neccessary code for my font using this fontsquirrel
You need url that directed to the font, and helvetica neue is paid font. Use web safe font font-family: Helvetica, sans-serif; is easiest way to load helvetica
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.
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
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;