I mean this font collection: https://www.google.com/fonts
I want to use some maybe non standart fonts on my page. If I use Google Web Fonts on my site, will fonts be displayed properly? Or fonts from user's browser will be displayed? Or nothing will be displayed? Thank you.
caniuse # fontface – yes, you can, all modern browsers supports fontface.
The font you load will be used on all clients as long as the file from Google is available and the client understands this technology. Therefore you should not load too many fonts, because it dramatically slows down the page loading, as font files are pretty large.
Since you can specify multiple fonts in css, if the file is not available the second specification will be used. This should be something like "Arial", which is mainly available. The third specification can be something generic like "sans-serif". This assures that at least any font you want is used.
Nevertheless, the client will use any font if nothing appropriate was found. It will never silently display no text, just because your CSS does not specify something usable.
yes it will displayed properly and perfectly on web
so no need to worry, use it freely
Related
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>
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.
I use some fonts in my new website that do not exist by default on normal user computers.
After some search I got that there are some tools that might help, like Google web-fonts.
Fonts that I used are : Bebas , Sansation and Quicksand
But I couldn't find them on Google web fonts.
How do I do use these fonts ?
And what are other cross browser solutions?
Different fonts are created by different font foundries. Not all fonts will be found in the same place. And not all fonts are available to be used as web fonts because of font-licensing.
Fonts are not always free and good fonts are rarely free.
You can usually find out if a font is available as a web font, and who owns the font by googling the font name plus "#font-face".
You absolutely should know where you'll be getting the fonts you'll be working with in advance. If you have three fonts that come from three different font-services then that's bad. Firefox especially wont like it much and you'll have some pretty bad fout problems.
Fortunately for you, all those fonts are available through font-squirrel
Bebas
http://www.fontsquirrel.com/fontfacedemo/Bebas
Sansation
http://www.fontsquirrel.com/fonts/Sansation
Quicksand
http://www.fontsquirrel.com/fonts/Quicksand
What you will want to do is download all those fonts, them run them through the #font-face generator
http://www.fontsquirrel.com/fontface/generator
HOWEVER It reads to me like you don't really understand what #font-face is, or how it works. So I'd recommend reading up on it some more.
I am not sure what exactly you mean, but if you want to convert your website's font into a custom font which is viewable for the visitor, you could try use the curfon solution.
I use Firebug avidly and in the CSS-"computed" tab it will only show me the declared stack, but not which font has actually been used by the browser. Aside from removing fonts one-by-one and looking for a change (or having amazing font recognition skills) is there a way to determine what font has actually been rendered by the browser?
This firefox add-on will help: https://addons.mozilla.org/nl/firefox/addon/4415
also read theese:
http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/
Detecting which font was used in a web page
https://superuser.com/questions/43280/utility-to-determine-the-font-used-on-a-site
http://remysharp.com/2008/07/08/how-to-detect-if-a-font-is-installed-only-using-javascript/
It would be easier for development if I can just embed every typeface I'm likely to use, but I definitely don't want the extra HTTP requests for fonts that don't end up anywhere in the page. Can anyone enlighten me?
IE will download the .eot file immediately when it encounters the #font-face declaration.
Gecko, Webkit, and Opera all wait until they encounter HTML that matches a CSS rule with a fontstack including the #font-face font.
-- http://paulirish.com/2009/fighting-the-font-face-fout/
So were it not for IE, it actually would be safe to embed lots of fonts, as long as you're careful not to refer to unused ones in your CSS styles, because at that point they will be downloaded by the browser.
Unfortunately, most browsers won't second guess you to avoid downloading fonts that aren't actually used (actually I don't know of any browser who is smart enough for such avoidance, which of course doesn't mean some such browsers might not exist). Couldn't you post-process the pages during deployment to remove the unused ones?
Paul Irish has a really good tutorial on using #font-face
http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
You can also use a syntax generator on fontsquirrel.com
in addition, you may do this too:
clear browser cache, then run inspector of your browser (right click> Inpsect) and Debugger (resources) tab. then type the url and see what is being downloaded.