I am working on a script that puts some text on a page. The text contains some unicode characters. I have custom font that has those characters, but I'd like to use my font only if the font used on a webpage does not have them. I can't controll main font of the page. I thought of something like this, but it does not work:
.someclass {
font-family: inherit, 'myFont';
}
What's the proper way of doing this?
I think this can help:
#font-face {
font-family: fontname;
src: url(address.ttf);
}
Related
I have a project where I need to use custom fonts. But I have no idea how to use this in my HTML. I have searched online how to do this, but all examples use a font that is contained in one file. My font is contained in multiple files.
How do I specify which specific font of the CircularStd I want to use on each element?
This is a screenshot of my index.scss file which contains the tailwind imports and the definition of my font:
An approach to this would be creating a custom font class in your tailwindconfig.js and extending it to your default tailwind theme. For example, if you're using Google Fonts and you want to use the font Manrope for a specific header, you can extend the fontFamily variant like so:
module.exports = {
theme: {
extend: {
fontFamily: {
'manrope': 'Manrope',
}
}
}
}
Now, to use this custom class declare it in your html by following the syntax font-{fontFamily}. So in this case, we're going to use font-manrope.
<h4 class="font-manrope">I'm a header using the font Manrope</h4>
If you think that your font has many files and you need them all then why not create a #fontface for each one although this is not the best practice, you are supposed to for example to choose the file with the light and standard font and you create the #fontface based on it and include it's file the others like the bold and italics can eventually be done using CSS but the most important thing is that you have your font implemented.
so for example you will add your font:
#font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
and if you want it to be bold and italic use
p{
font-weight:600;
font-style: italic;
}
I hope that would help!
Currently, in my standard stylesheet I have:
#font-face {
font-family: myFancyFont;
src: url('myFancyFont.otf');
}
And I use that in other css declarations like:
.someClass {
font-size: 18px;
font-family: myFancyFont;
}
That all works well and good until someone goes to print the page at which point anything using myFancyFont prints out in a rather ugly font.
On screen version
Printed version
Notice the font looks double lined and blurry. My print.css file does change the background color from blue to grey.
Is it possible for me to redefine myFancyFont in my print.css file to a standard web safe font (like Verdana) so printing looks more normal?
I'm assuming that there could still be a problem if I simply do:
#font-face {
font-family: myFancyFont;
src: url('verdana.otf'); /*or a real version of the verdana font file*/
}
Is it possible for me to redefine myFancyFont in my print.css file to a standard web safe font (like Verdana) so printing looks more normal?
Yes, in your print stylesheet you can redefine your custom font family to use the preinstalled Verdana like so:
#font-face {
font-family: myFancyFont;
src: local('Verdana');
}
All references to myFancyFont in your standard stylesheet, provided they haven't been restricted to #media screen, will automatically use Verdana in print.
You do need to make sure that your print stylesheet is linked after your standard stylesheet in your HTML so that this #font-face rule will override your standard one.
Note that "web safe" doesn't necessarily mean "legible in paged media", although generally most web safe fonts do print pretty legibly.
I would simply use an #media print media query with Verdana as the standard font, like this:
#media print {
* {
font-familiy: Verdana, sans-serif;
}
}
Plus, if you have other, more specific CSS rules where you define your FancyFont, you'd have to include these too in this media query (changed to Verdana), or use !important in the above rule.
I've came across a problem with custom font i use for my website.
So i use following CSS for text.
font-family: "Open Sans",Helvetica,Arial;
font-weight:600;
As website is built in my native language, i have to use UTF-8 symbols, that doesn't seems to be included in Open Sans, so they are being shown in Helvetica instead, but the problem is that they have more weight.
Is there any possible solutions to set font-weight parameter to normal, if fallback font is being used?
You could define a new #font-face for each font you want.
#font-face {
font-family: 'mainFont';
src: url(/*Link to Open Sans*/);
font-weight: 600;
}
#font-face {
font-family: 'secondaryFont';
src: local('Helvetica');
font-weight: 400;
}
#font-face {
font-family: 'tertiaryFont';
src: local('Arial');
font-weight: 600;
}
Then you'll end up with font-family: 'mainFont', 'secondaryFont', 'tertiaryFont'; which should get the desired results.
Unfortunately, there is no way to define fallback font specific styling using CSS alone.
As such you may want to attempt to work out the font being used, then apply a style as a result, see here for one method which works out the width resulting from applying a font to an element before 'best guessing' which it is.
That said, it is essentially a hack/workaround.
Otherwise, you could look into implementing a method to identify where the symbols are and then wrap them in styles span tags, again this would be a fairly dirty hack as opposed to a clean solution.
I believe MichaelM's solution won't work. What you can do is specify the font files using the "postcript name" that you can find in various font info sites online.
font-family: "Open Sans",Helvetica-Light;
unfortunately specifying font-weight: 600 might result in undefined behavior. some browser might try to make it bolder, some might just leave it be.,
Here is a sample CSS
h1 {
font-family: 'header-font', arial, sans-serif;
}
p {
font-family: 'paragraph-font', arial, serif;
}
Is it possible to load any remote Google Font (let say 'Lato') so that it's family name in CSS would be 'header-font'?
Edit: The idea behind this is to be able to easily swap fonts in a WP theme. Unfortunately using variables in CSS preprocessors is not an option in my case.
I don't think you can to be honest. The Google font has a predefined name when you view the google font. See this for example: http://fonts.googleapis.com/css?family=Akronim
Its name is set as 'Akronim' and I dont think you can reference it by any other name.
Yes, very easily. Once you located the font at Google, eg.
#import url('https://fonts.googleapis.com/css?family=Lato:400&subset=latin-ext');
just direct your browser to the url specified:
https://fonts.googleapis.com/css?family=Lato:400&subset=latin-ext
What you get back is the #font-face CSS item for the font (or fonts). Simply use this verbose version in your CSS instead of the original #import specification. You can freely rename the font-family item in any of these descriptions. Yes, you have to make sure there are no clashes with other fonts but the naming is completely up to you.
Yes, you can give any name you want when you define the font family in the #font-face style declaration and use that name to reference it later in the stylesheet.
#font-face
{
font-family: whateverYouWant;
src: url('example.ttf'),
url('example.eot');
... /* and so on */
}
Whatever you name the style as in the font-family property is how it will be referred to from the rest of the document. However I don't know how it competes with local font files (so if you tried to name a custom font Arial I'm not sure what you would get - the custom font or the real Arial). I don't know why you would do that anyway though.
We are creating a site that uses both Japanese and English. We want to get away from the default Japanese fonts which can't use ClearType. Is there a way to tell the browser to use a different Japanese font JUST for Japanese characters (Like Meiryo) and another font just for latin characters (Like Helvetica) on the same page? We don't want any English words to use the Meiryo font.
We actually used a tip to specify English fonts first in the CSS from this article: http://www.lukew.com/ff/entry.asp?118
However, this doesn't work in IE. Even if we specify Helvetica, Verdana, or any other widely available font first and then the Japanese font in the CSS, IE will still use the Japanese font for English words. Firefox, Chrome, etc. work as expected.
(If possible we hope not to resort to something like wrapping each English word in a span)
I've solved my problem using 'unicode-range' CSS property.
You can find the details here:
https://developer.mozilla.org/en/docs/Web/CSS/#font-face/unicode-range
Example:
/* bengali */
#font-face {
font-family: 'Atma';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/atma/v2/tUcVDHNCVY7oFp6g2zLOiQ.woff2) format('woff2');
unicode-range: u+0980-09FF;
}
body {
font-family: 'Atma', arial, sans-serif;
font-size: 18px;
}
<p>Example is better than precept.</p>
<p>উপদেশের চেয়ে দৃষ্টান্ত ভালো।</p>
You cannot get around marking every language section with a class and font if you want this to work cross-browser. It cannot be done with only CSS.
You can apply a language class manually or automatically. Manually might be a lot of work to support and maintain, but is robust. Dynamically it can be done using a back-end script or Javascript, by scanning a string for characters that fall within certain unicode character blocks, and applying a language class accordingly.
You can find the block definitions here (Japanese is Hiragana and Katakana): http://www.fileformat.info/info/unicode/block/index.htm
I'd recommend the back-end way of doing this, because changing a font on the page might cause flickering or shifting of elements during page load.
Create css class for English and Japanese text.
.ja { font-family: meiryo, sans-serif; }
.en { font-family: arial, verdana, sans-serif; }
If entire page is in Japanese, add class="ja" to body tag, if there's mixed content, add class="ja" to the html element that contains Japanese text, for example:
<td class="ja">日本語</td>
How are you telling the page what language to print to screen?
If you are getting a variable can you not use this variable as a class which you use for a div of body.
<body class="english">
or
<body class="japanese">