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; }
Related
I want to replace the default font family helvetica in my Chrome-Browser derivate, as it's rendered in an unreadable fashion.
My replacement font-family of choice would be "Helvetica Neue, for which I have licensed copies.
So, inside Chrome, I use the Stylus plugin, and inject the following CSS into every website:
#font-face
{
font-family: helvetica;
font-style: normal;
font-weight: normal;
src: local("Helvetica Neue");
}
However, using the Chrome developer tools, I can see that the Rendered Font property defaults back to Arial, for an element with style
element.style {
font-family: helvetica, arial, verdana, sans-serif;
}
Clearly, I am misunderstanding the local(...) argument. If, for example, I redefine
#font-face
{
font-family: helvetica;
font-style: normal;
font-weight: normal;
src: local("Impact");
}
then the changes apply (in a very ugly way). My question is thus:
What do I specify as the argument to local(...) in order to actually use my local fonts?
Additional information:
I'm on windows, my fonts are installed OS-wide to C:\Windows\Fonts.
If I drag one of the icons to a different place, I can see its filename is HelveticaNeue.ttf
The same file in the font view gets displayed as Helvetica Neue Standard
If I open the file in font preview, it displays the title Helvetica Neue (OpenType) and the font name Helvetica Neue (see attached screenshot)
I have a website for internal use that uses the Roboto google font. Here is the code that includes it.
<link href="//fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet" type="text/css">.
&
body {
font-family: "Roboto";
}
b, strong {
font-weight: 700;
}
I've found someone at my company who's Chrome can't render this font when it is bold. I could replicate it by going to Youtube and making Roboto text bold with the inspect element. This problem does not occur on any other computers. The Chrome is up to date and has no extensions installed. I've tried closing and reopening Chrome as well as several hard refreshes. Forcing the browser to repaint with resize, CSS, or JS does not fix the issue either.
This does not dupe question Font Weight with Google Fonts Roboto, normal (400) and bold (700) work, light (300) does not. The problem occurs on both http and https versions of the site, the font is loaded with //, and I get no insecure content warnings from Chrome.
What is causing this, and is there anything I can do on the website or on the persons computer to further troubleshoot or fix this?
If you use Google Fonts
<link href="//fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet" type="text/css">
without a fallback font like;
body {
font-family: "Roboto";
}
b, strong {
font-weight: 700;
}
You should provide that font-weight in your Google Fonts link like;
<link href="//fonts.googleapis.com/css?family=Roboto:500,700" rel="stylesheet" type="text/css">
Or, you should provide a fallback font;
body {
font-family: "Roboto", sans-serif;
}
By doing so, if your browser can't find the font-weight: 700; Roboto font, it can use a suitable sans-serif font from your system.
In ideal situations, using a font-family to support all possible computer systems like;
body {
font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
will solve all of these problems.
I'm developing my website with Umbraco, and I need it to be multilingual with both english and chinese. To make my website multilingual with Umbraco I basically have the website cloned and then changing the contents, but keeping all the html and css templates.
But for the chinese version I will need to use a different font type, how can I do this? Is it possible to specify which font to use in the CSS? Or any other solution?
Thank you very much!
Can't you add a class to the body based on the language? For example en for English and cn for Chinese? Then you can target body.en and body.cn and add different fonts based on those.
Example:
body.cn {
font-family: 'chinese font';
}
body.en {
font-family: 'english font';
}
body,
button,
input,
select,
textarea {
color: #2b2b2b;
font: 12px/1.5 "Hiragino Sans GB", Tahoma, Arial, Microsoft YaHei, "微软雅黑", "Helvetica Neue", sans-serif;
*font-family: "Hiragino Sans GB", Microsoft YaHei, "微软雅黑", Tahoma, Arial, "Helvetica Neue", sans-serif;
}
Put your english font-family before chinese, so chinese computer only recongnize the chinese font-family and ignore the english font-family.
I am a web developer form China, Chinese font-family is very little:
1. 微软雅黑(microsoft yahei)
2. 宋体(simsun)
3. 黑体
Use the Culture to add the "lang"-attribute to the HTML-tag, then in the CSS, select it by using html[lang="CULTURE"]. So for English, you use e.g. "en-GB", producing the following:
Razor (layout page):
<html lang="#Culture">
</html>
CSS:
html[lang="en-GB"] { font-family: 'WhatEverFont', sans-serif; }
Or, you can achieve this by adding the Culture as a class to your body, e.g.:
Razor (layout page):
<html lang="#Culture">
<body class="#Culture.ToLower()">
</body>
</html>
CSS:
body.en-gb { font-family: 'WhatEverFont', sans-serif }
I have been googlying around now about this matter and I find few ways to do it. But what is the best way to do it.
I have website that has +10 different languages. Some languages need own font (chinese, japanese for example). Normal english and most western versions will use Google's Open Sans. But what about japanese etc. How should I do font-family declaration?
Like this putting all fonts in same declaration?
body {
font-family: 'Open Sans', Arial, Helvetica, 'Microsoft Yahei', '微软雅黑', STXihei, '华文细黑', 'MS PGothic', sans-serif;
}
'Microsoft Yahei', '微软雅黑', STXihei, '华文细黑' are MS Gothic is japanese windows font.
Or separate them?
Of course this would mean lot of more css than just body (h1, h2, p...)
body {
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}
body.chines {
font-family: 'Open Sans', 'Microsoft Yahei', '微软雅黑', STXihei, '华文细黑', sans-serif;
}
body.japanese {
font-family: 'Open Sans', 'MS PGothic', sans-serif;
}
I'm using Compass/sass btw
Best way to deal different languages is to have different css file for different language, which reduces page load time and resources.
Secondly, the asterisk implies all elements.
* {
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}
There is something called unicode-range you could use.
It is used to display a certain font for a range of specific characters.
This might help you to find the range of characters you want to include.
Ideally you have to setup all the fonts you need once.
And through unicode-range the browser uses the font that contains that character, and nothing is unnecessarily downloaded.
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.