I'm trying to build a web page and need some kind of fairly distinct cursive font (not too crazy, but still distinguishable from standard print). However, when I look at this page in Firefox: https://www.w3.org/Style/Examples/007/fonts.en.html
My browser renders all of them in an approximately standard font--none of them look nearly cursive enough. Since this is just an out-of-the-box installation of Firefox, I imagine this is how it will render on most users' screen if they're using the same.
Is there any way to force render a more cursive font for someone using standard Firefox?
As was mentioned earlier, the font in that example varies depending on device, not browser.
When you set a non-specific font-family in your stylesheets, e.g. font-family:sans-serif; or font-family:cursive; what font that actually gets used will depend entirely on that visitors operating system and what fonts are installed there.
In that link it shows you various system fonts that may or may not be installed, with system defaults as a fallback, with a picture next to each showing what it should look like if your system has that font. This will differ from person to person. It gets quite complicated when you consider that sometimes the fallback fonts can even vary between OS versions.
So for more complete control, many developers turn to webfonts. I use a lot of Google fonts for my websites; https://fonts.google.com/
There are different ways of using a webfont, but I find this way simplest;
/*put imports at the top of your stylesheet*/
#import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
h2 {font-family:"Lobster", cursive;}
<h2>I'm A Webfont</h2>
Related
I have seen this post What is the default font family in HTML and how can I check this?
However, I have a few more specific questions, for the following simple HTML code, when it is displayed in a browser, will the browser use system font, i.e., the fonts in /windows/fonts, to render the web page content?
According to https://granneman.com/webdev/coding/css/fonts-and-formatting/web-browser-font-defaults, different browser use different default font, which means when the page is displayed in different browsers, the content will indeed display differently, correct? Chrome on Windows uses Arial by default, but what if the local computer does not have this font installed, will the browser use a different font, or will it display blank?
<body>
Stack Overflow
</body>
System fonts are fonts installed on the user's system. If your web site does not choose a font to use, then that user's system font will be used. Different systems have different fonts. System fonts on Windows may not be the same as fonts on Macs or Linux or BSD. Browsers do not have fonts themselves. It is not up to the browser to decide what those system fonts are.
The default fonts in all browsers are Helvetica Neue, Helvetica, Arial, and sans-serif. All computer systems have these by default, pre-installed with the operating system. It's a standard. They're there. Unless a user has deleted them everyone has them. Therefore any of those will display.
If the user does not have the font the web page code instructs to be used their computer system will use whatever their default font is set to. It will not display a blank page.
To use a specific font:
https://www.tutorialspoint.com/html/html_fonts.htm#:~:text=You%20can%20use%20a%20<basefont,use%20the%20tag.
That will work as long as the user has that font installed as the demonstrations on that page show.
To use a custom font:
How do I install a custom font on an HTML site
If you're not happy with these links this information is readily available on many different sites and in a ton of different articles that can be found by searching for it.
On my website, for some reason the Arial font is displayed differently on several devices.
It was fine and the complaints started to arrive approximately a month ago and I suspect that the root cause is somewhere locally (browser or OS).
All the problematic users sit on different versions of Windows and mostly use Chrome (but no everyone).
Tried to investigate this issue but did not find something in common.
Is anybody faced such a problem already?
Code:
<h1 style="font-family: Arial;">Title</h1>
I suggest you to put your fonts file in your website directory and set path from your directory.
(some times maybe that device has not your font.)
in top of your css file:
#font-face {
font-family: "BYekan";
src: url("../font/BYekan.eot?#") format("eot"), url("../font/BYekan.woff") format("woff"), url("../font/BYekan.ttf") format("truetype");
}
use it:
body{
font-family: "BYekan";
}
Yes, there is a reason for this. There's nothing to state that any given device, or browser for that matter, must adhere to any given standard for the rendering of fonts. Consequently, it's prudent to create overall website designs with the assumption that text will render inconsistently across browsers/devices. As soon as you assume rendered text will "fit in to this/that space" you're in trouble.
Instead create a design that deals with the issue of font rendering elegantly.
This should not be surprising, and what you call the "root problem" is actually not a problem, but simply how fonts work in the browser.
Without an explicit #font-face rule and real font sources, you're telling the browser that you don't really care what it loads, as long as the font that gets loaded matches, roughly, what you're asking for. If you ask for "Arial" then the browser will ask the OS for a font that claims to be in the Arial family, and different devices may (or rather, will) have different versions of Arial installed. So your content's going to look different for different devices.
However, and something a lot of people forget, it doesn't matter if that's the case. What matters is that your site content looks consistent. People are not going to look at your site on two computers at the same time and then notice that they don't look pixel-identical. Individual users are going to look at your content on one device at a time. So: is the look consistent on a single device? Great, you're done. Which version of Arial is actually being used is pretty much irrelevant in that case.
I have a website, which is a internet forum, and in my forum posts, I have the following font:
font-family: 'Segoe UI',Tahoma,Arial,Helvetica,sans-serif;
Now, here's how it looks like in different browsers: (from left: chrome, firefox, IE)
As you can see, chrome is displaying whole different font than the other two. Why? How do I fix that (I want this font to look like the other two)? Also, this is the link to the page I made screenshot of: https://scyk.pl/Forums/Thread/Na%20luzie/8 (look at the post contents)
What is happening is that Google Chrome most likely does not have that font, and is using the fall back fonts instead. To make sure this doesn't happen, you can explicitly load the font using
#font-face
in CSS3, which allows you to explicitly load the fonts by referencing it. You can learn more about using #font-face HERE, where you use src: and get the url of whatever font you are using.
If the font is not that important, however, I recommend not worrying about it and just letting Chrome use the fallback fonts instead.
To do #font-face, the code would be:
#font-face {
font-family:Segoe UI;
src:url(https://github.com/shawnphoffman/shawnphoffman.com/blob/master/Content/fonts/segoe-ui-semilight.woff);
}
You may have to go to the github link and download the raw version of the font, then reference it there.
You have several options but I think you'll find all of them unsatisfactory:
Render the page into an image on the server and send that to the client.
Get the source code for Chrome and replace the font rendering engine with the one used by Firefox.
Oh, btw, it will also look different on Safari (probably a lot different to the other three; Safari is a very sophisticated browser and it will try it's utmost to make a page look good; driving web designers insane in the process is a small price to pay for beauty ;-)).
Rendering text is something that you only have limited control over. Maybe Chrome doesn't find Segoe UI, maybe the font rendering engine can't use the hinting of your font. While not ideal, I suggest not to spend too much time on it.
I've read that OSX and Windows have two very different algorithms for rendering fonts. As such, it's a common issue that web fonts look "heavier" when viewing them in OSX than they do in Windows.
For example, this is the same font, on the same site, in the same browser, but on different operating systems:
Here's Arial exhibiting similar differences:
Is there any way of altering the rendering of fonts in either Windows or OSX so they look closer to each other? Or is there some other technique to deal with this difference?
That font is a particularly bad example, I deal with a lot of fonts and have never seen one look like that. Keep in mind that people are used to seeing their fonts rendered a certain way on their own machines, and thus it is not your job to dictate how fonts should be rendered.
A few things to keep in mind are to only use weights you've included, for example, do not use font-weight: bold on a custom font-face if you haven't actually included the bold version of that font. "Browser bold" always looks messed up compared to the actual bold font.
Also, for some fonts, I find that I need to change the font-smoothing property for webkit browsers, as the default (subpixel-aliased) can look a little heavy. You can add this property to any element that uses the problematic font (even the body, if required).
-webkit-font-smoothing: antialiased;
I've been displaying Chinese fonts on my Chrome browser on my Mac and I liked it. However the font is rendered differently in Firefox or when I use Chrome on Windows. Is there a way to standardize the font that the browser chooses for Chinese characters?
You have various options:
As Art of FITZ says, specify an #font-face and have the font downloaded to the user (which will, indeed, take up a lot of bandwidth if the font is large)
As Jukka says, provide a list of font names in the font property and hope one of these is installed on the user's computer
The legacy method: render the text on your own computer in the font of your choice, upload this as an image file. If you don't have much text to display, this may be even more efficient than having an #font-face clause that downloads a multi-megabyte font file.
Tailor the #font-face to your needs: Depending on the amount of text to display, you may be able to create a font with only the subset of characters you need (with an online utility such as Font Squirrel), reducing the size of the font file to download.
Here is a quick reference to how this line of code is used.
http://www.css3.info/preview/web-fonts-with-font-face/
Different browsers have different default fonts, but can can override this by setting font-family in CSS. Just remember that different computers have different sets of fonts available, so you should normally use a list of fonts, hopefully covering most browsing situations.
Maybe you have done so but see different results on different browsers. Please post a relevant part of the code and/or a URL then.