There is a font called "Futura", it works on all macs, even iPhones, but not on PCs. So on my web hosting, I have a css file called styles.css. At the top, I have :
#font-face {
font-family: 'Futura';
src: url("Futura.eot");
/* FOR IEs */
src: local('Futura'), url('Futura.ttf') format('truetype');
/* for other web browsers */
}
and in the same place as styles.css I have futura.ttf, and futura.eot. I got them both from a website, so I don't know if those two files are broken or not.
But all fonts still shows as Times New Roman on PC.
1) Make sure that the font-family value degrades gracefully:
font-family: 'Futura', Arial, sans-serif;
2) If you're hosting a copy of the font, make sure that it's on your server and the URL is pointing to it correctly. That said, if you just downloaded the font and are hoping to use it on your website, there are better ways to do this. You're going to want a web-optimized one that only includes the character sets and weights that you actually need. Otherwise, you're forcing every visitor to your site to download 200k worth of font -- no bueno. A good option would be TypeKit (http://typekit.com), which does have Futura PT.
If you're not looking to pay, the Google Web Font Repository is another fantastic resource. You won't be able to find Futura, but they have plenty of other options.
The Futura font is copyrighted, and you can legally use it as a web font only if you have made an agreement with the font vendor, directly or indirectly. See Linotype page on Futura. Contact the font vendor regarding problems in use, after double-checking that you are using the font according to the instructions.
If you find the cost excessive, consider trying to find a suitable free font that is sufficiently similar or otherwise meets your needs. There are some nice sans-serif fonts, with several typefaces, among Google Web Fonts.
This would probably be safer:
font-family: Futura, "Trebuchet MS", Arial, sans-serif;
via http://cssfontstack.com/
Also, you might be safer using a typekit so you can ensure it will show up correctly on any OS or browser. For example: https://typekit.com/fonts/futura-pt
Google's WebFont Loader allows you to pull from various web fonts.
The WebFont Loader is a JavaScript library that gives you more control
over font loading than the Google Web Fonts API provides. The WebFont
Loader also lets you use multiple web-font providers. It was
co-developed by Google and Typekit.
You should also make sure you are using the correct font name. You might have a variant on your PC. For example: Futura Book BT, Futura Lt, Futura Md, Futura Bk, Futura Hv, etc.
Related
I know this is an extremely basic and stupid question, but I seem to be having a genuinely curious problem.
When using what are supposed to be web-safe fonts like Didot, and using
header h1{
font-family: Didot, serif;
font-size: 36px;
}
my browser just displays the standard serif font.
In fact I can't seem to get it to display any web safe font, it will only display either the standard serif or sans-serif font. I know my selector is correct because I CAN change between serif and sans-serif, but I know its not displaying other web-safe fonts because I tried both Arial and Helvetica (which are both definitely web safe) and when I refreshed from one to another there was absolutely no difference in the font displayed.
I'm a complete beginner and I'm using the simplest possible beginner environment, just an html page linking to a css file which I'm opening with my browser (the url shows up as file:///C:/Users/Agent%201/Desktop/Web%20Projects/ResumeSite/index.html if that is at all relevant). I've tried opening it with both chrome and edge, same results on both
Is there something wrong with my css? Or are there limitations when just opening a local html file with my browser?
Sorry if I'm this is a really dumb question, but I really can't find an answer as to why my fonts aren't working, I've tried !important and some other weird solution I found which involves changing the selector to "header h1, header h1 *" and that did nothing.
Thank-you for any help you can provide me!
When using what are supposed to be web-safe fonts like Didot, and using...
Didot is not a "web-safe" font.
Didot is included with macOS, which may lead some web-designers to assume that it's also available on other platforms (like Windows, Linux and Android) or that those platforms have automatically-mapped equivalents (like how many browsers will map Helvetica to Arial), however that is not guaranteed.
Also, just because a typeface is included with an OS does not mean it is licensed to you to use commercially or in a website - you can be sued for publishing an OS-licensed font onto the public web without having your own font-license.
A "web-safe" font is a typeface that is broadly installed and supported by most contemporary browsers without the need for additional downloads or font installations.
Many typefaces are broadly installed, such as Microsoft's Core fonts for the web which are preinstalled on all Windows computers - and many other operating systems such as macOS either come with the same fonts or have very similar equivalents (e.g. Helvetica instead of Arial) which are automatically mapped by the browser.
The only way to determine if a font is "web-safe" is by doing your own leg-work and manually checking to see if all-or-most of your target users' devices have that typeface available. You can check font availability on Wikipedia and other sites:
macOS: https://en.wikipedia.org/wiki/List_of_typefaces_included_with_macOS
Windows: https://en.wikipedia.org/wiki/List_of_typefaces_included_with_Microsoft_Windows
iOS: http://iosfonts.com/
Android: Consult Android's fonts.xml for the minimum set of stock fonts and default fallback mappings (e.g. "Helvetica" goes to "sans-serif").
You might notice that Android's font list is very... short. That's because the base Android OS isn't what ships on most peoples' phones: Google's layer on top of Android, and OEMs (like Samsung, etc) will add their own fonts on top, but I don't know where to get that list from at-present, sorry.
A "web-safe font stack" means that at least one of the fonts listed in a font-family property value can be safely assumed to be available for use, not that all of them are - nor that the first-preferred-font will be available.
And any font-family list can be made "safe" by adding a CSS fallback generic-family name to the end (i.e. specifying the least-preferred font). Those names are specified in the CSS Fonts Module and are:
serif
sans-serif
cursive
fantasy
monospace
In your case, the property font: Didot, serif is "web-safe" because it has the serif generic-family name at the end. Your visitors will only see the Didot font being used if they already have it installed on their computer, phone, tablet, etc.
If you do want to use Didot, then you need to publish it as a WOFF file and add it to your stylesheet with a #font-face rule: https://css-tricks.com/snippets/css/using-font-face/
I am working on a theme for a new website. We had some professional graphics help us design the theme. For the front page, they took and tweaked the Agency theme.
If you download that theme (it is free) and search for the agency.css file and open it, there is one CSS line to indicate the default font of the page:
body
{
font-family: "Roboto Slab", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
As we can see, the specified fonts in font-family start with "Roboto Slab", then it goes on with "Helvetica Neue", "Helvetica", "Arial", and finally, the default "sans-serif" that the browser would be happy about.
Only the "Roboto Slab" font is a "serif" font, all the others are "sans-serif" fonts...
As a designer, would you say that this is a mistake? Because if your computer does not include the font or if the font is somehow not available at the link above, it would go from a "serif" font to a "sans-serif" font... That seems wrong to me.
There are two different aspects you should consider:
Providing different font families for the same text is no longer needed in modern web.
This is a legacy technique back from when fonts were required to be installed on a machine in order to be used for rendering a web page. Since we now are able to provide fonts as css files and load them using #font-face declarations, (which I assume your website uses), the fallback only occurs when the machine rendering the website fails at loading the provided font file (this is extremely rare and, when it happens, it is likely that fonts rendering with a different face is not the most serious rendering problem of the page - so the best course of action would probably be to just reload the page).
If the second and the third font options were provided by the designer (provided they are professionals) the fonts were probably matched with your other main font and, even though it's part of a different type, it will still complement the other font well.
I'd like to point out I actually have design related studies but have turned into a professional coder over the past ~10 years.
Choosing and matching fonts is a complex process and more often than not, the right size, weight or style weigh in more than whether the font is serif, sans-serif, monotype or fantasy. There's no recipe for matching fonts and usually it involves taking a step back and looking through dimmed eyes. It's also important one also tests with multiple types and combinations of content, to make sure they all are balanced and look well.
In design, following strict rules gets you above average results, but never in the top 10%. Those are most times based on bold actions and inspiration. Don't measure the designer's work using a ruler. If you really need to, measure it in terms of user behavior. If there's an increase in traffic/response/commitment, you got a good design.
The answer you will get from a question like this will to some degree be based on opinions, rather than facts, references, or specific expertise. My opinion is that all important browsers support web fonts. If the web font is used correctly it will show correctly to 99.9% of the site visitors. The other fonts listed is just fallbacks for the 0.1% visitors that for some reason is not able to load the custom web font. The most important thing is that they will be able to read your content. If you would like to control the fallback font, you should choose a set of system native fonts present on all platforms. You could use courier, but that is a mono spaced font (fixed-width) and I doubt it is more readable or fancy. A sans serif is also more modern than e.g. Times and therefore closer to the modern look of Roboto Slab.
I have noticed that at Google Fonts they never use fantasy as fallback class in font-family. For all script and typical fantasy fonts, they use cursive.
I wonder if this is a hint that chrome does not support fantasy as fallback class? For that to be the case, fallback font-classes would have to be handled by the browser via implemented lists for typical serif, sans-serif etc. fonts. Alternatively, the browser could query the os for such lists?
What happens when the browser needs to fallback to say a serif font on the clients system? How will it get info on the installed serif fonts?
I haven't been able to find an aswer to this, so I hope that someone here might know about it. I know web safe fonts and all that are probably about to become things of the past, but they still have some relevance.
Typefaces don't map to any generic font families mechanically. They're only categorized that way in their family names and on font listings such as Google Fonts and Adobe Typekit.
You could create a font stack that consists of a sans-serif family, a serif family, and ends with the fantasy keyword:
font-family: Helvetica, 'Times New Roman', fantasy;
And browsers would treat it the same: use whichever family comes first that is supported, or fall back to the generic family if it comes to that.
I would expect all browsers to implement at least the five generic families defined in CSS2.1 and css-fonts-3: serif, sans-serif, cursive, fantasy, and monospace. But which faces each generic family maps to exactly is less predictable — for one, most browsers actually offer the user the ability to change their preferred default serif, sans-serif and monospace families. And even then, the entire list of installed fonts is available for selection in every category, which suggests that even browsers can't (or at least don't) differentiate between categories of fonts.
The default preferences that a browser ships with are based on assumptions of which fonts are most likely to be preinstalled on any given system.
I can't answer why Google Fonts doesn't seem to specify fantasy in any of its font stacks.
I've set up a test case:
http://codepen.io/jaycrisp/pen/NxOrOy
.cursive {
font-family: cursive;
}
.fantasy {
font-family: fantasy;
}
I see different fonts in chrome on mac, so that shows that chrome does support the fantasy keyword. I see the same font on Safari and Chrome too.
I'm seeing papyrus for the fantasy font, which I think is a Mac OS bundled font. I'm also seeing the same font on Firefox and Safari.
I would guess that the reason google font uses cursive instead of fantasy is that if you're using such a font, you're probably going for a very specific look to your site. Replacing this font with something like papyrus is going to totally ruin it. Well, using Papayrus will totally ruin your site anyway, but that's another matter.
I was wondering if the San Basic Sans Light SF font be used with CSS? I'm not sure what font family this font belongs too and can't seem to get it to work with CSS. The closest I've got so far is using the sans-serif font family. I was wondering if anyone could guide me on how I could use Basic Sans Light SF in my CSS code.
Thanks, Grant
#follower-alert .text {
text-shadow: 5px 0px 5px black;
font-family: sans-serif;
}
The CSS font-family property tells the browser to load a font from the operating system. If the browser can't find the font requested, it tries the next one on the list. It it reaches the end of the list, it uses the browser's default font.
What that means is that, when specifying a specific font using the font-family property, you are simply requesting that the client use that font if the client has that font installed. If you request Helvetica, but the person visiting your site hasn't installed Helvetica, the browser will fall back to the next option.
There are a few keywords that don't specify a specific font, but rather tell the browser to load which ever font it thinks best fits the category. Most browsers load the operating system's default for the specified category. Those keywords (called generic family names) are as follows:
serif - any fairly neutral font that has serifs.
sans-serif - any fairly neutral font that does not have serifs.
monospace - any font in which all characters are the same width.
cursive - any font which simulates handwriting (this is loosely defined).
fantasy - any decorative font with artistic flourishes (this is loosely defined).
Outside of the generic family names, you can specify a specific font in quotes. If you have a font installed on your computer called "Basic Sans Light SF", you can use the following CSS property:
font-family: "Basic Sans Light SF", sans-serif;
On your computer (and any other computer that has the Basic Sans Light SF font installed), the text will be displayed in that font. On a computer that doesn't have the font installed, some other sans-serif font will be used installed (whatever the OS default is).
You can get around this limitation using a CSS technique called #font-face to embed a web font in your page.
Embedding fonts in your page slows down load times but increases consistency. Because web fonts are a new technology, there are competing file formats which have different levels of support on different devices. For full coverage, the font you use should be optimized for the web, and you should include multiple formats of the same font on your server. You also need to be sure the font you are using is open source or is licensed to you for use on the web.
Google Fonts offers a large repository of open-source web-ready fonts, hosted through fast CDNs and easily embeddable in any webpage. You may consider using a font available through this service.
If you have a web-ready and licensed font, you can host it on your own web server and use the #font-face property manually. Assuming your font files are in a subfolder named "fonts", an example (from CSS Tricks) is below. This includes all the file formats needed for the maximum possible level of browser coverage. This page goes into great detail about the different types of web-font file formats available and the advantages / disadvantages of each.
#font-face {
font-family: 'Basic Sans Light SF';
src: url('fonts/BasicSansLightSF.eot'); /* IE9 Compat Modes */
src: url('fonts/BasicSansLightSF.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/BasicSansLightSF.woff2') format('woff2'), /* Super Modern Browsers */
url('fonts/BasicSansLightSF.woff') format('woff'), /* Pretty Modern Browsers */
url('fonts/BasicSansLightSF.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/BasicSansLightSF.svg#basicSansLightSF') format('svg'); /* Legacy iOS */
}
I want to have a consistent fonts display when user browse my web pages, I'm trying to use font squirrel to convert my fonts into multiple formats but it gives me error somehow...Stated that it is a licensed font.
But I've purchased the font previously, so how do I provide the license for my font in order to let me do the conversion?
depending on where you bought the font you might not have a license to use it on the web.
font web embedding usually requires a special license. (here's an example with different licensing options for Helvetica Neue).
If you want to use custom font on your page I would suggest having a font file with you page (in the same folder/directory). For example:
/folder
page.html
font.ttf
Then using css #font-face feature:
#font-face
{
font-family: font;
src: url(font.ttf);
}
and afterward apply it to any html element
body {
font-family: font;
}
Just trying to extend on Liviu's answer. Helvatica is not a web font. It comes with Mac OS X. So, unless the user has it installed, it won't show. If you are asking if you can embed it or not, the answer is yes, you can embed it. But that is NOT allowed.
If you must use it, go ahead define it as a font family, but also define a fall-back family. Just in case a user doesn't own a mac, they will see the other family font.
Lastly, if you wish to use a web font, maybe you could have a look at Google Web Fonts: https://www.google.com/fonts/ it has many options and it's fairly easy to use. You might even find a font that looks similar to Helvatica or any other fonts you have in mind.
Good Luck!