I'm trying to use Google Font on a page. In my html I used:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
And in my CSS:
#import url('http://fonts.googleapis.com/css?family=Open+Sans');
Still whenI use "Open Sans" with the font-family attribute it stays on Arial.
body
{
background-color: #F1F1F2;
font-family: "Open Sans", Arial;
}
Using google font on any webpage is very easy and you can load the fonts asynchronously.
If you don't use the direct code that Google font delivers and you simply load the following url:
http://fonts.googleapis.com/css?family=Open+Sans:400,600
You'd be represented the source code (CSS).
Now, copy and paste the displayed code in the CSS source of your website.
You can then use your selected google font(s) on your webpages using the following:
body
{
background-color: #F1F1F2;
font-family: 'Open Sans', Arial;
}
That's enough and it will work.
I have a hunch that your bootstrap is being loaded after the CSS for your Google font. Find the point that you are importing this CSS:
#import "bootstrap-sprockets";
#import "bootstrap";
Then add your Google code AFTER that to make sure that it is not being overwritten by the bootstrap.
Good Luck!
First of all, you dont need to do it twice! any one kind of FONT ASSOCIATION is enough !!
Warning that overuse of #import may cause a overhead!
Bootstrap(if you have used it) usually overrides the font with -> font-family:"Helvetica Neue",Helvetica,Arial,sans-serif
Working Demo -> Click here
Note : I have added the font as external resources. It seems to be working properly !
just do !important after the font style you want to use
Related
I am trying to add some custom font in my site but unable to do. I am not sure if I am using a right or wrong path. Kindly help.
#font-face {
font-family: XfinityStandard
src: url('landingpage/fonts/XfinityStandard-Light.woff2') format("woff2");
where landingpage is folder name.
There are two main ways to check:
Is the font actually working (i.e. can you see it rendering properly), and
Inspect your page (e.g. in Chrome, right-click the text you expect the font to render on, and select Inspect from the drop-down menu. In your Styles tab, at the right-hand bottom of the page, there should be a section called Rendered Fonts. If you have implemented your font correctly, it should show here (in addition to the css hierarchy applied, where your font should be listed).
If your font is not showing here, make sure you follow the following:
The #font-face rule should be added to your css before any styles
Use your rule in your css by specifying the font as XfinityStandard and provide a fall-back like sans-serif, e.g. body { font-family: 'XfinityStandard', sans-serif; }
Make sure you have wide support, so when you specify your font, add an additional source for format('woff')
As Devansh J mentioned, make sure your font is relative to the css file
If you are still having issues, maybe consider a hosted font like Google Fonts, as follows: #import url(///fonts.googleapis.com/css?family=Montserrat which you can use as body { font-family: 'Montserrat', sans-serif; }
I tried to copy the font of this website menu but when I put the style in my own WordPress CSS theme I still get the bold version of it. Is there a special trick so I can get the light version of the font?
Got the font the same way loaded in what they have.
If you are indeed looking for the font Montserrat and you want the light version, you can use this import reference:
#import url(http://allfont.net/allfont.css?fonts=montserrat-light);
And you can use it like this in css:
font-family: 'Montserrat Light', arial;
More information about this font can be found here: http://allfont.net/download/montserrat-light/
It looks like the Google font Montserrat:
http://www.google.com/fonts/specimen/Montserrat
It seems this font only comes in Normal (400) and Bold (700):
http://www.google.com/fonts#UsePlace:use/Collection:Montserrat
For the Normal version of the font, try adding:
font-weight: 400;
to your CSS. Also, make sure you're referencing the font correctly by importing it first:
#import url(http://fonts.googleapis.com/css?family=Montserrat);
then adding the style to the correct element:
font-family: 'Montserrat', sans-serif;
This has me completely stumped. I have a website that used a serif font for the header and a sans-serif font for the body text. The index page loads fine in IE9. However, when navigating to other pages and returning to the index page, text is rendered in a serif font. Navigation styles are not affected.
When the page is refreshed, it displays properly. Only the index page is affected.
This does not happen in any other browser.
The HTML and CSS have been validated with no errors.
I have tried adding !important to the sans-serif font in the CSS with no change.
I have tried adding the font declaration to each element with no change.
The CSS looks like this:
#header {
font-family:"Times New Roman", Georgia, serif;
}
#section {
font-family: "Open Sans", Helvetica, Arial, sans-serif !important;
}
What makes this more mysterious, is that occassionally, the page performs as expected.
Help would be greatly appreciated!
could possibly be #imports not downloading sequentially...although they should already be cashed. easy fix would be to generate open sans #font-face rule declaration via font squirrel, place that in your style sheet. or change your initial import to a link element, as well as pulling the google font import statement out and making it a link element as well, placing it above the other style sheet. you can read more here: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
The problem was caused by the way the CSS sheet was linked within the head.
Original code:
<style>
#import url(css/stylesheet.css);
</style>
New declaration:
<link rel="stylesheet" href="css/stylesheet.css">
What made this mysterious was that pages would load correctly and only a couple pages were affected. The problem appeared only after a page was visited and only with Internet Explorer. Thank you Albert, for giving me a clue to solve this.
What is right way to make available custom fonts (e.g. google fonts) in my new theme?
It look like this issue:
https://github.com/uikit/uikit/issues/111
I did make what they says, only paste this code in the uikit.less:
/* Custom Fonts */
#font-face {
font-family: 'opensanscondensed';
src: url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700);
}
But it did not works. And i cant find where i should specify font-family for some elements(nav, top-menu, etc .. )
I would be grateful for any answers.
The url that you are pasting in the src property is an url of a css file (that google generates for you to import the font faces). You can see that it already generates font faces for you:
http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700
What you need to do in your style sheet file is just importing the css from the url. Something like this:
#import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700)
and then you can use it like so:
font-family: 'Open Sans Condensed', sans-serif;
DEMO
I want to use a different font for my website, which is not a regular webfont. I have created EOT files already. Now how can I integrate those fonts with twitter bootstrap ? Can anyone help ?
Thanks
The easiest way I've seen is to use Google Fonts.
Go to Google Fonts and choose a font, then Google will give you a link to put in your HTML.
Then add this to your custom.css:
h1, h2, h3, h4, h5, h6 {
font-family: 'Your Font' !important;
}
p, div {
font-family: 'Your Font' !important;
}
or
body {
font-family: 'Your Font' !important;
}
You can find a customizer on the official website, which allows you to set some LESS variables, as #font-family-base. Link your custom fonts in your layout, and use your custom generated bootstrap style.
Link here
For an example with the #font-face rule, using WOFF format (which is pretty good for browser compatibility), add this CSS in your app.css file and include your custom boostrap.css file.
#font-face {
font-family: 'Proxima Nova';
font-style: normal;
font-weight: 400;
src: url(link-to-proxima-nova-font.woff) format('woff');
}
Please note Proxima Nova is under a license.
Hi you can create a customized build on bootstrap, just change the font name in the following pages
Bootstrap 2.3.2
http://getbootstrap.com/2.3.2/customize.html#variables
Bootstrap 3
http://getbootstrap.com/customize/#less-variables
After that, make sure to use proper #font-face in a css file and link that to your page. Or you could use font kit generators.
you can customize twitter bootstrap css file, open the bootstrap.css file on a text editor, and change the font-family with your font name and SAVE it.
OR got to http://getbootstrap.com/customize/ and make a customized twitter bootstrap
First of all you have to include your font in your website (or your CSS, to be more specific) using an appropriate #font-face rule.
From here on there are multiple ways to proceed. One thing I would not do is to edit the bootstrap.css directly - since once you get a newer version your changes will be lost. You do however have the possibility to customize your bootstrap files (there's a customize page on their website). Just enter the name of your font with all the fallback names into the corresponding typography textbox. Of course you will have to do this whenever you get a new or updated version of your bootstrap files.
Another chance you have is to overwrite the bootstrap rules within a different stylesheet. If you do this you just have to use selectors that are as specific as (or more specific than) the bootstrap selectors.
Side note: If you care about browser support a single EOT version of your font might not be sufficient. See http://caniuse.com/eot for a support table.