In MacOS it display like this
but in Windows its not looking clean as in MAC
The font family i am using is
font-family: Georgia;
font-size: 1.2em;
font-style: normal;
site link:
http://jp.baccarat.com/%E3%82%A2%E3%83%A9%E3%83%95%E3%82%A9%E3%83%AA%E3%83%9A%E3%83%B3%E3%83%80%E3%83%B3%E3%83%88/2101057,ja_JP,pd.html?start=1&cgid=jewelry-pendants
Finally i found,
font-family:Meiryo
will be better for this languages.
Related
I have designed a template in wordpress and now I'm writing it in css/html but it seems the browser isn't using my font.
Photoshop:
Browser:
This is my css
h1 { font-size: 34px; font-family: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif; font-weight: 100; }
The font in photoshop is Lucida Grande regular.
Never use platform-specific fonts ( Mac-only / Windows-only fonts ) in website; it's quite different in representation between browser & the operating system itself. If a visitor of your website does not have the font, it will fallback to next font specified in your font-family font stack.
It's suggested to use web fonts in website. You can find similar font in Google Fonts as alternative.
Yet, the above does not apply to most of the non-Unicode languages, especially CJK (Chinese, Japanese and Korean. Take Chinese as example, since Chinese has a wide range of characters, it is not feasible to make a web font for Chinese, as the file size of the font will be very large. (there are some Chinese web fonts, but most of them are >10MB; no visitors have patience to wait a font to load for a minute before they can read a pretty font)
Thanks to all answers.
I fixed it using the "Lucida Sans Unicode" font and the "letter-spacing" css property.
For everyone that have my same problem, here's my solution.
h1 { font-family: 'Lucida Sans Unicode', sans-serif; font-size: 34.14px; text-align: center; font-weight: 100; letter-spacing: 0.6px; }
On my site i need to use font Interstate Hairline. So I put it on my Fonts folder and put then in my code, css:
#font-face {
font-family: 'interstateHairline';
url('../fonts/interstate-hairline.ttf') format('truetype'), font-weight: normal;
font-style: normal;
}
.documents_box ul h4 {
font-family: "interstateHairline" !important;
font-size: 12px;
font-weight: normal;
text-transform: lowercase
}
It's display correct on Windows 7, 8 all browsers. Ubuntu Chrome - correct, Firefox - it's bigger then must be. But main problem it's display not correctly on Windows XP in Firefox/Chrome. All browsers are latest version. Maybe someone have the same situation?
Sorry for grammar mistake.
From the start I need to say that I know what I'm trying to do is not "the right way to do it", but the client I'm working for desperately wants THIS specific font.
So, I need to use on a client's website the exact font as VOGUE uses. So I took the .eot & .ttf and uploaded them on my server. Then I added the CSS definitions:
/*fonts fonts for IE*/
#font-face {
font-family: VogueDidot;
src: url('font/FBDidotL-Regular.eot') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "VogueDidot Light";
src: url('font/FBDidotL-Light.eot') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
/*fonts for other browsers*/
#font-face {
font-family: VogueDidot;
src: url('font/FBDidotL-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "VogueDidot Light";
src: url('font/FBDidotL-Light.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
And the CSS for my element is:
.post h1 {
display: block;
height: 100%;
font-family: VogueDidot;
font-size: 55px;
text-transform: uppercase;
overflow: hidden;
line-height: 58px;
}
And, normally, I expected to see everything working like a charm.
But it's not...
Here's how it should look like:
https://lh.rs/8M9Q7EvRBapv
And here's my version :
https://lh.rs/Lbini5YbQZlX
Any ideas?
It's important to note that using custom fonts are not pixel perfect on all browsers since all browsers tend to render the fonts differently. Another issue can be people not enabling ClearType within windows which I'm sure in this case its not but for other readers I decided to include this information.
It would seem that your font support is pretty limited since you are only using .ttf and .eot - for maximum compatibly and limiting render issues it's best to use 'ALL' 5 font types which are:
ttf (TrueType Font)
oft (Adobe/Microsoft Open Font Type, AKA OpenType)
eot (Embedded OpenType)
woff (Web Open Font Format)
svg (Scalable Vector Graphics)
Ideally you want to use SVG as much as you can since this provides the best quality, SVG is supported in modern versions of Andriod Browser, Firefix, Safari, Opera, Chrome but not in IE.
Personally I'd convert the fonts to all these file types and see if the outcome improves, browsers will automatically use their preferred font type. You can use Font 2 Web to convert to the other formats, its important to note that fonts are copyrighted and your client will require licensing, some fonts don't even allow web use.
I am using two commercial fonts FrenchScriptStd and FuturaStd-Light (I have bought them separately and then using them to create a webpage)
This is my first page using this kind of fonts which are commercial (I have tried googlefonts but they do not have these fonts)...
#font-face {
font-family: 'FrenchScriptStd';
font-style: normal;
font-weight: 400;
src: local('FrenchScriptStd'), url('css/FrenchScriptStd.ttf') format('ttf');
}
#font-face {
font-family: 'FuturaStd-Light';
font-style: normal;
font-weight: 400;
src: local('FuturaStd-Light'), url('css/FuturaStd-Light.ttf') format('ttf');
}
#fontface1{font-family : Font1; }
h1{font-family : Font1; }
#fontface2{font-family : Font2; }
#nav a {font-family : Font2;}
so the french font i want to be displayed when using h1 and futura font when using #nav a
/* Typography
=============================================================== */
h1 { color:#cc6602; font-size:36px; font-family:FrenchScriptStd, arial, serif; font-weight:normal; padding-bottom:14px; }
#nav a {font-family:FuturaStd-Light, arial, serif; text-decoration:none; color:#a8241b; font-size:20px; text-shadow:0 1px #fff; display: block; }
In my pc it seems to work, but in some computers it is not displaying correctly,
Is there a way to correct this, maybe i am messing something up...
I would look into Paul Irish's bulletproof #font-face syntax as the reason why you cannot see the font on 'some computers' is the fact that these computers may have different browsers installed than the browser you were originally testing on that need different font files, other than TrueType.
A syntax that I use and have a lot of success with is:
#font-face {
font-family: 'FrenchScriptStd';
src: url('css/FrenchScriptStd.eot');
src: url('css/FrenchScriptStd.eot?#iefix') format('embedded-opentype'),
url('css/FrenchScriptStd.woff') format('woff'),
url('css/FrenchScriptStd.ttf') format('truetype'),
url('css/FrenchScriptStd.svg#FrenchScriptStd') format('svg');
font-weight: normal;
font-style: normal;
}
I believe that this is the #font-face style FontSquirrel uses.
Note that in your example you have not converted the font to various web formats. Here are some services that you can use online to get all of the files converted:
FontSquirell
Free Font Converter
OTF to WOFF
Font Kit Generator
You should then host these font files locally as you may run into issues with MIME types and headers and the FireFox browser not downloading the font files if the files are hosted externally and not on the same domain for which they are being used.
Also, your milage will vary in mobile browsers and older versions of IE. :)
The fonts have to be installed on every computers on which your web page shall be displayed.
http://www.i3physics.com/blog/2010/07/dsfsdf/
Here is an example.
The part where it said "PHP" (the right top corner) remained as slim as it was.
here is part of the css code
.wp_syntax_lang {
background-color:#3c3c3c;
position:absolute;
right:0;
padding:1px 10px 3px;
color:#ddd; font-size:9px; font-weight:800;
text-transform:uppercase;
-moz-border-radius-bottomleft:5px;
-webkit-border-bottom-left-radius:5px;
border-radius-bottomleft:5px;
}
I tried bold, bolder, 700, 800, 900 and is not working under FF.
font-weight can fail to work if the font you are using does not have those weights in existence – you will often hit this when embedding custom fonts. In those cases the browser will likely round the number to the closest weight that it does have available.
For example, if I embed the following font...
#font-face {
font-family: "Nexa";
src: url("Nexa-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
}
Then I will not be able to use anything other than a weight of 400. All other weights will revert to 400.
If you want additional weights, you need to specify them in separate #font-face declarations with those additional weights, like this.
#font-face {
font-family: "Nexa";
src: url("Nexa-Light.ttf") format("truetype");
font-weight: 300;
font-style: normal;
}
#font-face {
font-family: "Nexa";
src: url("Nexa-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
}
#font-face {
font-family: "Nexa";
src: url("Nexa-Bold.ttf") format("truetype");
font-weight: 700;
font-style: normal;
}
Usually each weight will have a separate font file the browser will need to download, unless you're using variable width fonts.
Its because the font size (9px) is too small to display bold. Try 11px or more and it works fine.
Most browsers don't fully support the numerical values for font-weight. Here's a good article about the problem, and even tough it's a little old, it does seem to be correct.
If you need something bolder then you might want to try using a different font that's bolder than your existing one. Naturally, you could probably adjust the font size for a similar effect.
If you're importing a Google font, you need to ensure you've specified all the weights that you would like to use.
In my case, I was using Google's Roboto font. I had to import it with several different weights, like this:
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto+Slab|Roboto:300,400,500,700" rel="stylesheet" />
Remember that each additional weight increases the amount of data each visitor needs to download, and can slow down the loading of your page, so only use what's necessary.
i was also facing the same issue, I resolved it by after selecting the Google's font that i was using, then I clicked on (Family-Selected) minimized tab and then clicked on "CUSTOMIZE" button.
Then I selected the font weights that I want and then embedded the updated link in my html..
For me the bold work when I change the font style from font-family: 'Open Sans', sans-serif; to Arial
I removed the text-transform: uppercase; and then set it to bold/bolder, and this seemed to work.