How to write a CSS font style for the following font:
font-family: Comic Sans MS CSS rule doesn't work.
The font may exist with different names, and not at all on some systems, so you need to use different variations and fallback to get the closest possible look on all systems:
font-family: "Comic Sans MS", "Comic Sans", cursive;
Be careful what you use this font for, though. Many consider it as ugly and overused, so it should not be use for something that should look professional.
The httpd dæmon on OpenBSD uses the following stylesheet for all of its error messages, which presumably covers all the Comic Sans variations on non-Windows systems:
http://openbsd.su/src/usr.sbin/httpd/server_http.c#server_abort_http
810 style = "body { background-color: white; color: black; font-family: "
811 "'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', sans-serif; }\n"
812 "hr { border: 0; border-bottom: 1px dashed; }\n";
E.g., try this:
font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', sans-serif;
You need to use quote marks.
font-family: "Comic Sans MS", cursive, sans-serif;
Although you really really shouldn't use comic sans. The font has massive stigma attached to it's use; it's not seen as professional at all.
Use quotes to surround the font:
font-family: "Comic Sans MS";
That should solve the problem.
Related
The font changes in mac and iOS platforms. How to ensure the same font appears. My index.css file :
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
The first font you specified is preferred and since it is an alias it might be different among different Apple devices. If you want it to resolve to the same font everywhere, specify one, for example "Roboto". It is recommendable to use Googles WebFontLoader to download Robot in order to avoid ugly reflows when the font is not instantly available.
You can get the fonts from local repository and use font-face to insure that your fonts now are read from the same repository not from the device.
Download the fonts you intend to use and put them in public/Fonts directory, then in your root css add those fonts
e.g:
#font-face {
font-family: 'Segoe UI';
font-style: normal;
font-weight: normal;
src: local('Segoe UI'), url('SEGOE-UI.woff') format('woff');
}
{.....}
or/and whatever other fonts you're using
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.
I have the following CSS declaration:
body {font-family: Verdana, Tahoma, "Trebuchet MS", "DejuVu Sans", "Bitstream Vera Sans", sans-serif;
It isn't loading on the page. I'm having to add:
<style>
body {font-family: Verdana, Tahoma, "Trebuchet MS", "DejuVu Sans", "Bitstream Vera Sans", sans-serif;}
</style>
To the HTML to get it to work...This is true in chrome and safari...this one is weird, thoughts?
Note that all other CSS is working correctly...
So, !important worked, I'm not sure why. One note, I took out the extra families, it looks like this now:
body, body * {
font-family: Verdana, Tahoma, sans-serif !important;
}
But changing that had nothing to do with fixing it. The !important fixed it. Even though there isn't anything else changing the font-family at any other point in the CSS (refer to the working JS Fiddle). I attached a screenshot of the developer tools to show the inheritance.
have you tried to select following?
body, body * {
font-family: Verdana, Tahoma, "Trebuchet MS", "DejuVu Sans", "Bitstream Vera Sans", sans-serif;
} /* this affects every element in the body and the body itself */
/* OR just */
* {
font-family: Verdana, Tahoma, "Trebuchet MS", "DejuVu Sans", "Bitstream Vera Sans", sans-serif;
} /* this affects every element */
here is what you can do with CSS3:
http://www.css3.info/preview/web-fonts-with-font-face/
some font-families have to be enabled using `font-face, usually u do something like this
#font-face {
font-family: 'alex_brushregular';
src: url('alexbrush-regular-otf-webfont.eot');
src: url('alexbrush-regular-otf-webfont.eot?#iefix') format('embedded-opentype'),
url('alexbrush-regular-otf-webfont.woff') format('woff'),
url('alexbrush-regular-otf-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'alex_brushregular', Arial, "sans-serif";
}
This is an old post, but in case people have the same kind of problems and ended up here, I would suggest you make sure no errors in your css file (the easiest way to check is to comment out all settings except the font family or replace the css file with one that has just the font family setting). I just had the same problem and found the cause, after hours of frustration and no solutions from googling (that's why I came to this post; adding important! didn't work for me), was an error in my css file, so the browser skipped some settings including the font family. Although there're no errors in the css text shown in the original post, there might be one in the real css file.
Just try with the following example :
#font-face{font-family:'Arvo';src:url('fonts/Arvo-Regular.ttf')}
#font-face{font-family:'Erasmd';src:url('fonts/ERASMD.TTF')}
body { font-family: Arvo; }
(or)
body { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif !important; }
I think this may help you to resolve your problem.
Something like this can also happen if your browser is using a cached version of your CSS file.
A "hard refresh" using CTRL+F5 might help in that case, as suggested e.g. here and here, and e.g. in the Firefox docs.
In my experience I had issues because there was only text within buttons on the page I was testing.
Setting the button font-family to inherit fixed the issue. I'm guessing this might extend to other elements also.
body {
font-family: <your family>;
}
button {
font-family:inherit;
}
It May be due the font you are using is not installed in your browser(even some 'websafe' fonts).Try using generic-font(like sans-serif,cursive,monospace) to see if the you style decalartion is working..
I know that Alt is used for images in HTML, but is there a way to apply it to text via CSS?
Example:
input { color: #62161e; font-size: 25px; font-family: Lintel; }
So say Lintel does not display properly in some browsers. Is there an alt option to display Helvetica or something?
In CSS, you can specify a list of font families to follow and the browser will use the first one that it supports. So if you want to display Helvetica if Lintel is unavailable, you would simply do this:
font-family: Lintel, Helvetica;
Remember that if the font family has a space in it, you need to surround it in double quotes, like with the line I use for my website:
font-family: "Segoe UI", Arial, Helvetica, sans-serif;
You can provide multiple fonts and the browser will pick the first available font.
Yes, you can chain fonts.
font-family: Lintel, Helvetica, Arial, sans-serif;
If you are defining both font-size and font-family I suggest you use the shorthand version:
font: 25px Lintel, Helvetica, Arial, sans-serif;
You can add more to this as well:
font: (weight) (size)/(line-height) (family);
The only two that are required are size and family.
font: bold 30px/25px Lintel, Helvetica, Arial, sans-serif;
I have my fonts set in my style.css:
font-family: "Arial, Verdana, sans-serif";
But my website still seems to use sans serif. What is the problem here?
The commas in your CSS font-family specification need to be outside the quotes.
For example:
font-family: "Arial", "Verdana", sans-serif; /* And you should really
omit the quotes if it's only one word */
Not
font-family: "Arial, Verdana, sans-serif";
Otherwise, the CSS parser thinks you're looking for a font called "Arial, Verdana, sans-serif", which clearly doesn't exist.
Try removing your "" from the font-family definition:
font-family: tahoma, sans-serif;
Like that. Only put the " around when you have multiple words such as
font-family: "mutiple word font name",tahoma, sans-serif;