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.
Related
After poking around many stylesheets for different websites, I have consistently noticed font or font-family values that are used which do not appear to use correct font-family names. I am wondering if I just don't fully understand how to reference font family names as used by CSS.
For example, on this stylesheet, the authors use the following several times:
font-family:"minion-pro";
however, as far as Google tells me, no such font family actually exists. For example, if you Google the following:
font minion-pro
none of the first several hits show anything "minion-pro", but rather all the hits are for "Minion" or "Minion Pro"; the fifth hit is for this link, which as far as I understand CSS, requires the user to reference this font as
font-family: "Minion Pro";
I have also seen this on some stylesheets for the font "Myriad Pro" which, when you Google font myriad-pro, only return hits for the font "Myriad" and "Myriad Pro". That is, in CSS stylesheets, I have seen this
font-family: "Myriad-Pro";
but to me, this is not correct, and should be
font-family: "Myriad Pro";
So my simple question is: are fonts which contain spaces able to be rendered properly if the spaces are replaced with hyphens?
I believe the answer to this is "no" based on the docs - I cannot easily test this because I do not have easy access to these fonts and I am at work right now. (when I try Codepenning this with "Myriad Pro" or "Minion Pro" nothing happens - fonts not recognized)
It depends on what you name the font-family when you create the #font-face font definition to serve your font.
Like this:
#font-face {
font-family: 'montserratregular';
src: url('/content/fonts/Montserrat/montserrat-regular.eot');
src: url('/content/fonts/Montserrat/montserrat-regular.eot?#iefix') format('embedded-opentype'),
url('/content/fonts/Montserrat/montserrat-regular.woff2') format('woff2'),
url('/content/fonts/Montserrat/montserrat-regular.woff') format('woff'),
url('/content/fonts/Montserrat/montserrat-regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
In this case I would reference font-family: 'montserratregular'; in my css. But if in the #font-face declaration I defined font-family: 'montserrat-regular'; or font-family: 'montserrat regular'; then I would use that in my css.
In the stylesheet you linked the author probably has his #font-face declarations in a separate css file where he defines Minion Pro as "minion-pro", this is common.
Other fonts that you don't serve to the client, System Fonts, should be referenced by their system font name. You can use a site like CSS Font Stack to see what those names are and the likelihood (in %) that they are a system font on Windows or Mac. It also provides common fallbacks for fonts (i.e. you could do this: font-family: 'Myriad Pro', 'Myriad-Pro', 'MyriadPro', Arial;).
A font like Myriad Pro or Minion Pro don't usually ship as an installed system font by default, so thats why we serve the font to the client using the #font-face approach. I user could install Myraid Pro on their machine and then it would be a system font, but you would have to know the exact name and you can't guarantee a user has a unique font or require users who visit your site to manually install it.
Visiting a website i have found out the menu links were abnormally bolder than wile watching the same page from my collegue computer with same browser.
Deleting the corresponding font from my windows font folder corrected the difference.
My question is how preventing this possibility when designing css fonts on a website
Most #font-face at-rules begin with a local(name-of-local-file) and then a reference to your distant url(/on/server/teh-webfont.woff).
Browsers will try, in this typical situation, to use the local file and if they find nothing will continue by downloading from your server the distant asset. If they find a local matching font, then they'll use it immediately and will stop their search of a font thus they won't download and use your distant asset.
Conclusion: don't use local() and only keep those url(). It's the contrary of this SO answer
Example without local() and many url() corresponding to many formats. Browsers will download the first one that please them, not 2+ of them:
#font-face {
font-family: 'Gudea';
src: url('./fonts/gudea/Gudea-Regular-webfont.eot');
src: url('./fonts/gudea/Gudea-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('./fonts/gudea/Gudea-Regular-webfont.woff2') format('woff2'),
url('./fonts/gudea/Gudea-Regular-webfont.woff') format('woff'),
url('./fonts/gudea/Gudea-Regular-webfont.ttf') format('truetype'),
url('./fonts/gudea/Gudea-Regular-webfont.svg#gudearegular') format('svg');
font-weight: normal;
font-style: normal;
}
Download the font .ttf
Saving the font in a folder in your web site
For call font use this code in css:
#font-face {
font-family: "YourFont";
src: url('font/YourFont.ttf');
}
.example{
font-family: YourFont, sans-serif;
}
I'm using for a website the font Oxygen via GoogleFont. However, for webdesign purpose, I downloaded in my computer the Oxygen font via FontSquirrel.
Apparently it's the same, but it looks different and I have size issues. So I was thinking:
Is there a way to declare "I want to use the GoogleFont font and not the font stored in the computer even if it has the same name"?
Because if someone has a totally different font with the same name, there could be a lot of display problems.
EDIT: What about downloading the font on Google's server and hosting it on my website? (The font is 100% free for commercial use.) But why do a lot of websites use Google Fonts if it could be that simple?
If you have the web fonts you could host yourself and give them any name you want in the css and avoid the potential of the local font loading.
For example:
#font-face {
font-family: 'myspecialfont';
src: url('oxygen-webfont.eot');
src: url('oxygen-webfont.eot?#iefix') format('embedded-opentype'),
url('oxygen-webfont.woff2') format('woff2'),
url('oxygen-webfont.woff') format('woff'),
url('oxygen-webfont.ttf') format('truetype'),
url('oxygen-webfont.svg#oxygenregular') format('svg');
font-weight: normal;
font-style: normal;
}
h1 {font-family: "myspecialfont", sans-serif;}
Just make sure you're pointing the CSS to the correct path for those files (e.g. if you put them in a fonts folder it'd could be "../fonts/oxygen-webfont")
The main reason people use google is they've optimized it for serving fonts, it takes load off your server, and potentially people have the font cached from google making it load faster. If it's an uncommon font and your server is decent these may negligible.
I hope I'm asking this question in the right place,
I'm working on a website for a friend, here's the site hosted on my goDaddy acc:
http://www.andkensol.com/rowanWeb/
And here it is on my friends:
http://www.rowanmoore.org/
You can see the clear difference in the title font. If you inspect them you'll see they are both using CODE. I personally uploaded all the files myself and the file structure, layout, file paths are all identical yet the font won't render on my friends site.
I downloaded the font from font squirrel and I'm using #font face to implement it in both sites.
CSS
#font-face {
font-family: CODE;
src: url('font/CODE Light.otf');
}
#nameTitle{
font-size:60px;
font-family:CODE;
color:white;
font-weight:400;
margin-bottom:-3%;
}
The 'font folder' is in the same folder as the stylesheet and CODE Light.otf is in the font folder.
Ive deleted the site from my friends server, downloaded it from mine and then uploaded it to my friends and still no luck.
Could this be a problem on goDaddy's end perhaps?
I recommend you to use some webgenerator to generate css file with different formats of font.
I think your problem is wrong #font-face.
#font-face {
font-family: 'nfs';
src: url('yourFont.eot');
src: url('yourFont.eot?#iefix') format('embedded-opentype'),
url('yourFont.woff') format('woff'),
url('yourFont.ttf') format('truetype'),
url('yourFont.svg#yourFontName') format('svg');
font-weight: normal;
font-style: normal;
}
Diffrenet browser need other format to render and open font.
I'm using mostly those three webfont generators
http://onlinefontconverter.com/
http://www.fontsquirrel.com/tools/webfont-generator
http://convertfonts.com/
But there is more, type to uncle google "font generator"
EDIT: i think blank space in your font/CODE Light.otf is the problem try to use for example something like this font/CODE_Light.otf
I guess it's a matter of access rights of your folders/files.
Something like 644 would be necessary for a file to be able to access the font from the outside web (the last 4 => read access for public). You can either use chmod on the console or change the rights in your ftp-client.
Also, you should support more than otf, or you will most likely lock out a significant amount of Internet Explorer Users.
I've seen some new websites that are using custom fonts on their sites (other than the regular Arial, Tahoma, etc.).
And they support a nice amount of browsers.
How does one do that? While also preventing people from having free access to download the font, if possible.
Generically, you can use a custom font using #font-face in your CSS. Here's a very basic example:
#font-face {
font-family: 'YourFontName'; /*a name to be used later*/
src: url('http://domain.example/fonts/font.ttf'); /*URL to font*/
}
Then, trivially, to use the font on a specific element:
.classname {
font-family: 'YourFontName';
}
(.classname is your selector).
Note that certain font-formats don't work on all browsers; you can use fontsquirrel.com's generator to avoid too much effort converting.
You can find a nice set of free web-fonts provided by Google Fonts (also has auto-generated CSS #font-face rules, so you don't have to write your own).
while also preventing people from having free access to download the font, if possible
Nope, it isn't possible to style your text with a custom font embedded via CSS, while preventing people from downloading it. You need to use images, Flash, or the HTML5 Canvas, all of which aren't very practical.
To make sure that your font is cross-browser compatible, make sure that you use this syntax:
#font-face {
font-family: 'Comfortaa Regular';
src: url('Comfortaa.eot');
src: local('Comfortaa Regular'),
local('Comfortaa'),
url('Comfortaa.ttf') format('truetype'),
url('Comfortaa.svg#font') format('svg');
}
Taken from here.
You have to download the font file and load it in your CSS.
F.e. I'm using the Yanone Kaffeesatz font in my Web Application.
I load and use it via
#font-face {
font-family: "Yanone Kaffeesatz";
src: url("../fonts/YanoneKaffeesatz-Regular.ttf");
}
in my stylesheet.
Today there are four font container formats in use on the web: EOT, TTF, WOFF,andWOFF2.
Unfortunately, despite the wide range of choices, there isn't a single universal format that works across all old and new browsers:
EOT is IE only,
TTF has partial IE support,
WOFF enjoys the widest support but is not available in some older browsers
WOFF 2.0 support is a work in progress for many browsers.
If you want your web app to have the same font across all browsers then you might want to provide all 4 font type in CSS
#font-face {
font-family: 'besom'; !important
src: url('fonts/besom/besom.eot');
src: url('fonts/besom/besom.eot?#iefix') format('embedded-opentype'),
url('fonts/besom/besom.woff2') format('woff2'),
url('fonts/besom/besom.woff') format('woff'),
url('fonts/besom/besom.ttf') format('truetype'),
url('fonts/besom/besom.svg#besom_2regular') format('svg');
font-weight: normal;
font-style: normal;
}
If you dont find any fonts that you like from Google.com/webfonts or fontsquirrel.com you can always make your own web font with a font you made.
here's a nice tutorial: Make your own font face web font kit
Although im not sure about preventing someone from downloading your font.
Hope this helps,
there's also an interesting tool called CUFON. There's a demonstration of how to use it in this blog
It's really simple and interesting. Also, it doesn't allow people to ctrl+c/ctrl+v the generated content.
I am working on Win 8, use this code. It works for IE and FF, Opera, etc.
What I understood are : woff font is light et common on Google fonts.
Go here to convert your ttf font to woff before.
#font-face
{
font-family:'Open Sans';
src:url('OpenSans-Regular.woff');
}
First of all, you can't prevent people from downloading fonts except if it is yours and that usually takes months.
And it makes no sense to prevent people from using fonts.
A lot of fonts that you see on websites can be found on free platforms like the one I mentioned below.
But if you want to implement a font into your website read this:
There is a pretty simple and free way to implement fonts into your website.
I would recommend Google fonts because it is free and easy to use.
For example, I'll use the Bangers font from Google.(https://fonts.google.com/specimen/Bangers?query=bangers&sidebar.open&selection.family=Bangers)
This is how it would look like:
HTML
<head>
<link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet">
</head>
CSS
body {
font-family: 'Bangers', cursive;
}