When loading a Google font (Open sans) like this:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700' rel='stylesheet' type='text/css'>
and using it in the CSS like this:
font-family: 'Open Sans',sans-serif !important;
On different pages but the same header, css etc the page loads:
page 1: font-family: 'Open Sans',sans-serif !important;
page 2: font-family: 'Open Sans',sans-serif !important;
On both pages the Google-font and css get loaded.
Anybody a idea what may cause this?
Try to make your CSS rule more specific. I see you're using the !important tag, so you're probably overwriting existing rules from a framework or elsewhere.
For example, if you're trying to give a font to all headers, you probably have other divs surrounding them. Let's say that div's called content:
body .content .h1, body .content .h2 {
font-family: 'Open Sans',sans-serif !important;
}
The best thing to do would be the see why your styles aren't being set in inspect element. Right click with Chrome > Inspect over your headers, and see what's styling them. You should try and not use !important rules anywhere unless completely necessary.
Related
I want to apply a google font to only specific css selectors or elements in my page.
I also want the same font in mutliple weights (Eg Roboto). Not controlled using the css attribute but actually using the separate font versions provided by google.
If possible id prefer not to have an external stylesheet.
Is this possible? I dont mind doing in a script tag if i have to.
Here you have a example and I've put the style in the html so you dont need a external stylesheet although I wouldn't recommend it
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;500;700&family=Rowdies&display=swap" rel="stylesheet">
<style>
h2,
h3,
span {
font-family: 'Roboto', sans-serif;
}
h2 {
font-weight: 500;
}
h3 {
font-weight: 700;
}
h1,
p {
font-family: 'Rowdies', cursive;
}
</style>
<h1>h1 Rowdies</h1>
<h2>h2 Roboto font-weight 500</h2>
<h3>h3 Roboto font-weight 700</h3>
<p>p Rowdies</p>
<span>span Roboto</span>
I also want the same font in mutliple weights (Eg Roboto). Not controlled using the css attribute but actually using the separate font versions provided by google.
Not a 100% sure if its possible or not but I see no reason why you can't just use the font-weight property
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;
}
I want to use a custom font. When I load it into the page using
#font-face {
font-family: 'Echelon';
src: url('font/echelon-rg.ttf');
font-style: normal;
}
#font-face {
font-family: 'Echelon';
src: url('font/echelon-it.ttf');
font-style: italic;
}
then it is smaller then all the default fonts available in my browser. I want to enlarge them, let's say to 150% of current size. The problem is that when I do
body * {
font-family: Echelon;
font-size: 150%;
}
then all h1..h6, p, div, span elements share the same size (also all custom settings of bootstrap are overwritten) and I can't use it like that. I want to change all elements relatively to their original (e.g. bootstrap) size. If I did it manually, I would have to rewrite hundreds of elements, so that's a bad option. How can I do it in a clean and easy way?
PS this is not about window/screen size.
Instead of declaring for body, try to declare for certain sections you need to change in your CSS, this way you don't need to change manually.
Lets say, you want your paragraph alone to be of 150% then declare as:
p{ font-size: 150% } in your CSS this should restrict to paragraph's alone.
Hope it helps :-)
I want to use 'Open Sans' as default-font in my CKEditor, but can't find out how.
I am using CKEditor 4.4.5 full.
I've included the font in my html head:
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
Then I tried to change CKEditor's default font by changing the CSS in its contents.css:
body
{
/* Font */
font-family: "Open Sans";
font-size: 18px;
}
But this doesn't seem to work.
I also tried to set it in my Javascript:
CKEDITOR.config.font_names = "Open Sans;";
CKEDITOR.config.font_defaultLabel = 'Open Sans';
But this only seems to influence the display of the 'Font' Toolbar, not the style by itself.
note: I can use 'Open Sans' when I am using the "ckeditor-gwf-plugin", but this doesn't help me to set it as default font either.
Thanks for any help !
I assume you need to style the content area of CKEditor? Than you need to create a css file and add it to your CKEditor config like this:
contentsCss : '/path/to/style.css',
And in the style.css:
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
body, p { font-family: 'Open Sans', sans-serif; }
Make sure /path/to/style.css loads. Use your browsers developer tools.
Also set the appropriate selectors: body, p for text and maybe h1, h2, h3.
Most of the time the styling in this file will be the same typography styles used in your web application.
note: this is how you can generally change the default font-family and font-size for your CKEditor. In order to change it by using a custom CSS file, look at the accepted answer!
Just found out how to use a google font as default font in CKEditor:
/* contents.css of your CKEditor */
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
body
{
/* Font */
font-family: 'Open Sans';
font-size: 36px;
}
note: you need to add the google-font with #import url. and, be careful: font-size gets ignored here!
Then, with the help of this answer https://stackoverflow.com/a/12545905/3391783,
I also managed to set the default font-size:
/* contents.css of your CKEditor */
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
body, p
{
/* Font */
font-family: 'Open Sans';
font-size: 36px;
}
note: you need to add the p-tag in addition to the body-tag. like the mentioned answer explains, the styles of the paragraphs are overwriting the font-size of your body.
I'm having an odd issue. I have a simple web page, and for some reason the <h1 /> tag is having a margin-top and margin-bottom of over 18px. There is nothing in my *.css file that specifies this. Firefox Firebug shows me the style that is applied, but there is no margin anywhere.
In the picture, the div that the header text is in (or supposed to be in) has the limits. But the header text is pushed down because of the margin.
What could be causing this?? Is there anywhere in firefox/firebug that can show me EXACTLY where that style came from? It says that the header tag inherited from the body style, but that is only this:
body
{
font-size: .85em;
font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
color: #232323;
background-color: #fff;
}
Any ideas? Thanks in advance.
Headers often have a margin by default. Have a look at using a reset/normalization stylesheet.
Reset or normalization stylesheets reset your styles to a standard baseline across all browsers. The difference between reset and normalization is that resets clear margins, padding, etc. where normalization stylesheets apply sensible defaults.
These links should be of use:
https://stackoverflow.com/questions/167531/is-it-ok-to-use-a-css-reset-stylesheet
Reset Reloaded
normalize.css
That's the default styling for <h1>s. It's similar the fact that <h1>s have larger text size than paragraphs. It's just the default. It can also be overwritten.
Most of the browsers add some default margin and padding.
Try resetting the margin, like so
body{
font-size: .85em;
font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
color: #232323;
background-color: #fff;
margin:0; /* ADD THIS */
}
You can also reset it on the h1
All browsers have a default CSS that is applied to all pages.
Use something like Yahoo's Reset CSS to cancel out any styles applied.