I'm trying to copy the following font styling in my page:
https://d13yacurqjgara.cloudfront.net/users/104117/screenshots/2080529/attachments/373853/real-pixels.png (scroll down to "typography")
I've tried the following:
#import url(http://fonts.googleapis.com/css?family=Roboto:400,300,500,700);
body {
font-family: 'Roboto', sans-serif;
color: #334455;
background-color: #EEF2F4;
font-weight: 400;
}
All i'm achieving with this is this poor styling:
http://i.imgur.com/kwIzWMs.png
I even feel like it's not the same font. Even more, the different font-weight I've tried never matched the one from the model... I have no idea where to go from here, can somebody enlight me on how to improve this?
I had the same problem you described in your comment once and I realised it was because my
#import url
was after the reset. I suggest you try the following:
#import url(http://fonts.googleapis.com/css?family=Roboto:400,300,500,700);
* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body { ... }
Use
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased equivalent in firefox?
The CSS seems correct.
I tried the same with a dummy HTML page and it renders correctly:
<h2>Hello How are you?</h2>
<p>CSS Smooth font styling CSS Smooth font styling CSS Smooth font styling </p>
http://jsfiddle.net/qhz1vm4v/1
* {
margin: 0;
padding: 0;
}
I had this soft reset at the beginning of my css file. After deleting it the rendering was good. I never thought it would have an influence on the way fonts are rendered.
Related
I have two installations of Laravel including Bootstrap.
As far as I can see both include and have Montserrat on the body tag.
One of the installations needs no declaration of that in the app.sass (meaning it gets included with the bootstrap directly).
However, the other needs it, otherwise it defaults to the browser default font.
And yet, even when both installations have the same Montserrat #import-ed, they look different. I suspect the wrong one is really Montserrat, while the right one is some kind of Bootstrap sugar-coating that the other one can't do.
In order to check it out, please follow:
Desired effect: This link and once you log in with maximilian.berbechelov#gmail.com and 123456 click it again. I know it's Cyrillic, but I don't think it matters.
Problematic effect:
This link - no login required.
I have a body font-family declaration in the sass file (the desired one has no such declaration), because without it the font is the browser default.
You can see your font adding !important after the font-family name like this.
body {
margin: 0;
padding: 0 0 50px 0;
min-height: 100vh;
font-family: "Montserrat", sans-serif!important;
background-image: linear-gradient(45deg, #1de099, #1dc8cd);
}
.navbar-brand {
letter-spacing: 3px;
font-family: 'Montserrat', sans-serif;
font-weight: 300;
font-size: 2.1rem;
}
How to change the Unicode for an ::after object in wordpress?
I tried to do it in css and it just imputed the unicode code instead of the icon?
The original code is this:
.x-navbar .desktop .x-nav li>a>span:after {
content: "\f103";
margin-left: 0.35em;
font-family: "FontAwesome" !important;
font-style: normal !important;
font-weight: normal !important;
text-decoration: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
And the code I updated it to is this. I have tried using an !important; tag on the end of the unicode line and no luck, so I took that out...
x-navbar .desktop .x-nav li>a>span:after {
content: "f0d7";
margin-left: 0.35em;
font-size: 16px;
font-family: "FontAwesome" !important;
font-style: normal !important;
font-weight: normal !important;
text-decoration: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
color: rgba(82, 76, 76, 0.43);
-moz-osx-font-smoothing: grayscale;
}
This is my div site below.
http://wvleadership.cyndeeadkins.com/
So what am I doing wrong and why is this so hard to over ride?
So I finally found out why it was dropping the "\" from the code. I finally got a response from the wordpress theme developer. This will be nice to know for anyone else dealing with an issue like above.
There were two issues all together.
#1 issue: I was saving this css code in the custom css section within the
"customizer" and it apparently doesn't like that. You need to save it in the child-theme's style.css file instead.
2 issue: I needed to add a little more code to the string, adding "body" in the beginning.
body .x-navbar .desktop .x-nav li>a>span:after {
content: "\f0ab";
}
I updated the child theme css file, then refreshed the caching and it worked. :D
My question is pretty simple, but I can't get it to work.
I understand that you can make a button with Bootstrap + Glyphicon like so:
<span class="glyphicon glyphicon-chevron-left"></span> Default text here
But, I want the content & styling seperate (as is normal, right?), because it makes editting a lot easier (just one scss file instead of 54 html files with buttons).
Can I use ::before or ::after on the button and then use "content" in scss to include a Glyphicon? If so, how?
The first idea probably is do something like this
#import "variables";
#import "glyphicons";
.my-btn{
&:before{
.glyphicon;
.glyphicon-chevron-left;
}
}
but that compile into something like:
.my-btn:before {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.my-btn:before:before { /*this is wrong*/
content: "\e079";
}
And nested pseudo-elements It is not possible if I am not mistaken see this Nesting pseudo-elements inside pseudo-elements
So you have to do this:
//HTML
Default text here
//CSS
#import "variables";
#import "glyphicons";
.my-btn{
&:before{
.glyphicon;
}
&.my-chevron-left{
.glyphicon-chevron-left;
}
}
PD: I'm using less, in SCSS is quite similar
I am trying to add a custom font to my website. I have tried lots of things but didn't succeed. Here is my css code:
#font-face
{
font-family: myFirstFont;
src: url('ellis.ttf');
}
body
{
margin: 0;
padding: 0;
width: 100%;
cursor: default;
font-size: 11px;
line-height: 1;
font-family: myFirstFont,arial,san-serif;
overflow:auto;
background:#ecf6f7;
}
I know this is not a cross browser case, but I am trying to make work a simple case at first.
add format("opentype"); after URL
apply font like this..
#font-face
{
font-family: 'ellis';
src: url('ellis.ttf');
}
.body
{
font-family: "ellis";
}
on both the font-family declarations add speech marks.
so add to both #font-face and body:
font-family: "myFirstFont";
Or alternatively try this to make sure all code is correct and to make sure its not the code:
http://www.fontsquirrel.com/fontface/generator
It also may sound stupid, but make sure all spellings of fonts and paths are correct.
Are you sure that the font file is being referenced in the right place? The file ellis.ttf will be referenced from wherever the Stylesheet is.
If you have your HTML page at http://website.com/page.html, but your CSS at http://website.com/css/page.css then it'll look for ellis.ttf at http://website.com/css/ellis.ttf.
When I set the font family, font size, color etc. it seems that some nested elements override these with ugly browser defaults.
Must I really specify those a dozens of times for any kind of element on my page, or is there a way to set them globally once and forever?
How to do that?
* {
font-size: 100%;
font-family: Arial;
}
The asterisk implies all elements.
If you're using IE, chances are it will revert to the browser defaults for certain elements, like tables. You can counter that with something like the following CSS:
html, body, form, fieldset, table, tr, td, img {
margin: 0;
padding: 0;
font: 100%/150% calibri,helvetica,sans-serif;
}
input, button, select, textarea, optgroup, option {
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
}
/* rest of your styles; like: */
body {
font-size: 0.875em;
}
Edit: you may want to read up on CSS resets; see threads like this one
I can't stress this advice enough: use a reset stylesheet, then set everything explicitly. It'll cut your cross-browser CSS development time in half.
Try Eric Meyer's reset.css.
you can set them in the body tag
body
{
font-size:xxx;
font-family:yyyy;
}
If you specify CSS attributes for your body element it should apply to anything within <body></body> so long as you don't override them later in the stylesheet.
If you want to set styles of all elements in body you should use next code^
body{
color: green;
}