I was wondering if the San Basic Sans Light SF font be used with CSS? I'm not sure what font family this font belongs too and can't seem to get it to work with CSS. The closest I've got so far is using the sans-serif font family. I was wondering if anyone could guide me on how I could use Basic Sans Light SF in my CSS code.
Thanks, Grant
#follower-alert .text {
text-shadow: 5px 0px 5px black;
font-family: sans-serif;
}
The CSS font-family property tells the browser to load a font from the operating system. If the browser can't find the font requested, it tries the next one on the list. It it reaches the end of the list, it uses the browser's default font.
What that means is that, when specifying a specific font using the font-family property, you are simply requesting that the client use that font if the client has that font installed. If you request Helvetica, but the person visiting your site hasn't installed Helvetica, the browser will fall back to the next option.
There are a few keywords that don't specify a specific font, but rather tell the browser to load which ever font it thinks best fits the category. Most browsers load the operating system's default for the specified category. Those keywords (called generic family names) are as follows:
serif - any fairly neutral font that has serifs.
sans-serif - any fairly neutral font that does not have serifs.
monospace - any font in which all characters are the same width.
cursive - any font which simulates handwriting (this is loosely defined).
fantasy - any decorative font with artistic flourishes (this is loosely defined).
Outside of the generic family names, you can specify a specific font in quotes. If you have a font installed on your computer called "Basic Sans Light SF", you can use the following CSS property:
font-family: "Basic Sans Light SF", sans-serif;
On your computer (and any other computer that has the Basic Sans Light SF font installed), the text will be displayed in that font. On a computer that doesn't have the font installed, some other sans-serif font will be used installed (whatever the OS default is).
You can get around this limitation using a CSS technique called #font-face to embed a web font in your page.
Embedding fonts in your page slows down load times but increases consistency. Because web fonts are a new technology, there are competing file formats which have different levels of support on different devices. For full coverage, the font you use should be optimized for the web, and you should include multiple formats of the same font on your server. You also need to be sure the font you are using is open source or is licensed to you for use on the web.
Google Fonts offers a large repository of open-source web-ready fonts, hosted through fast CDNs and easily embeddable in any webpage. You may consider using a font available through this service.
If you have a web-ready and licensed font, you can host it on your own web server and use the #font-face property manually. Assuming your font files are in a subfolder named "fonts", an example (from CSS Tricks) is below. This includes all the file formats needed for the maximum possible level of browser coverage. This page goes into great detail about the different types of web-font file formats available and the advantages / disadvantages of each.
#font-face {
font-family: 'Basic Sans Light SF';
src: url('fonts/BasicSansLightSF.eot'); /* IE9 Compat Modes */
src: url('fonts/BasicSansLightSF.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/BasicSansLightSF.woff2') format('woff2'), /* Super Modern Browsers */
url('fonts/BasicSansLightSF.woff') format('woff'), /* Pretty Modern Browsers */
url('fonts/BasicSansLightSF.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/BasicSansLightSF.svg#basicSansLightSF') format('svg'); /* Legacy iOS */
}
Related
For my website, I am getting following feedback from Google's PageSpeed Insights: Leverage the font-display CSS feature to ensure text is user-visible while web fonts are loading. What does that mean?
CSS font-display allows you to control how web fonts are swapped with system fonts while/after they load. Lighthouse is telling you that you're loading a large amount of font data using #font-face so there will be lag (up to several seconds) where your content is blank while waiting for the fonts to load.
You can change this so that a fallback font (from your local system) loads right away and then gets swapped with your web fonts once they're loaded. (be aware that your fonts may have different sizes and cause things to jump around when they load).
Consider a structure like this:
#font-face {
font-family: "Open Sans Regular";
font-style: normal;
src: url("fonts/OpenSans-Regular.woff2") format("woff2");
font-weight: 400;
font-display: swap;
}
p {
font-family: "Open Sans Regular", Helvetica, Arial, Sans-Serif;
}
font-display:swap; means when the page renders, all paragraph tags will use the FIRST AVAILABLE fallback font until Open Sans Regular has loaded. (In this case Helvetica on a Mac and Arial on Windows).
This gives you initial content on the screen in several milliseconds instead of potentially waiting several seconds for a font to load.
Also Preload web fonts
Use to fetch your font files earlier.
Ensure text remains visible during webfont load
Font Feature is a technique to use advanced text styles and effects as designed by the font developer. A font may support a number of features: some examples include different kinds of ligatures, tabular numbers, or small caps.This picture explain much better
You can solve this issue by using #fontface or you can also try different setting of font-display.
I have the following CSS:
font-family: 'HelveticaNeue-UltraLight', 'Helvetica Neue UltraLight', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-weight: 100; letter-spacing: 1px; }
It works on all Mac browsers (Chrome, Safari) But I opened my project on Chrome and Internet explorer on Windows, it displays the font as bold rather than light. I'm not sure how to fix this but I need the design to work cross platform with the design that appears on mac.
Thanks in advance.
Edit: I've tried using arial but arial doesn't become light on both mac and windows.
The font you see on Windows is not bold, it is just regular Arial.
In almost all Windows systems, the first available font family among those listed in the font-family value is Arial. Since Arial has no typeface of weight 100, or of any weight less than 400, the normal (400) weight typeface is used instead, by the font matching algorithm.
Fonts in standard distributions of Windows generally lack typefaces with weight less than normal. So to use lighter typefaces, you would need to use downloadable fonts (web fonts) via #font-face. See e.g. Is #font-face usable now?
(SO has many specific questions on using #font-face, check them if you run into specific problems with it).
The font-family property inform the browser that it's needed to use that font. If there is no path for it, it will check if the system have that one.
In order to be able to have a font that will work on all systems, you need to use the #font-face property.
This last one will allow you to specify path for all the format font, that most of the browsers will download to display it correctly. (For your information all recent browser support it)
#font-face {
font-family: 'myFont';
src: url('myFont.eot');
src: url('myFont.eot?#iefix') format('embedded-opentype'),
url('myFont.woff') format('woff'),
url('myFont.ttf') format('truetype'),
url('myFont.svg#myFont') format('svg');
font-weight: normal;
font-style: normal;
}
If you want more information about that property you can check the reference here:
http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
Unfortunetly in your case the font HelveticaNeue is copyrighted, you need to buy the rights to be able to use it as a webfont.
You can take a look here about pricing:
http://www.fonts.com/search/all-fonts?searchtext=HelveticaNeue#product_top
Also, if you have already the right and have one of the format that you wish to convert to a webfont, you can accomplish that here:
http://www.fontsquirrel.com/
Finally, if you prefer you can use Google Fonts that will host the files for you, and you will just have a small script to insert inside your pages:
http://www.google.com/fonts
You can use web fonts (free or paid) as suggested by others, or just use a nice font stack that is likely to cover all bases. CSS Tricks has a nice set of them: http://css-tricks.com/snippets/css/font-stacks/
In terms of font weight, your CSS specifies a very light font weight:
font-weight: 100;
So if you want to use bold Arial instead, you need to change that.
There is a font called "Futura", it works on all macs, even iPhones, but not on PCs. So on my web hosting, I have a css file called styles.css. At the top, I have :
#font-face {
font-family: 'Futura';
src: url("Futura.eot");
/* FOR IEs */
src: local('Futura'), url('Futura.ttf') format('truetype');
/* for other web browsers */
}
and in the same place as styles.css I have futura.ttf, and futura.eot. I got them both from a website, so I don't know if those two files are broken or not.
But all fonts still shows as Times New Roman on PC.
1) Make sure that the font-family value degrades gracefully:
font-family: 'Futura', Arial, sans-serif;
2) If you're hosting a copy of the font, make sure that it's on your server and the URL is pointing to it correctly. That said, if you just downloaded the font and are hoping to use it on your website, there are better ways to do this. You're going to want a web-optimized one that only includes the character sets and weights that you actually need. Otherwise, you're forcing every visitor to your site to download 200k worth of font -- no bueno. A good option would be TypeKit (http://typekit.com), which does have Futura PT.
If you're not looking to pay, the Google Web Font Repository is another fantastic resource. You won't be able to find Futura, but they have plenty of other options.
The Futura font is copyrighted, and you can legally use it as a web font only if you have made an agreement with the font vendor, directly or indirectly. See Linotype page on Futura. Contact the font vendor regarding problems in use, after double-checking that you are using the font according to the instructions.
If you find the cost excessive, consider trying to find a suitable free font that is sufficiently similar or otherwise meets your needs. There are some nice sans-serif fonts, with several typefaces, among Google Web Fonts.
This would probably be safer:
font-family: Futura, "Trebuchet MS", Arial, sans-serif;
via http://cssfontstack.com/
Also, you might be safer using a typekit so you can ensure it will show up correctly on any OS or browser. For example: https://typekit.com/fonts/futura-pt
Google's WebFont Loader allows you to pull from various web fonts.
The WebFont Loader is a JavaScript library that gives you more control
over font loading than the Google Web Fonts API provides. The WebFont
Loader also lets you use multiple web-font providers. It was
co-developed by Google and Typekit.
You should also make sure you are using the correct font name. You might have a variant on your PC. For example: Futura Book BT, Futura Lt, Futura Md, Futura Bk, Futura Hv, etc.
I have a basic question that probably refers more to design field, but still it is a web programming.
Let say I need to use Palatino-Linotype font in my web application. How do I better embed it in to my web page application?
My known way:
1) Go to font.com and buy all kinds of palatino-linotype: normal, bold, italic, italic-bold. 4 different files.
2) Then I load fonts via fontface style
#font-face {
font-family: "Palatino-Linotype-normal";
src: "..."
}
#font-face {
font-family: "Palatino-Linotype-italic";
src: "..."
}
3) A I have 4 different fonts, in HTML markup I need explicitly set font of the element to make it bold, or italic, or italic-bold (that what I don't like the most).
Question:
1) is that workflow of using custom web fonts?
2) Maybe there is a way to treat this fonts as usual fonts in term of setting only one font on parent element, and for inner set only style="font-style: italic;" if I want them to be italic.
3) question about performance, does web font rendering speed differs from rendering of usual fonts?
The logical way, generally supported by browsers, is to declare each typeface in a separate rule, as in
#font-face {
font-family: foobar;
src: url("foobar-regular.woff");
}
#font-face {
font-family: foobar;
font-style: italic;
src: url("foobar-italic.woff");
}
and then just declare font-family: foobar and use font-style: italic directly or indirectely via <i>, <em>, and other markup that causes default rendering in italic.
I have simplified the code in an obvious way; naturally you should normally make the font available in different formats, as recognized by browsers.
Services like FontSquirrel generate different code, but it is fairly straightforward to fix the code they produce, or write the code from scratch.
I have intentionally used “foobar” and not “Palatino Linotype”, since the latter is not legally available for use as a downloadable font; at least this is what presume until proven otherwise. (There are many sites on the web that distribute or sell fonts illegally.)
Check out Fontsquirrel http://www.fontsquirrel.com/ it helped me to generate fonts and css:s compatible for multiple browsers.
If you only use Palatino Linotype Normal, and then change it to bold in CSS you won't get the same results as Palatino Linotype Bold. The thing here is that the browser rendering will be used to achieve that and it will suck a lot. I mean, for me and probably for you it will look the same - but not for designers :)
Also there are a lot more to one font than normal, bold and italic. There are light, semi light, black and so on. And designers tend to use those a lot.
So in general, for the first and second question: use different font faces for different styles and no way to use different faces for different styles, another font family indication is needed.
As for the 3rd one: performance is an issue with embedded fonts. But mostly not because of rendering, but because the font files are heavy to download. So be sure to cache them and use only those needed. For example http://www.fontsquirrel.com/ in the previous answer actually by default adds too many files that are all downloaded, so make a little research to know about different formats and what you need to embed.
You use Palatino-Linotype font in your web application use web font from google.
https://developers.google.com/webfonts/docs/webfont_loader
The Web Font Loader is a JavaScript library that gives you more control over font loading than the Google Web Fonts API provides. The Web Font Loader also lets you use multiple web-font providers. It was co-developed by Google and Type kit.
More inforamtion follow this link to my blog:
http://webtemplatesmonster.blogspot.in/2013/02/how-to-use-font-face.html
#font-face { font-family: 'Awesome Font'; src:
url('awesome-font.eot'); /* IE9 Compat Modes */ src:
url('awesome-font.eot?#iefix') format('embedded-opentype'), /*
IE6-IE8 */
url('awesome-font.woff') format('woff'), /* Modern Browsers */
url('awesome-font.ttf') format('truetype'), /* Safari, Android, iOS */
url('awesome-font.svg#svgFontName') format('svg'); /* Legacy iOS */ }
I'm developing a website for someone but they want (insist) that the title be in a non-standard font. (The customer is always right.) I have the TrueType (.ttf) font but how do I bundle this with the website so that it uses it?
I tried putting it in the Images folder and tried to access it with the style sheet:
font-family:URL(Images/Arial_Rounded_MT_Bold.ttf)
But that didn't work. How do I include a non-standard font in a way which will render?
In case it's useful, this is an ASP.NET 2.0 site.
There is currently no standard way to do this. You could use #font-face, but it's not supported in all browsers. As Lance mentioned, this is a great place to find a support reference for the major browsers.
There is an effort to standardize this type of thing. The Web Open Font Format (WOFF) is such an effort. It looks like this may even be adopted by the major browsers in the future. We will have to wait and see.
For now, the best you can do is to reference your font like you normally would, but add a default (standard) font after that.
font-family: "Arial Rounded MT Bold", "Times New Roman", Serif
You have two options:
Create an image instead of using text
Use sifr to convert your text to the .ttf font
You have lots of options, none of them perfect. Smashing Magazine has a great article about rich fonts - most of them involve flash / image replacement.
http://www.smashingmagazine.com/2009/10/22/rich-typography-on-the-web-techniques-and-tools/
Convert your TrueType font into an Embedded OpenType font (it's easy!) so that you have two font files:
Arial_Rounded_MT_Bold.ttf
Arial_Rounded_MT_Bold.eot
Then make your CSS look like this:
#font-face {
font-family: 'Arial Rounded Bold';
src: url('Arial_Rounded_MT_Bold.eot');
}
#font-face {
font-family: 'Arial Rounded Bold';
src: url('Arial_Rounded_MT_Bold.ttf') format('truetype');
}
h1.title {
font-family: 'Arial Rounded Bold', serif;
}
Thanks to Internet Explorer, the EOT specification needs to be first, in a separate #font-face block and without the format attribute. More info here.
Enjoy!
There is a fair amount of activity on the subject of distributing fonts along with websites, but it's generally in the experimental stage, and won't work for the vast majority of browsers in use. In a few years you may be able to do this, but for the moment you would have to use an image or sIFR.