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;
Related
I have created a question mark button using the Arial font.
The CSS looks like this:
.question {
font: bold 24px Arial;
}
It appears correctly on almost all browsers, as this screenshot shows.
However, newer versions of Android use the Roboto font face instead of Arial. The question mark is now off-center and the wrong width.
My question: is it possible to force the browser to use Arial?
You cannot force a device/computer which doesn't have Arial installed to use it. You would have to rely on webfonts to use Arial everywhere.
Also, your syntax is wrong, you should be using the shorthand property font, and not font-family (which is only used to specify the font face and potential fallbacks), like so:
.question {
font: bold 24px Arial, sans-serif;
}
I want to use Montserrat with a font-weight of 200 exactly like they have on the image text on this website: http://www.cohabs.com/
I have the font working using this method
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
and
h1 {
font-family: 'Montserrat', sans-serif;
font-weight: 200;
}
But the font weight can only be regular or bold according to google fonts, so where/how did that website use it with a font-weight of 200?
Montserrat light version isn't available on Google Fonts.
Google Fonts only has 'Regular' and 'Bold' version of Montserrat.
You can download more Montserrat types here: https://www.fontsquirrel.com/fonts/montserrat
it seems like they are loading font from their server
go to their main.css and ctrl+f url(../assets/fonts/montserrat-light.woff) u'll see ur self
you can find same font here, u can also load it from ur server if needed
to use any font which u want to host on server, u need to download that font and host it to ur server I suggest to place them in fonts folder and refer below code
you can replace lovelyFont with ur own font name
#font-face {
font-family: 'lovelyFont';
src: url(../'fonts/lovely_font.eot');
src:
local('lovelyFont'),
local('lovelyFont'),
url('fonts/lovelyFont.otf')
format('opentype');
}
div { font-family: 'lovelyFont', sans-serif; }
for more details refer this or this links
They are using Montserrat Hairline font for the thin letters.
I am working on a site which uses a commercial wordpress theme and the redux framwork. It seems to me that web fonts have been incorrectly implemented and I just want to confirm this with a frontend specialist.
In an included css file the following is declared:
#import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:600);
Later, the font is used throughout the theme's css :
font-family: Source Sans Pro;
After some testing, it seems to me that the above only works if the end user actually has that Source Sans Pro font installed on their system. In my case I did have this installed on OSX so did not see the same font problems as an end user. By failing to provide a fallback, I've observed that in other browsers e.g. IE11 on virtualised Windows 8.1 a serif font is displayed.
Is an #font-face declaration for Source Sans Pro required after importing it? I can't find this anywhere in css loaded by the theme. Should Source Sans pro also be quoted? Would the following be more correct?
font-family: "Source Sans Pro", sans-serif;
I realised that if you follow the link http://fonts.googleapis.com/css?family=Source+Sans+Pro:600 it loads css which contains the #font-face code.
#import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:600);
font-family: 'Source Sans Pro', sans-serif;
Found it on google: fonts library
i just tested it, and it works just fine without the quotes and the sans-serif part. So you can be sure it works :)
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
I have a wordpress blog " www.freelancing4arab.com", I want to change the theme font, I edit the css but nothing changed, obviously my blog is in Arabic so I want to use a cool arabic font.
So what do you think ? what was the problem? why the changes didn't take place ?
And can I use a special font I mean a font that the user doesn't have on there machine but it's uploaded on my server - I know it's possible but I want to know how -
This is my website css file : http://freelancing4arab.com/wp-content/themes/WebColors/style.css
To use non web-font, please check out font-face: http://sixrevisions.com/css/font-face-guide/
I am not sure what you'd changed in your css. But the font isnt changing is because:
font-family: HelveticaNeue, Tahoma, Geneva, sans-serif;
HelveticaNeue is not a web font. so if you dont have HelveticaNeue installed in your computer, you wont see text appear in that font.
#font-face { font-family: ArabicFont; src: url('ArabicFont.otf'); }