In my webpage, it is Ok for presentation in Language English US. But our web application supports Locale.
When I use browser language English US, the web page can be viewed according to my css even I change default browser font.
But when I change to browser language Japanese(JP), the web page uses default browser font, not use my font in css.
Why is it occurred?? I wanna know how to modify it.
PS:
I use IE8 where problem occurs, but in firefox 15.0.1 and chrome version 22.0, the problem does not occur.
According to my understanding,
CSS font property said
The font-size and font-family values are required. If one of the other
values are missing, the default values will be inserted, if any.
When I use English locale(change browser language to English), one of these fonts[arial,helvetica,clean,sans-serif] are available.
So my web page works fine.
But when I change to Japanese locale(change browser language to Japanese), none of these fonts used in my css are available. So browser default browser font is used. Whenever I change browser default font, my web page presentation is also changed.
Correction is to add a japanese font MS PGothic to my css. like
font-family: MS PGothic, Arial, sans-serif;
OR
html *
{
font-family: MS PGothic !important;
}
So when browser language is japanese, MS PGothic is used. You can read CSS !important in
http://www.electrictoolbox.com/using-important-css/
This is my understanding and correction to my problem. Let me know if a better way exists.
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/
My problem is a custom font works fine with the English language on Windows or Linux Chrome browser, but does not display other languages properly on Windows though it seems to work well on Linux.
I am using a custom font, "Source Sans Pro".
body {
font-family: 'Source Sans Pro', sans-serif;
}
Here are examples of rendering.
Linux rendering English
Linux rendering other languages ex:Tamil
Windows rendering English
Windows rendering other languages ex:Tamil
Let me know why it is happening and how to solve it.
Thanks in advance.
When debugging custom fonts, I open developer tools and do a few checks:
Check network tab, did the font file load?
Check elements, is the fallback applied instead of my custom font? In your example, using a fallback with serifs would make it much more obvious if the fallback was being applied.
If the font is being loaded and applied, is it capable of the styles I'm asking? Refined bold or light styles, Cyrillic or other languages require additional files. For example, try selecting Roboto and visit the Customize tab in the bottom drawer.
There are multiple ways to load a custom font. Seeing as Source Sans Pro is available on Google Font, here's a link to their documentation for getting started.
I include say "Noto Sans" or "Ubuntu" on my webpage via css "#import".
If I compare the rendering on my page with the rendering on the GoogleFonts page it looks different for both fonts.
Even though I paste the same text into GoogleFonts and choose the same size, same background, same color.
Here is a picture: (especially visible with the "A")
Any idea if there is a setting I miss?
As you can see neither the weight nor the size matches. Especially the weight seems to be a problem. Comparing "Noto Sans" the font with the same weight looks much thicker on my page.
I downloaded the fonts from google into my system. But this also applies if I delete these fonts and the browser uses remote fonts.
I use MacOSX but checking in Browserstack it seems that the problem is effective in several browsers. I tested in Win7 with IE9 too.
Not sure about the IE browsers, but have you tried adding -webkit-font-smoothing: antialiased;? Google also uses -ms-text-size-adjust: 100%; for IE.
I am seeing an issue with a site I am developing where the content regions of the page are showing random artifacts with font rendering. The pages are using Google Font 'Source Sans Pro' and there are no additional tags other that p-tags in the screenshot below. It looks like it is using the fallback sans-serif on parts of the page and the appropriate font in others.
I've also noticed if I toggle the font-family CSS attribute in the console on and off it remedies the appearance... Additionally if I refresh the page (instead of using the on-site navigation) it also seems to render properly. I've not been able to replicate this on another machine with the latest version of Chrome, but it is consistent across my development and test environments. The only extensions I am using are Disconnect, AdBlock, PageSpeed Insights, an RSS reader, and Javascript Quickswithcer... All other browsers appear to behave as expected.
CSS used:
body,*{font-family: 'Source Sans Pro',sans-serif}
Any ideas as to why the latest version of Chrome for Windows may be getting presented this way?
I believe I came across a similar issue. I was able to fix it by overriding the CSS text-rendering: optimizeLegibility set on the body tag by a CSS framework I was using like so:
body { text-rendering: auto; }
Note: In the interest of trying to track the bug down, my version of Chrome is 48.0.2564.116 (64-bit) on OSX El Capitan. A coworker told me about the issue and I had to switch to incognito mode before I started seeing the issue.
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;