I'm in the process of updating a site for someone, and I'm trying to get rid of a global #font-face and apply it only to specific elements.
It was defined like this:
#font-face {
font-family: "neutra";
src: url( /styles/NeutraDisp-Bold.eot ); /* IE */
src: local("Neutra Display"), url( /styles/NeutraDisp-Bold.ttf ) format("truetype"); /* non-IE */
}
#font-face {
font-family: "futura";
src: url( /styles/FuturaStd-Heavy.eot ); /* IE */
src: local("Futura Std"), url( /styles/FuturaStd-Heavy.ttf ) format("truetype"); /* non-IE */
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
font-family: neutra, Arial, Helvetica, Tahoma, Geneva, sans-serif;
}
I only want it on a div that has the class .header and legends (and a few other tags, eventually) so I modified the CSS to look like this instead:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
font-family: Arial, Helvetica, Tahoma, Geneva, sans-serif;
}
#font-face {
font-family: "neutra";
src: url('../../styles/NeutraDisp-Bold.eot'); /* IE */
src: local("Neutra Display"), url('../../styles/NeutraDisp-Bold.ttf') format("truetype"); /* non-IE */
}
#font-face {
font-family: "futura";
src: url('../../styles/FuturaStd-Heavy.eot'); /* IE */
src: local("Futura Std"), url('../../styles/FuturaStd-Heavy.ttf') format("truetype"); /* non-IE */
}
legend{
font-family: neutra, Helvetica, Arial, sans-serif;
letter-spacing: .125em;
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
}
.header{
width: 75em;
height: 12.375em;
background-color: #FFFFFF;
margin: auto;
font-family: neutra, Helvetica, Arial, Tahoma, Geneva, sans-serif;
}
However, the .header font-family is being ignored. All of the other declarations in that rule are used, and Firebug shows the font-family, which indicates to me that it's valid CSS.
In addition, the legend rule works perfectly, and shows the correct font.
Note: I moved the fonts and various other things around when I started working, but I know the new font paths are correct, because the legend rule works. I've also tried "neutra" and 'neutra'.
A pastebin of the entire CSS is here, if you think the problem is somewhere else. I've also created a jsfiddle with a fontface included to see an example of it being ignored.
Old Update
The jsfiddle is doing what it should. I have no idea what is different in my own code.
Update
I've added the offending rule. I think I'm missing something about rule weights, which would be why a lower rule still isn't overriding a higher one.
It's an issue of precedence. Check it out at w3:
http://www.w3.org/TR/CSS2/cascade.html
Your first rule which sets the default as Arial also directly applies the font-face to most html elements. This is unnecessary and causing your problem. Rather you should just set it once, on a top level element like html.
/* this single rule applies the Arial font to the whole document tree under <html> */
html { font-face: Arial, etc; }
/* this would set the font on .header, and everything inside of it */
.header { font-face: neutra, etc; }
In your case, p { font-face: Arial; } and div { font-face: Arial; } and etc beat your your singly nested .header rule. If you cut that long rule back to just a top level element, it will solve your problem.
Small example of the css cascade here, with the original long rule declaration:
<html>
<body>
My text is Arial because I exist under html and there are
no other rules modifying me.
<div class="header">
My text is neutra because I'm a direct child text node of "header"
<p>
my text is Arial because of the rule on "p", which in turn overrides
the rule on "header"
</p>
</div>
</body>
</html>
For a quick check, have you tried :
.header, .header *{
font-family: neutra, Helvetica, Arial, Tahoma, Geneva, sans-serif;
}
Since you're specifying a font-family for a lot of the tags, maybe that first set-up is too "strong".
Is there any chance you are using the html5 <header> element and defining the style for the element in your css as .header {} (a class) instead of header {}?
Related
I'm trying to get Jekyll to use two fonts, one for headings, and one for body text. To this end, I've copied the entire _sass folder to the root of my site, then changed \_sass\minima\_base.scss to include definitions for both fonts...
/**
* Basic styling
*/
body {
font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;
color: $text-color;
background-color: $background-color;
-webkit-text-size-adjust: 100%;
-webkit-font-feature-settings: "kern" 1;
-moz-font-feature-settings: "kern" 1;
-o-font-feature-settings: "kern" 1;
font-feature-settings: "kern" 1;
font-kerning: normal;
display: flex;
min-height: 100vh;
flex-direction: column;
}
/**
* Set `margin-bottom` to maintain vertical rhythm
*/
h1, h2, h3, h4, h5, h6,
p, blockquote, pre,
ul, ol, dl, figure,
%vertical-rhythm {
font: $heading-font-weight #{$heading-font-size}/#{$heading-line-height} $heading-font-family;
margin-bottom: $spacing-unit / 2;
}
Then in \_sass\minimua.scss, I changed the styling for the base font, then added the heading font:
$base-font-family: serif, Times, "Times New Roman";
$base-font-size: 16px !default;
$base-font-weight: 400 !default;
$small-font-size: $base-font-size * 0.875 !default;
$base-line-height: 1.5 !default;
$heading-font-family: sans-serif, Helvetica, Arial;
$heading-font-size: 16px !default;
$heading-font-weight: 400 !default;
$heading-line-height: 1.5 !default;
I also created \_sass\my_overrides.scss which looks like this:
#charset "utf-8";
// Define defaults for each variable.
$base-font-family: serif, Times, "Times New Roman";
$heading-font-family: san-serif, Helvetica, Arial;
But as far as I can tell, the fonts are switched in their use (screenshot below). And I'm probably forgetting something because this whole process is so complex.
So my question is:
How do I get two fonts working with Jekyll, serif for body, san-serif for headings?
I suppose I could also ask if Jekyll has a dual-font facility built in and if not, why not? But perhaps that sounds belligerent? (It's not meant to.)
Screenshot showing switched fonts
You may be able to split your css to target each separately, like this:
h1, h2, h3, h4, h5, h6 {
font: $heading-font-weight #{$heading-font-size}/#{$heading-line-height} $heading-font-family;
margin-bottom: $spacing-unit / 2;
}
p, blockquote, pre,
ul, ol, dl, figure,
%vertical-rhythm {
font: $base-font-weight #{$base-font-size}/#{$base-font-height} $$base-font-family;
margin-bottom: $spacing-unit / 2;
}
When I inspect element using Chrome Dev Tools the default font-size property is missing for the h4 tag. All the other tags like h1, h2, h3, h5, h6 are showing the font-size property.
See the screenshot
I have checked the default style sheet for HTML 4, here also the font-size property is missing.
Reference: http://www.w3.org/TR/CSS21/sample.html
h1 { font-size: 2em; margin: .67em 0 }
h2 { font-size: 1.5em; margin: .75em 0 }
h3 { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu { margin: 1.12em 0 }
h5 { font-size: .83em; margin: 1.5em 0 }
h6 { font-size: .75em; margin: 1.67em 0 }
What might me the valid reason for this behavior?
Thanks in advance.
The reason is that the designer of the browser’s style sheet wanted to make the default font size of h4 equal to 1em, i.e. the font size of its parent. This makes it fit to the scale of heading font sizes. When font-size is not set for an element at all, it inherits the size from its parent, so the result is the same as it would be with h4 { font-size: 1em }. (Not in all circumstances, but in these. The browser’s default style sheet is lowest in the cascade, so a relevant setting in any other style sheet will override it.)
Note that the sample style sheet for HTML 4 in the CSS 2.1 specification is outdated and contain some odd settings that were never implemented in browsers, and many settings have been tuned later. The Rendering section in HTML5 PR contains a much more modern description of typical (and more or less recommended) default settings in browsers. For clarity, it explicitly sets font-size: 1.00em; on h4.
I want to include a global font for my page. I downloaded a .ttf file, and included it in my CSS, but my font won't change.
Here's my code:
#font-face {
font-family: 'oswald';
src: url('/font/oswald.regular.ttf');
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin:0;
padding:0;
border:0;
font-size:100%;
font:inherit;
font-family: oswald;
vertical-align:baseline
}
Where did I go wrong?
Only providing .ttf file for webfont won't be good enough for cross-browser support. The best possible combination at present is using the combination as :
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
This code assumes you have .eot , .woff , .ttf and svg format for you webfont. To automate all this process , you can use : Transfonter.org.
Also , modern browsers are shifting towards .woff font , so you can probably do this too :
#font-face {
font-family: 'MyWebFont';
src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
Read more here : http://css-tricks.com/snippets/css/using-font-face/
Look for browser support : Can I Use fontface
Did you try format?
#font-face {
font-family: 'The name of the Font Family Here';
src: URL('font.ttf') format('truetype');
}
Read this article: http://css-tricks.com/snippets/css/using-font-face/
Also, might depend on browser as well.
You can use font face like this:
#font-face {
font-family:"Name-Of-Font";
src: url("yourfont.ttf") format("truetype");
}
I know this is an old post but this solved my problem.
#font-face{
font-family: "Font Name";
src: url("../fonts/font-name.ttf") format("truetype");
}
notice src:url("../fonts/font-name.ttf"); we use two periods to go back to the root directory and then into the fonts folder or wherever your file is located.
hope this helps someone down the line:) happy coding
Check the console to make sure the resource is loaded. Depending on file and folder structure, your url may be wrong. Notice the difference between:
src: url('/VT323/VT323-Regular.ttf') format('truetype');
src: url('VT323/VT323-Regular.ttf') format('truetype');
src: url('../VT323/VT323-Regular.ttf') format('truetype');
On our site we are using some custom fonts and I have noticed differences on how buttons, input elements and so own vertically align the text. The padding and other properties have different effect on Linux/MAC and PC.
Can you tell me what CSS properties could be causing different results per OS?
Is it better to use em/rem or px or it doesn't matter in this case?
For example the following rule will vertically align text in Chrome on windows but not in Chrome on Ubuntu.
.btn {
font-size: 1.5rem;
line-height: 2.2rem;
vertical-align: middle;
}
OS has nothing to do with the HTML and CSS rendering. Its the browser which is responsible for property difference. Every browser has its own way of implementation so its the browser community which is creating difference in different platforms of browser.To make everything same in all the browsers,it is always recommended to include reset.css at the top
Reset.css
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
I was intending to use Eric Meyer's CSS reset but I stumbled in some cross-browser differences (like input margins). Based on it, i came up with a more agressive aproach:
(This is outdated. Don't forget to check the current revised version at the end of this question and criticize it as you wish)
/* CSS Reset by Hugo Leonardo. Based on Eric Meyer's CSS Reset (just google it). */
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font: inherit;
text-decoration: none;
/* in case "font: inherit" fails (IE7) */
font-family: "times new roman";
font-size: 100%;
font-style: normal;
font-variant: normal;
font-weight: normal;
/* remove this block if you DON'T want to support lame browsers */
}
:before, :after {
content: '';
}
:link, :visited, :hover, :active {
color: inherit;
color: #000; /* for IE7 'inherit' problem (again) */
text-decoration: none;
}
:focus {
outline: 0;
}
ol li, ul li {
list-style: none;
}
table {
/* "collapse" here is because of IE7 (maybe others?). don't remove it as it affects other browsers as well */
border-collapse: collapse;
border-spacing: 0;
}
/* this entire block was copied from Eric Meyer's CSS reset */
/* HTML5 "display" reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
It worked smoothly in all tested browsers:
IE7
IE8
Chrome (newest)
Firefox (newest)
Opera (newest)
The question is: Does anyone see any trouble here? I consider myself not so good in CSS so I don't know if this will get me in any trouble in the future.
Obs.: this reset is for cross-browser issues only. It should (or must!) be followed by generic rules for elements like input, a, code, and so on (ex: input of type "text" would be invisible without borders!). I will be adding things like generic a styles and stuff later. For now I'm resetting things, getting rid of (almost) everything that isn't the same across the major browsers.
PROBLEMS SPOTTED SO FAR
The * selector could cause performance issues.
The * selector with some of the rules override some default styles of elements in a way they can't be recovered. ex: the default style of an input of the type "submit".
Surprisingly the :before, :after { content: ''; } was breaking select elements in Firefox.
In the revised version I tried to set margin: 0 to all input elements. Most browsers ignored it for inputs type checkbox and radio.
REVISED VERSION
/* CSS Reset by Hugo Leonardo Leão Mota
Based on Eric Meyer's CSS Reset: http://meyerweb.com/eric/thoughts/2011/01/03/reset-revisited/
Helped by fellows in stackoverflow: http://stackoverflow.com/questions/6892982/is-this-css-reset-okay */
/* resetting style for every visible element except 'ruby' family and form controls
browsers deal with controls (and ruby style) in their own way */
a, abbr, acronym, address, b, big, blockquote, body,
br, caption, cite, code, col, colgroup, dd, del, dfn, div,
dl, dt, em, fieldset, form, h1, h2, h3, h4, h5, h6, hr, html, i,
img, ins, kbd, label, legend, li, noscript, object, ol, p, pre, q, samp,
small, span, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, ul, var {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font: inherit;
text-decoration: none;
/* in case "font: inherit" fails (IE7) */
font-family: "times new roman";
font-size: 100%;
font-style: normal;
font-variant: normal;
font-weight: normal;
/* remove this block if you DON'T want to support lame browsers */
}
/* browsers are free to handle controls but
we can't let them mess up with the other elements */
button, select, textarea,
input[type=text], input[type=password], input[type=submit],
input[type=image], input[type=reset], input[type=button], input[type=file] {
margin: 0;
}
:link, :visited, :hover, :active {
color: inherit;
color: #000; /* for IE7 'inherit' problem (again) */
text-decoration: none;
}
:focus {
outline: 0;
}
ol li, ul li {
list-style: none;
}
table {
/* "border-collapse" here is because of IE7 different behaviour (maybe others?).
don't remove it as it affects other browsers as well */
border-collapse: collapse;
border-spacing: 0;
}
/* the next two blocks were copied from Eric Meyer's CSS reset */
blockquote:before, blockquote:after, q:before, q:after {
content: '';
}
/* HTML5 "display" reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
END
Well, the more i tried to improve my reset, the more it looked like meyer's css reset, so i gave mine up and adopted it. works just fine :p
I generally think that wide-ranging CSS resets are not the best. I agree with Russ Weakley, who "zeroed" in on three big concerns:
Every element that's reset must be redefined. CSS file size & maintenance can increase.
You could forget to restyle something you reset.
Some resets are harmful to users who rely on keyboards for navigation.
See his whole presentation here: http://www.maxdesign.com.au/articles/css-reset/
Specifically, I think the following should not be reset, as it is in your stylesheet
:before, :after {
content: '';
}
:link, :visited, :hover, :active {
color: inherit;
color: #000; /* for IE7 'inherit' problem (again) */
text-decoration: none;
}
:focus {
outline: 0;
}
ol li, ul li {
list-style: none;
}
focus is an accessibility issue.
ol and ul should have their default styles. You are likely to need them. (Although you may need to overwrite them for a nav.)
:link, :visited, :hover, :active I would reset these only as needed.
As mentioned and acknowledged by you *{ // } could cause performance issues and may cause unforeseen issues.
Also, I would consider adding something to reset the big top and bottom margins on headers
h1, h2, h3, h4, h5, h6 {margin-top:0; margin-bottom:0;}
This is using * which will affect everything. You can't get borders for input, select etc. back in with a "later" stylesheet.
Also, * is considered bad for performance. Using explicit tags is preferred.
Try html5boilerplate's reset if you're having issues with Eric's (not sure if it will solve them, but worth a shot)
My only concern is the performance issue caused by using the * selector
I dont see any trouble with it, if you've tested it and it works then it should be fine.