I'm using monospace for dollar sign my website, I get the result I'm looking for on chrome / windows and mobile phone but font render different on iOS? Why is the font display different? Is there a way to fix it?
It would be helpful if you provided the CSS code that you are using but I'm guessing you are doing something like this
font-family: monospace;
The reason this looks different on different operating systems is that "monospace" doesn't actually refer to a particular font it refers to any font where "All glyphs have the same fixed width" so each browser has a different font that it uses for "monospace".
If you would like your font to be consistent across different browsers and operating systems you will need to specify a particular font. This article from MDN explains how to specify font on the web https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts
Chrome font for monospace is consolas , you can check each font using chrome://fonts. Think this might be useful to someone
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've got a font rendered on webkit (specifically in the text editor "Nano") and I'd like to display an OTF font that has a variant called "Garamond Premier Pro Italic Display". I believe it's a "suitcase" font.
Here's what the font looks like in Font Book:
Things I've tried:
font-variant-alternates: character-variant("ItDisp");
and
font-variant-alternates: character-variant("Garamond Premier Pro Italic Display");
No dice.
Any thoughts here? Or is this just not possible?
Unfortunatly this is not possible on the web at the time of writing.
The only real options available to use are as follows:
italic
normal
oblique
You can read up on the font-style attribute and the different things you can do with it here: https://developer.mozilla.org/en-US/docs/Web/CSS/font-style
There are /MANY/ fonts on desktop platforms that simply will not work on the web, as the web use different file formats. It is recommended to use fonts that are specifically designed for use on the web.
Also a note that font-variant-alternates is only supported in Firefox 34+ and Safari, and as such should not be used in production.
With CSS, if you specify font-family: monospace;, my understanding is that the browser chooses its default/preferred monospaced font.
If that's correct, how can you determine which monospaced font your browser is using?
There are 5 generic families that can be used: "serif", "sans-serif", "cursive", "fantasy", and "monospace". When a browser sees one of those, it asks the operating system for the default font in that family.
Thus, which font a web browser uses is OS-dependent.
See Mozilla's documentation on font-family for details.
Use DevTools
Select HTML element
Search for "Rendered Fonts"
Demo
In my case, that was lucida console font. Maybe helps someone)
i am converting psd to html and font used in psd is moolboran, my tag font-family: MoolBoran;, which is not supported by browsers, how can i overcome this problem? is there any possible solution to as alternative?
Your options are to either save an image with your non-standard font, or use the CSS property font-face, and allow the site visitors to download the font file. For more details of this approach, see CSS 3: Custom Fonts Using #font-face.
Web safe fonts have been a bane to designers for a while, but you can check out Google Web Fonts to see if there's a font that's close (it doesn't look like they support MoolBoran unfortunately)
The only solutions are to
A) use an image rather than live text (which is generally a poor method)
B) See if a web font version of "MoolBoran" is available somewhere. And use the #font-family selector. I looked but can't find anything for it.
C) Change your design.
There is nothing wrong with that tag, it's certainly supported by all browsers.
The font does of course have to be installed on the visitors computer, which is probably where you have your problem.
If you want that exact font, you can make an image out of the text. That is the only sure way to get exactly the look that you want across all browsers.
You should supply fallback fonts in your tag, for example:
font-family: MoolBoran, Geneva, Arial, sans-serif;
Our web designer suggested using Cambria as a font. In looking at various font references online, we couldn't find authoritative sources that listed recent (post 2010) browser support for various fonts.
Which sources do you use to determine how supported a particular font is? I'm guessing there are reports for fonts like there are for browsers, but we haven't found anything reliable yet.
I think you don't need to worry too much about native browser support for fonts. Instead you should consider two things:
Using #font-face
Using a good font stack
Combine the two and you should be safe, no matter what.
For #font-face, you can generate the font and make it cross-browser compatible.
Start by licensing the font from here ( http://new.myfonts.com/search/cambria/ ) or somewhere else.
Then generate the #font-face code with Font Squirrel ( http://www.fontsquirrel.com/fontface/generator ) or another service. The result will be cross browser compatible in nearly all cases.
Finally, add the font to a font stack so that there is a fall back in case something happens with your custom Cambria font. Something like this for whichever rule you are working with: font-family: Cambria, Georgia, Palatino, Times New Roman, serif;
Of course, you could also choose a similar free font through Font Squirrel or use Google's Web Fonts.
More good info here: http://sixrevisions.com/css/font-face-guide/
You won't find Cambria and the other fonts in its family natively installed on computers running anything but Windows Vista and newer, and you'll only have luck on other systems if they have Office 2007/2008 and newer installed.
As long as the font is present on a user's computer, any browser should be able to handle it, even without the need for #font-face embedding. The idea of font embedding is to get a browser to recognize and use a font that isn't installed on a user's system, rather than getting the browser to understand and render the font.
You're not going to find something that works on everything. Try Cambria, Georgia, serif; Georgia's a reasonably close substitute that's very widespread, and the serif default will work anywhere.
Discussion here: http://en.wikipedia.org/wiki/Cambria_%28typeface%29
The browser doesn't have much to say as to the fonts it supports; they are dictated by the fonts present in the underlying OS.
It's hard to find support references for particular fonts. However, #font-face is widely supported and regardless, a good font stack with fail-safe fonts is a must-have.