So I got this the body css as followed:
body {
font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
}
There is no other css rule that overwrites this rule (checked with Firebug). For some reason my Trebuchet MS font doesn't work. In Firebug it just shows
font-family: Arial, Helvetica, sans-serif;
The font is active on my computer so that shouldn't be the problem. If I write Trebuchet MS infront of Arial in Firebug it does work.
Solution: Always make sure to clear your cache/turn cache off when developing websites..
Solution: Always make sure to clear your cache/turn cache off when developing websites..
Related
I have a page on my website where I want to use a google font for the whole page except for the navbar. I want the navbar to keep the default bootstrap font. I set the body font to be my chosen google font. I am not exactly sure how I can change the navbar to be default bootstrap font.
.nav-link{
font-family: $font-family-base;
}
I read on the bootstrap site that this is the variable that contains the font. I'm not sure if this is the proper usage of it.
The base font family refers to the following line:
"Helvetica Neue", Helvetica, Arial, sans-serif
Thus, simply do the following:
.nav-link{
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
I have the following CSS directive:
body {
font-family: system, -apple-system, ".SFNSDisplay-Regular", "Helvetica Neue", "Helvetica", "Calibri", sans-serif !important;
}
In Firefox 40.0.3 for Windows, the font displayed is an aliased (jagged) version of Arial:
In Firefox 40.0.3 for Mac OS X, the text is rendered correctly:
If I remove the Apple system font portion of the CSS, then the Windows version of Firefox works better and uses a typeface available to Windows that can be rendered correctly (either Calibri or whichever anti-aliasable sans serif that is available to Firefox):
body {
font-family: "Helvetica Neue", "Helvetica", "Calibri", sans-serif !important;
}
Instead of using a platform- or user-agent-specific CSS file, is there a way to modify the CSS so that Firefox under Windows ignores the portion of the font-family directive it doesn't like?
Fixed up with the following directive:
body {
font-family: ".SFNSDisplay-Regular", -apple-system, "Helvetica Neue", "Helvetica", "Calibri", sans-serif !important;
}
My custom css has the following code
h1 a {
font-family:'Droid Sans Mono''Share Tech Mono''Ropa Sans', sans-serif;
'Poiret One''Cutive Mono''Helvetica Neue''Arial'; !important;
}
this is at the top of my custom css:
#import url (http://fonts.googleapis.com/css?family=Roboto|Droid+Sans+Mono|Share+Tech+Mono|Ropa+Sans|Cutive+Mono|Poiret+One|Lato:100,600,900) ;
and my in page code is:
<h1 style="font-size: 25px; font-weight: bold; color: #ffffff; hover font-family:'Droid Sans Mono''Share Tech Mono''Ropa Sans', sans-serif;"><a href="http://www.xxx.com/?page_id=4348"></h1>
But the none of the fonts seem to be loading. What am I doing wrong?
You're loading the CSS in your custom CSS, which is good, but you're not calling it properly.
You have this:
h1 a {
font-family:'Droid Sans Mono''Share Tech Mono''Ropa Sans', sans-serif;
'Poiret One''Cutive Mono''Helvetica Neue''Arial'; !important;
}
Not only is that code wrong, it's scary.
This is what it should be like:
h1 a {
font-family: 'Droid Sans Mono', 'Share Tech Mono', 'Ropa Sans', sans-serif, 'Poiret One', 'Cutive Mono', 'Helvetica Neue', 'Arial' !important;
}
Each new font call should be seperated with a , and the !important goes before the ; and the style will always only have one ; right at the very end of the css style rule.
Also just for the record, there is no good reason you need to include that amount of fonts, and if Droid Sans Mono and Share Tech Mono and even Ropa Sans don't load, anything after sans-serif won't load as sans-serif will be the font of choice as it's a default choice and should only really be used as a last resort/fallback (if you have other fonts you want to take precedence, that is).
If they do load, then you're only going to ever be using Droid Sans Mono and then it's a waste calling all the other fonts.
Make sure you're actually using all of those fonts, as it could essentially slow down the website load time drastically.
Side note:
Please try and refrain from using inline css (css that is put in using the style in a html attribute). However, if you must do it, you need to fix your h1 tag also:
<h1 style="font-size: 25px; font-weight: bold; color: #ffffff; font-family:'Droid Sans Mono', 'Share Tech Mono', 'Ropa Sans', sans-serif;"><a href="http://www.xxx.com/?page_id=4348"></h1>
Don't just include the word hover in there because it will break your CSS and anything after has a high chance of not running. Again, separate each instance of font with a , and have only a ; after each new css style rule.
You don't need both inline css and a css file styling two identical attributes, just use the .css file.
Please make sure that you have url( and not url (. Although it is a simple (space), it is a function and will not work if the ( is not directly after url.
you're not loading the font anywhere. i suggest you install and use this plugin: http://wordpress.org/plugins/wp-google-fonts/
you'll choose the font you want on your website and you will be able to use it.
hope this helps
Short version
Why do the two sections here render differently, though they both have the same available font as the first item in the font-family: css property?
Extra long version:
As far as as I know, in css, 'font-family' property contains a list of fonts, prioritized from left to right. If the first font is found, other fonts in the list do not matter:
The property value is a prioritized list of font family names and/or
generic family names. w3.org
and
The font-family property can hold several font names as a "fallback"
system. If the browser does not support the first font, it tries the
next font. w3schools.com
So, I have the following piece of html, repeated twice, once inside a #font-simple-stack, and another inside a #font-full-stack div:
<h1 class="serif">
<abbr title="EtaBits">ηBits</abbr> Syria</span>
<small> Web Development & Solutions</small>
</h1>
<p class="sans-serif"><strong>EtaBits</strong> is your ultimate online business partner, it helps your business whether it is internet-based or internet-promoted.</p>
<p class="sans-serif"><strong>EtaBits</strong> is a Syria based Web Consultancy, Development & Solutions firm. We aim at providing you with exactly what you need to reach your users and clients.</p>
...and the following font css definitions:
#font-simple-stack .serif {
font-family: 'Roboto Slab', serif;
}
#font-simple-stack .sans-serif {
font-family: 'Open Sans', sans-serif;
}
#font-full-stack .serif {
font-family: 'Roboto Slab', "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
}
#font-full-stack .sans-serif {
font-family: 'Open Sans', "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
}
First fonts in the two categories, Roboto Slab & Open Sans, are both loaded from google fonts api:
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto+Slab:600|Open+Sans:400,700" />
All said, I expect, that in both times, whether inside #font-full-stack or #font-simple-stack, to have the same result, but in reality, the two stacks renders differently!
I tested on both Firefox and Chromium, under my Ubuntu 12.04 x64 machine.
The font Roboto Slab is not available, as you can see e.g. by viewing the CSS being applied in suitable developer tools of a browser. The reason is that you are asking for that font with weight 600, and no such typeface is available. By Google info on Roboto Slab, the available weights are 100, 300, 400, 700.
The google font stylesheet you're calling in doesn't actually have the Roboto font in it.
See below:
http://fonts.googleapis.com/css?family=Roboto+Slab:600|Open+Sans:400,700
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
If you try separating the two calls out it may work.
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
The font 'Roboto' isn't being called, so the first one fails on Roboto, and displays the default serif instead.
The second has a load of fall back fonts and so it displays one of these instead, so effectively, it's displaying two seperate fonts.
There are two possibilities:
You are calling one of the div's incorrectly (wrong id) and/or
One of both of the Google Font's are not loading properly
If it works in one div and not in the other there could be a problem with the way you are calling the div. In other words you may not be calling the div by the correct id. It works with one id but not with the other yet there is no difference in the first choices of the font stack from the coding you have shown us.
-or-
You are getting system fonts for serif and sans-serif in the first div and perhaps some other choice in the font stack for the second div. This is the more likely scenario.*
Without seeing the html code where you call the div's by ID and not seeing the resultant font on the screen it is difficult to do anything but speculate.
I'm trying to use the "Helvetica Light" font, which comes bundled with Helvetica. To do this I read that I had to specify "Helvetica Light" AND font-weight: lighter. I've gotten this to work only by doing this (in SASS):
p
font: "Helvetica Light", Arial, sans-serif
font-size: 12px
font-weight: lighter
and in other instances,
h2.light
font: Helvetica, Arial, sans-serif
font-size: 12px
font-weight: lighter
(or with font-family instead of font)
which is really weird and the only combos that works so far (combining all properties into 'font' doesn't work, and calling the font: as font-family: sometimes doesn't work.
In another rule, I wasn't able to get it to work unless I ONLY had font-weight: lighter with no font specified (but it inherited Helvetica).
Now I copied the exact same font styles as the p and put it in an h4 and it no longer works. Wtf? What am I doing wrong/why is this so buggy?
EDIT: THIS IS NOT A SYNTAX PROBLEM. To the answers below, note that I am using SASS. No semicolons and brackets needed. Also the file I am editing is 5k lines long (a hand me down) and grouped into somewhat organized sections. So I'd like to keep the sections intact until I can refactor it, but then I can't group all the p's and h2.lights together since they are in different sections.
Thanks!
Try this.
p
font: 'Helvetica Light', 'Helvetica', Arial, sans-serif
font-size: 12px
font-weight: 100
Just for reference, lighter works relative to the inherited value. It's better to use absolute values.
http://www.w3.org/TR/CSS2/fonts.html#font-boldness
what finally worked for me was to have font-family as Helvetica, and font-weight as lighter (but not the condensed format, which doesn't work).
Note: this answer was written before the OP specified SASS. It applies to CSS only.
A couple of things you should do to clean this up:
Semi-colons
All your CSS rules should end with a semi-colon, such as font-weight:lighter;
Grouping
As you have 2 identical CSS rules, the fastest and most concise way to do it is this:
p,
h2.light,
other_rules {
font: Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: lighter;
}
Then for the one rule where you want a different font,
p{ font: "Helvetica Light", Arial, sans-serif; }
Be sure to put your exceptions below the general rules (i.e. in the order I've shown you here) because CSS is implemented in order, and a rule further down the document will take priority.
Try this:
p, h2.light
font: "Helvetica Light", Arial, sans-serif
font-size: 12px
font-weight: lighter
inheritance, establish a base metric typography, so device doesn't crack-up style intersections
body[role="put something here"] h1, p, etc
font-size: 62.5%
Helvetica light, mix with unix-mac-windows-webfont (webfont needs js, may pull you up over edge
font-family
Helvetica Light, Helveticaneue Light, Calibri Light, Helveticaneue, Helvetica, Gill Sans, Myriad Pro, Arial, Lucida Grande, sans-serif
degrade per Meyer, or try just 2 hl, ss... also, check out your mixin
https://github.com/less/less.js/issues/389
Sass for Web Designers by Dan Cedarholm and Chris Coyier