I have a Sitecore page with multiple languages. Is there a way to have different font-families for different languages? The language information is set in cookie.
Instead of using the cookie it is simpler to set the language in the HTML and use that in you CSS.
Example in Sitecore set in your Layout something like:
<html lang="#Sitecore.Context.Language.CultureInfo.TwoLetterISOLanguageName">
In CSS you can no use something like:
p:lang(en) {
font-family: "Times New Roman", Times, serif;
}
p:lang(ja) {
font-family: Arial, Helvetica, sans-serif;
}
Related
I have my set of variables defined in a file which i important in my my main.scss that looks like the below
$font-primary: Arial, Helvetica, sans-serif;
Is it possible to use lang to change to override $font-primary depending on the language in the html of the page?
I've tried to use
:lang(ja){
$font-primary: Helvetica, sans-serif;
}
and that hasn't seemed to work.
I'm trying to get something like this to work:
body {
font-family: Verdana, Arial, sans-serif;
}
p {
font-family: Helvetica, inherit;
}
Basically if "Helvetica" is not available on the client's browser, I want the font-family to be inherited from a parent. But it seems to me that I can't use "inherit" in a font priority list.
How can I achieve something like this without having to copy paste font-family from body?
You are correct. You can use it just like you did. This is something that became available with CSS2. This question is similar and has some answers worthy of a read.
I think the real problem is that Helvetica isn't a free font. So, it just isn't available for widespread use.
Option 1) If you own the Helvetica font, make an image using that font
(for the few lines that you want that specific look for).
Option 2) (as #bjupreti suggested) is to use a substitute font that is widely
available.
Font family will automatically be inherited from the parent property. So, all you have to do is:
body {
font-family: Verdana, Arial, sans-serif;
}
p {
font-family: Helvetica;
}
This will automatically inherit the font family of body if there is no Helvetica in end users computer.
I am a beginner coder and i have a small problem.I set the font types of my paragraph and heading in my HTML document to Arial using CSS. the code is as follows
h4{
font-family
arial san-serif;
}
The problem is that when I run the code the font doesn't change.
firstly I would like to know why this is. Could it possibly mean that I don't have the font on my computer. If so how do I correct this. Any help would be much appreciated.
P.S. It might be worth it to know that I am running notepad ++
font-family:
you forgot ":"
h4{
font-family: arial, san-serif;
}
You need to add a colon : and a comma ,.
h4{
font-family: arial, san-serif;
}
Also keep in mind that if you are using fonts with spaces, quote them.
h4 {
font-family: "Times New Roman", Georgia, Serif;
}
W3 Schools has a good explanation if you want to read more about it.
Is there any simple CSS rule for changing the whole body font-face type by detecting the browser type?
Open-sans doesn't work in IE so I'm searching for a way to change it depending on the browsers.
I tried looking at this question but still didn't understand how to accomplish this task.
You could use conditional comments in HTML, to detect the Internet Explorer lower than IE 11. http://de.wikipedia.org/wiki/Conditional_Comments
<!DOCTYPE html>
<!--[IF IE]><html class="lt-ie11" lang="de"><![endif]-->
<html lang="de">
After that, you can define two different CSS rules.
body { font-family: Open-Sans; }
html.lt-ie11 body { font-family: sans-serif; }
Another solution besides adding a conditional comment in your CSS would be to specify a fallback font family in your CSS.
Instead of doing:
body {
font-family: Open-Sans;
}
You could do:
body {
font-family: Open-Sans, Helvetica, Arial, sans-serif;
}
The browser will first try using Open Sans. If it can't find the font, it'll try using Helvetica, then Arial, then finally use the default sans-serif font if all else fails.
i want to know the most convenient and standardized Arabic font for web applications,,used as messages to alert the end user..
It is safe to use fonts like Arial, Tahoma, Times New Roman as all of these support Unicode and Arabic very well. I have myself been looking and did a research & finally decided to use any of the following fonts Arial, Tahoma, Times New Roman these are web safe fonts also. If your application is based on intranet then you can use a font of your choice if administrator is willing to install same font on all system, either you also have choice of using custom fonts by embedding. Example below is for IE
#font-face {
font-family: Goudy Stout;
font-style: normal;
font-weight: 700;
src: url(GOUDYST0.eot);
CSS3 font Embedding
#font-face
{
font-family: yourFontName ;
src: url( /location/of/font/FontFileName.ttf ) format("truetype");
}
/* Then use it like you would any other font */
.yourFontName { font-family: yourFontName , verdana, helvetica, sans-serif;
}
You can read details about Font Embedding in details on internet. I have quickly put this solution together for reference.