I'm using the Ubuntu font from Google Fonts:
<link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,300italic,400italic,500,500italic,700,700italic' rel='stylesheet' type='text/css' />
My stylesheet:
body {
font-family: 'ubuntu',arial;
}
It works, but if install a font with the same name (Ubuntu), it overrides the one from Google Fonts.
Is it possible to force the browser to use the one from Google Fonts?
The answer lies not in your code, but in Google's.
Here's part of the CSS you are requesting:
#font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: bold;
src: local('Ubuntu Bold'), local('Ubuntu-Bold'), url('http://themes.googleusercontent.com/static/fonts/ubuntu/v4/0ihfXUL2emPh0ROJezvraLO3LdcAZYWl9Si6vvxL-qU.woff') format('woff');
}
Key line here is local('Ubuntu Bold'), which asks to load local file if possible.
The simplest solution is to copy all the Google's CSS, paste it in your own CSS, and modify this local name to be, for example, local('Ubuntu Bold NonExisting Name or Something Else'). Such font does not exist and will not replace font loaded by CSS.
P.S. I have not tested this myself. If 0ihfXUL2emPh0ROJezvraLO3LdcAZYWl9Si6vvxL-qU.woff URL is expiring, then you are in a tough spot. Try to see font's licence and consider hosting the font yourself, if preventing local override is a priority.
Related
i would like to use two google fonts, but my fear is that adding in this way:
<link href='https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
could be slower (in performance) than download fonts in collection...
So i download two fonts in collection, but i have doubt how i could to implement in my website...
Maybe i just have to insert the two collections in the css folder and than add in head
<link href='https://path/css/font/ ???????' rel='stylesheet' type='text/css'>
but i don't know what file i have to link in path... For example when i download PT Sans in collection, in this folder i have these files:
I hope you can help me understand more..
Thanks a lot and sorry for my english
Simply call your fonts in css file.
#font-face {
font-family: myFirstFont;
src: url(font1.woff); /* specify the path of your font location*/
}
Repeat this for next fonts.
#font-face {
font-family: myFirstFont;
src: url(font2.woff); /* specify the path of your font location*/
}
You do need even more font files.
If you just open the file from the Google Server...
https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic
... you see how it is done.
You link the font files from the CSS file - not from the link element.
Assuming that you want your fonts loaded locally from in internal folder than an external source:
Add the folliowing to your code in a <style> tag:
#font-face {
font-family: 'PT_Sans';
font-style: Regular;
src: url('../fonts/PT_Sans-Web-Bold.ttf'); /* IE9 Compat Modes */
src: local('PT Sans'), local('PT_Sans'),
url('../fonts/PT_Sans-Web-Regular.ttf') format('truetype')
}
Or you can reference it externally in a CSS file.
I have some css like this:
font-family: "Open Sans Condensed",sans-serif;
And I'm having a hard time understanding how the displayed font is chosen. I always thought that the browser checks if the client has the first font installed, and if not, it uses the next font in the list. But now I've run into an issue where in my local and testing environments, using Firefox, the first font is used, but in production, using the the same browser on the same machine, the second font is chosen.
Why does the website use one font on one server and the other on a different server?
Is there any way to make it use the same font on all servers without #font-face?
Figured it out...
This line was importing the font from Google:
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'>
On the production server, they've decided to disallow all external requests like this, so it can't load the font. That's not the case on our other servers...
So I donwloaded the font from Google, generated webfonts at http://www.fontsquirrel.com/tools/webfont-generator, and then added the following css:
#font-face {
font-family: 'Open Sans Condensed';
src: url('../fonts/opensans-condbold-webfont.eot');
src: url('../fonts/opensans-condbold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/opensans-condbold-webfont.woff2') format('woff2'),
url('../fonts/opensans-condbold-webfont.woff') format('woff'),
url('../fonts/opensans-condbold-webfont.ttf') format('truetype'),
url('../fonts/opensans-condbold-webfont.svg#open_sans_condensedbold') format('svg');
font-weight: normal;
font-style: normal;
}
Why not to use #font-face? It is well supported and invented to avoid this kind of problems. Please remember that for security reasons, does not work for subdomains in FF.
Might have to do with the way the browser looks for the fonts in a local server vs live server. I had an issue before with naming a font "Open Sans Condensed" vs "OpenSans-Condensed" (it was a different font, but followed the same rule) which was the font filename. So maybe you could find the filename and add it to your 'font-family' tag.
I am using Google Web Fonts inside my CSS stylesheet like below
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');}
but when my website goes from secured page, I am getting "only secured content is being displayed". I used Google Chrome Resource Inspector and it pointed above was the issue
How can I add a secured link to the Google Web font in my CSS file
Thanks
You don't need #font-face to use a Google Font.
Just add this in your HTML code:
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
Then add the font name in your CSS. Example:
body{font-family: 'Open Sans', sans-serif;}
Bit old but it came up on a related search so it may be useful to someone.
I personally put the #font-face declaration in my stylesheets rather than requesting it in the head. Just remove the 'http:' like below, should solve the problem.
url(//themes.googleusercontent.com/static/fonts/opensans/...) format('woff');
Why not use #import statement?
At the top of your css file:
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
My website is not showing the appropriate font, PT Sans.ttc. I checked on other browsers and it works fine.
www.farmap-ux.com. Below is CSS code.
#font-face
{
font-family: PT Sans;
font-family: font-family: 'PT Sans', sans-serif;
src: url("http://fonts.googleapis.com/css?family=PT+Sans")
}
So it works on everything like I said (Chrome, Safari, even Opera!) Any ideas? I've tried to find .woff files for the font but I don't think it's in my Font Book.
Maybe it's because your #font-face declaration isn't valid at all. It should be something like:
#font-face
{
font-family: 'PT Sans';
font-style: normal;
font-weight: 400;
src: local('PT Sans'), local('PTSans-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v4/LKf8nhXsWg5ybwEGXk8UBQ.woff) format('woff');
}
However, it's even better to use the CSS file provided by google:
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans">
If you want to stick to a CSS import use
#import url(http://fonts.googleapis.com/css?family=PT+Sans);
You should really check your css! The syntaxe is miles away from correct.
Also, http://fonts.googleapis.com/css?family=PT+Sans is already a css file!
what you should do is import is put it directly into the <head> your html using the link tag.
Have a look at this example: http://www.w3schools.com/tags/tag_link.asp, or just add the following to your html file as said before.
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=PT+Sans">
Following the directions at Google Webfonts should fix your problem.
First, make sure you're including the Google CSS necessary to reference the font files. You have the option to include a LINK tag in your HTML, a #import directive in your CSS, or some Javascript. I recommend the LINK tag for maximum browser compatibility:
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
When adding this CSS to your site, Google will automatically determine the correct font type to use for your browser. Not all browsers use WOFF files. Older versions of IE use EOT files, some browsers prefer SVG or TTF. Google is able to sniff for the browser type and modify the included CSS as necessary.
After Google's CSS is included, you only have to reference the font family in your CSS where you want the font to appear.
font-family: 'PT Sans', sans-serif;
That's the only CSS necessary. Remove all the other CSS you linked… as mentioned in the other answers your CSS has some errors.
Try:
#font-face {
font-family: 'PT Sans';
font-weight: normal;
src: url("http://fonts.googleapis.com/css?family=PT+Sans");
}
I have a really bad conflict with using google-webfonts.
OK here is the code:
This is in head:
<link href='http://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'>
And this is in the css-file:
body {
font-family: 'Oswald', sans-serif;
font-weight: 700; }
"Oswald" is a font-family of 3 fonts:
book (300)
normal (400)
bold (700)
As you can see.. i've loaded only the bold-face (700). (you can see it in the query)
And it works till here BUT …
THE PROBLEM IS:
I have a desktop-version of the 3 fonts (300,400,700) installed on my computer and as long as these fonts are activated … the browser shows me the wrong font-weight (400) in my html-document.
OK. The problem is that in my css 'Oswald' takes the localfont and not the webfont. But the local font "Oswald" is "Oswald normal". I don't know why google is calling it 'Oswald' instead of 'Oswald Bold'. So I don't know how to fix this problem.
I don't want the css to point at the local-font .. i want it to show always the webfont … because of the right font-weight!
Do you have any ideas?
Please?
Possible to Rename the webfont-call?
You can edit the CSS #font-face rule to fit your needs instead of just loading the automatically-generated one from Google. Basically the issue is that their rule prefers local versions (src: local('Oswald Bold'), local('Oswald-Bold'), ...). The corrected verison would look like:
#font-face {
font-family: 'WebOswald';
font-style: normal;
font-weight: 700;
src: url(https://themes.googleusercontent.com/static/fonts/oswald/v5/bH7276GfdCjMjApa_dkG6T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
Just add that to your CSS manually, and use font-family: 'WebOswald'; when you want to use Google's Web version of the font.
I hope that helped!