I have a mac, and have installed a font called "7 Segment" (it shows up in Font Book). When I use font-family: "7 Segment"; I get Helvetica (or similar) rather than the browser's default font, but it still isn't showing the correct font. The page only needs to be shown on this computer. How would I use the font on this page? Thanks.
You need to use the css-property font-face to declare your font. Have a look at this fancy site: http://www.font-face.com/
Example:
#font-face {
font-family: MyHelvetica;
src: local("Helvetica Neue Bold"),
local("HelveticaNeue-Bold"),
url(MgOpenModernaBold.ttf);
font-weight: bold;
}
See also: MDN #font-face
This is not a system font. this font is not supported in other systems. you can use font-face, convert font from this Site or from this
Related
After poking around many stylesheets for different websites, I have consistently noticed font or font-family values that are used which do not appear to use correct font-family names. I am wondering if I just don't fully understand how to reference font family names as used by CSS.
For example, on this stylesheet, the authors use the following several times:
font-family:"minion-pro";
however, as far as Google tells me, no such font family actually exists. For example, if you Google the following:
font minion-pro
none of the first several hits show anything "minion-pro", but rather all the hits are for "Minion" or "Minion Pro"; the fifth hit is for this link, which as far as I understand CSS, requires the user to reference this font as
font-family: "Minion Pro";
I have also seen this on some stylesheets for the font "Myriad Pro" which, when you Google font myriad-pro, only return hits for the font "Myriad" and "Myriad Pro". That is, in CSS stylesheets, I have seen this
font-family: "Myriad-Pro";
but to me, this is not correct, and should be
font-family: "Myriad Pro";
So my simple question is: are fonts which contain spaces able to be rendered properly if the spaces are replaced with hyphens?
I believe the answer to this is "no" based on the docs - I cannot easily test this because I do not have easy access to these fonts and I am at work right now. (when I try Codepenning this with "Myriad Pro" or "Minion Pro" nothing happens - fonts not recognized)
It depends on what you name the font-family when you create the #font-face font definition to serve your font.
Like this:
#font-face {
font-family: 'montserratregular';
src: url('/content/fonts/Montserrat/montserrat-regular.eot');
src: url('/content/fonts/Montserrat/montserrat-regular.eot?#iefix') format('embedded-opentype'),
url('/content/fonts/Montserrat/montserrat-regular.woff2') format('woff2'),
url('/content/fonts/Montserrat/montserrat-regular.woff') format('woff'),
url('/content/fonts/Montserrat/montserrat-regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
In this case I would reference font-family: 'montserratregular'; in my css. But if in the #font-face declaration I defined font-family: 'montserrat-regular'; or font-family: 'montserrat regular'; then I would use that in my css.
In the stylesheet you linked the author probably has his #font-face declarations in a separate css file where he defines Minion Pro as "minion-pro", this is common.
Other fonts that you don't serve to the client, System Fonts, should be referenced by their system font name. You can use a site like CSS Font Stack to see what those names are and the likelihood (in %) that they are a system font on Windows or Mac. It also provides common fallbacks for fonts (i.e. you could do this: font-family: 'Myriad Pro', 'Myriad-Pro', 'MyriadPro', Arial;).
A font like Myriad Pro or Minion Pro don't usually ship as an installed system font by default, so thats why we serve the font to the client using the #font-face approach. I user could install Myraid Pro on their machine and then it would be a system font, but you would have to know the exact name and you can't guarantee a user has a unique font or require users who visit your site to manually install it.
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.
For some reason the font I'm trying to add won't add itself to my website. I'd rather not do this with an image, so is it possible the font is broken? Would it be possible to fix it with just the otf or ttf?
My code (in case I'm missing something):
#font-face {
font-family: urbanJungle;
src: url('UrbanJungleDEMO.ttf');
}
h1 {
font-family: urbanJungle;
font-size: 100px;
color: #34495e;
}
Additional details: This is in the latest Chrome, other custom fonts work.
In the network console the font is red and it says cancelled.
Live URL: http://codestack.co.uk/website/
The font was from Dafont, no extra processing applied by myself, it's in the same directory as the index page. All the relevant CSS is included.
You should use Font Squirrel font-face generator for this: http://www.fontsquirrel.com/tools/webfont-generator
Different browsers need different font formats, you only provided one. The generator will convert your font to all the formats needed and give you a CSS file too, with no hassles.
You are using only TrueType font, IE support only *.eot fonts. And you are missing a lot informations. It is always better to use font stack instead of using single font, if first font went missing css use immediate next font on the list (called font-stack).
Here is an interesting article about #font-face by Paul Irish : Bulletproof #font-face Syntax
#font-face{
font-family:MyFont;
src:url(../font/MyFont.eot);
src:local('?'),
url(../font/MyFont.woff) format("woff"),
url(../font/MyFont.otf) format("opentype"),
url(../font/MyFont.ttf) format("Truetype"),
url(../font/MyFont.svg#myfont) format("svg");
font-weight: normal;
font-size:normal;
}
body{
font-family: "MyFont", Verdana, sans-serif; /* Font stack */
}
As title already says: font-face does not work with my Chinese fonts.
I have downloaded some Chinese fonts, but for some reason these are not recognized by my css.
This is the css I use:
#font-face
{
font-family: 'chinese';
src: url('chinese.ttf') format('truetype');
}
html {
height:100%;
font-family:"chinese";
}
Now, if I change the url to a 'normal' font, it works; also for downloaded fonts (I tested it with Din). Unfortunately the 'normal' fonts do not support Chinese, so the characters will stay unaffected.
Both fonts are located in the same folder as the css file, so the url is not the problem. Also all character sets are correct (or else I couldn't see the default Chinese at all).
Is there maybe some extra thing I have to do for Chinese? Or what is it?
When declaring a Chinese font family, it’s typically a good idea to type out the romanization of the font (for example, “SimHei”) and declare the Chinese characters as a separate font in the same declaration. What this does is help reference the font file regardless of weather it’s been stored in the local system under its Chinese or western name – you’re covering all your bases here.
Example :
font-family: Tahoma, Helvetica, Arial, "Microsoft Yahei","微软雅黑", STXihei, "华文细黑", sans-serif;
For Your Reference : Good Rules for Using Chinese fonts in CSS
I think this may help you to resolve your problem.
refer this post,
I think you need the same answer :)
http://stackoverflow.com/questions/15756093/is-the-css-right/15756147#15756147
convert fonts to "woff"
that will solve your purpose..
Sample :
#font-face {
font-family: 'Droid Serif';
font-style: normal;
font-weight: 700;
src: local('Droid Serif Bold'), local('DroidSerif-Bold'), url(http://themes.googleusercontent.com/static/fonts/droidserif/v3/QQt14e8dY39u-eYBZmppwTqR_3kx9_hJXbbyU8S6IN0.woff) format('woff');
}
you need to modify font name and url :)
As far as I know, there's a service based in Taiwan can help you use different Chinese font.
http://en.justfont.com/fonts
Due to the large size of Chinese font file, it's recommended to use Google cloud service. But there's no appropriate Chinese font on it. So you can give it a try on this justfont web font service.
Select any font you want for specific font weight. Then it'll be added to your project.
Choose your selector like .notosans, #notosans or h2
Click "JS" button and get your code for your setting
Add it befor <body>
Insert your class or id.
Give it a try and get your beautiful Chinese font. :)
link is :
http://www.woolovers.com/silk-cotton/womens/sleeveless-silk-cotton-camisole.aspx
Left is iPhone display and right is PC. The fonts circled are having same css but have different display. A(pc)=B(pc) but A!=B. Any ideas?
As Jukka has said it is not a supported font on iOS so you have three options.
Choose a different font which is available on ALL (iOS, Android, MacOS, Windows etc.) platforms.
Host the font file on your web server and point to it with CSS #font-face.
Use an online font hosting service such as Google Webfonts
To point to a custom font with CSS use the code below and copy the Lucida Sans font file to your web server.
#font-face{
font-family: "Lucida Sans"; src:url('LucidaSans.ttf');
}
Note: Google Web Fonts does not have Lucida Sans available.
It seems that iPhone just hasn’t got a font named Lucida Sans and therefore uses another font. Cf. to What fonts do iPhone applications support?
My computer doesn't show the text using Lucisa Sans either, because the version of the font that I have is named Lucida Sans Unicode. All computers doesn't have a font named Helvetica either.
You should use a font stack will fallbacks all the way to the default font sans-serif defined in CSS. That way you know that one of the fonts specified will always be used, and it won't fall back to something completely different:
font-family: Lucida Sans, Lucida Sans Unicode, Helvetica, Arial, sans-serif;
See https://developer.mozilla.org/en-US/docs/Web/CSS/font-family:
You should always include at least one generic family name in a font-family list, since there's no guarantee that any given font is available. This lets the browser select an acceptable fallback font when necessary.
I went with the following fallback fonts:
font-family: "Lucida Sans","Helvetica Neue",Helvetica,Arial,sans-serif;