Is it allowed to use:
"font-family: Segoe UI, Trebuchet MS, Lucide grande, sans-serif"
And just rely on the font thats already installed on the system. Including "ROBOTO" on any android device...
I would like to go away from google-fonts (Open sans), as it is causing data-protection problems in EU, and is also blocking website speed (CLS). Whatever.. I think its stupid to download a font.
I know it will look slightly different on Windows and Mac Systems, - but anyway it does look different on Android devices all the time, so let the Mac use Trebuchet MS an I am fine with that. It will not destroy the whole design.
I just would like to use "Segoe UI" if it is available on a Windows System (and it is on 99,9% of them anyway)
I do not offer it for download or safe it somewhere.
Is that legal?
I found the standard-web fonts (Arial, Verdana,...) are always missing a semibold weight, thats why I dislike to use them.
It is legal if you don't upload it on you site, if you just specify like font-family: Segoe UI, Trebuchet MS, Lucide grande, sans-serif its legal
If you want place font to your site (upload to your server) for all users (not only if they have it on PC) you need to buy Web License for it
Related
In Chrome v75 Windows 10
font-family: "Arial Black" works, but font-family: "Arial Bold" doesn't.
They both work in Edge.
I know I can still use font-weight. But here I struggle to understand why Chrome doesn't work with Bold: Other fonts that end with Bold wouldn't be found either.
As you see in the above I have all variants installed. "Arial Bold" falls back to "broadway".
http://jsfiddle.net/amts6ebq/1/
"Arial Bold" isn't a font family.
"Arial" is a font family. "Bold" is a weight. The Bold weight of Arial is stored in a file called "Arial Bold", but this doesn't mean it's part of a separate family.
What you want is:
.example {
font-family: "Arial";
font-weight: bold;
}
<div class="example">Example</div>
It’s true, "Arial Bold" isn't a font family. You can blame Microsoft.
Using the font-weight declaration is the correct answer, however, some users might find themselves in my situation. I am using sass on a large number of templates, and we have written all our work so far in a way that we cannot use font-weight. We apply font weights by using font-families of different weights. One recent design was specified to use Arial. Of course we also need to use this font in bold in many places. So Arial won’t work for us.
The solution is to use a different font. Arial is actually the same as Helvetica, so you can do a direct swap and no one will know. You can't rely on the user having Helvetica installed on their system, so you will need to provide web fonts. If you can't find a version of Helvetica to use, There are a lot of similar fonts. You should search online for Arial/Helvetica equivalents, but in 2022, I'm using Roboto, which is a good match, but it is a little condensed. Open Sans might be an acceptable replacement.
tldr; Art Direction should never specify the Arial typeface - it’s not a real typeface, it’s Microsoft’s free version of Helvetica. Instead, use Helvetica.
On my personal website, I created an HTML page that displays Japanese text.
I used the following font families.
font-family: Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
I've put this both in my CSS file and tried nesting it in a statement. All browsers display the fonts correctly in OS X and Linux, but all Windows browsers will only display MS Mincho font.
Does anyone have any idea why?
A browser can only use a font if that font is installed on the machine on which the browser is running. If the font is not installed it tries the next one in the font-family list and if that one is not installed it tries the next and so on until it gets a font that the machine has installed. It then used this font.
If you want a particular font to be used by the browsers then you need to download that font to the machine using the using the #fontface and you can use a tool like Font Squirrel to generate all the correct CSS for you.
Be aware that most fonts installed on machines are subject to copyright and just ripping them from your machine and shipping them down to any old machine is in violation of that copyright. But there are many royalty free fonts out there that may do the job.
Is Segoe UI font built into the browser? If my visitors are viewing from Mac, will it work properly or do I have to set the CSS url for that? My designer says it will work only when we set the URL, however I removed the
#font-face
{
font-family: "Segoe UI";
src: url("fonts/Segoe UI.ttf") format("truetype");
font-style: normal;
font-weight: normal;
}
and it still works atleast on Windows 7. I don't have Mac though, to test.
The Segoe UI font is not built into a browser. It is shipped with some Microsoft software. On a Mac, it is most probably not available, though a user might have acquired it separately or as part of some software package.
You should remove the #font-face rule and the font files uploaded onto a server. Segoe UI is protected by copyright, and it must not be used as a web font without permission from the copyright holder, Microsoft (which probably won’t give a permission).
You will need some other strategy, such as using another font either as the basic font or as a fallback font for visitors who don’t have Segoe UI in their systems. The Google font Open Sans is rather similar to Segoe UI, and it’s free (and it comes in 10 styles, including Book, Normal, Semi-Bold, Bold, and Extra-Bold weight).
It will work on any computer with Office 2007, 2010, Vista or 7:
The Segoe UI font family can be obtained as part of Microsoft Office 2007, Microsoft Office 2010, Windows Vista or Windows 7.
Will also work on XP if the user has downloaded a Windows Live package:
Segoe UI is installed into Windows XP if the user installs Windows Live Messenger, or Windows Live Mail
Source
For any computer that doesn't have the above, you will need to declare it with a #font-face
I would like to add, that web-fonts (google fonts) are nowadays already a data-protection problem with EU-laws (as google safes some personal info), but the real problem with them is, that they cause time-lag on loading (0.6 seconds) and also cause a layout-shift (CLS) then.
I used web-fonts for 10 years. Now I go back to some pre-installed fonts...
Yes.
You may also want to provide the font in OTF as well.
You can find a list of available formats to provide the font in here: http://www.w3.org/TR/css3-webfonts/#font-reference
You can find a converter to turn TTF into the varieties of web fonts here: http://www.font2web.com/
Don't know if this is the right place to ask, but I am quite new to html, have made a complete site and uploaded to web server.
But i tried visiting the site on another device, and the font shows differently, but then when i go onto a website which has a different font it shows fine on their site.
Am i doing something wrong?
Cheers
Adam
Because the computer doesn't have that font, and you didn't include the font to download, just an instruction as to which one to use.
The CSS #fontface instruction lets you direct a browser to a file with a font.
A simpler and lighter approach, is to suggest back-ups. E.g. Instead of:
font-family: arial;
You could use:
font-family: arial, verdana, sans-serif;
The first will try to use Arial, and if it isn't available, will just use the default font for the browser (which could be a serif font like Times, for example).
The second will try to use Arial. If that's not available, it will try to use Verdana. If that's not available, it will try to use the default sans-serif font for the browser, which should at least be closer than a serif font.
Here is a great tutorial on how to create custom fonts on a website.
http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/
It will also explain which types of fonts are compatible on certain browsers
Can I use "Arial Rounded MT Bold" with css ?
font-family:"Arial Rounded MT Bold", Arial, Helvetica, sans-serif;
Nothing Changed when I put :
font-family:Arial, Helvetica, sans-serif;
Google Fonts has Nunito, by Vernon Adams:
http://www.google.com/webfonts/family?family=Nunito
It's nice and rounded; sort of reminds me of what they're using on Glitch.
It's hard to know without more information from the OP but I've seen these same symptoms caused by the hardware acceleration feature in Firefox. It's been know to cause several problems with font rendering. One I've observed is failing to render a non-standard font (such as "Arial MT Rounded Bold") despite it being present on the client machine.
For example, this page...
<html>
<head>
<style type="text/css">
body { font-family: "Arial Rounded MT Bold"; font-size: 30px; }
</style>
</head>
<body>
This can be really annoying.
</body>
</html>
When viewed in IE, Chrome or FF with hardware acceleration turned off the font appears correctly, like this...
But when viewed in FF with hardware acceleration enabled the browser fails to "find" the specified font so it defaults to another, like this...
There have been issues with this "feature" of FF since version 4.
Probably the best solution is to either use a different (standard) font or (as Kent suggests) find a similar web font that will work in all modern browsers. Alternatively, like many font issues, the problem can be mitigated by supplying a list of font families to use as fall-backs.
I've seen an alternative Google Font suggested here from back in 2011 which is a pretty good match but there are some thin parts to the font which aren't the same as the Arial Rounded MT Bold.
For people still looking for an alternative I think this one is a better match; its called Varela Round by Joe Prince:
Varela Round
I would also set it in font-weight: bold; for a more accurate match.
To use custom fonts with good cross browser compatibility, take a look at FontSquirrel. They will generate the correct CSS to get custom fonts working cross browser. Take a look around their site for Rounded MT Bold or whatever else you want :-) Also, if you want more fonts, take a look at http://www.fontex.org/
Google Fonts is also a possibility. There are a lot of different fonts but I don't know whether there's exactly Arial Rounded MT Bold.
You can use only fonts which are installed at the clients computer!! So just mentioning them in the css font-family doesn't work if the font is not installed. For this, Google Fonts and others bring the functionality... so everytime you use a font that is not "Times", "Arial" or "Verdana", which are installed on nearly every computer, you should think about an alternative to raw css
There's a good chance that — if nothing changed (on your local browser's rendering of the webpage) when you changed the font stack — that you don't actually have Arial MT Rounded Bold installed on your computer. One way to test this is to use Firebug, to 'inspect element' for the headline (or whatever the font is applied to), and to edit the font-family listing in the right-hand Firebug pane. (Usually, I just find the named font and add a space into the name of it, which "breaks" the call to the proper font, and the browser then moves on to the next font in the stack.)
Other options include using Google's web-font Nunito (as Kent Brewster recommended a few minutes ago), or setting up a font-face font on your own server, providing one of the rounded fonts (RockoFLF Bold, FF Din Rounded, Nunito, and Arial MT Rounded Bold are all options). (Technically, per Kent's comment, Glitch is using RockoFLF, with Arial MT Rounded Bold as the second font in the stack. At least, that's what they were doing a few months ago when I last looked at their code. ... Oh ... just checked again, and they've dropped the Arial MT Rounded Bold out of the stack. They're calling RockoFLF with an embedded font-face.)
Anyway, as Kent Brewster noted, I think your best bet is to use Google Web Fonts' 'Nunito', if you aren't sure that it'll be on your users' computers (or even your own).
It may not appear because of system compatibility - you can check out Arial Rounded MT Bold on CSS Font Stack for compatibility. There's a 59.53% on Windows and 95.14% on Mac. https://www.cssfontstack.com/Arial-Rounded-MT-Bold
Its worth noting that Linux doesn't come with Arial by default so one should not rely on a font being present on a users computer. Instead they should download the files (license permitting), host them on their site and link to them using #font-face.