I am using an own custom font which I embed like this:
#font-face{font-family:myFont;src:url(css/fonts/myFont.woff);}
#font-face{font-family:myBoldFont;src:url(css/fonts/myBoldFont.woff);}
So, when ever I want to use bold font, I do:
<style>
.bold{
font-family:"myBoldFont";
}
</style>
<div class="bold">Hello world</div>
Also, I need to overwrite all css definitions that use bold typography by default:
<style>
strong,h1,h2,h3,h4,h5,h6,h7,h8{
font-family:"myBoldFont";
font-weight:normal;
}
</style>
As you can see, I must set font-weight:normal because if I'd set font-weight:bold the browser would not find the right font and do a fallback because there is no definition for "bold" in this .woff file.
So, this works quite well for browsers that do support #font-face and .woff files. For browsers that do not, like e.g. older iOS devices, I need to set a fall-back like this:
font-family:"myBoldFont",helvetica,arial,sans-serif;
So, the fallback to helvetica works, but the text is not bold, because font-weight:normal is set.
Now, here is the problem:
If I set font-weight:bold then browsers that can handle woff files
will fall back to a default font instead of using the one I defined
via the woff file.
If I set font-weight:normal then older browsers that cannot handle
woff files won't be able to print text bold.
What should I do?
Have you tried the following : How to add multiple font files for the same font? ?
The #font-face property allows you to specify for which styles to apply the font.
Related
I am trying to add some custom font in my site but unable to do. I am not sure if I am using a right or wrong path. Kindly help.
#font-face {
font-family: XfinityStandard
src: url('landingpage/fonts/XfinityStandard-Light.woff2') format("woff2");
where landingpage is folder name.
There are two main ways to check:
Is the font actually working (i.e. can you see it rendering properly), and
Inspect your page (e.g. in Chrome, right-click the text you expect the font to render on, and select Inspect from the drop-down menu. In your Styles tab, at the right-hand bottom of the page, there should be a section called Rendered Fonts. If you have implemented your font correctly, it should show here (in addition to the css hierarchy applied, where your font should be listed).
If your font is not showing here, make sure you follow the following:
The #font-face rule should be added to your css before any styles
Use your rule in your css by specifying the font as XfinityStandard and provide a fall-back like sans-serif, e.g. body { font-family: 'XfinityStandard', sans-serif; }
Make sure you have wide support, so when you specify your font, add an additional source for format('woff')
As Devansh J mentioned, make sure your font is relative to the css file
If you are still having issues, maybe consider a hosted font like Google Fonts, as follows: #import url(///fonts.googleapis.com/css?family=Montserrat which you can use as body { font-family: 'Montserrat', sans-serif; }
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.
I am having problem defining CSS rules for browsers that do not support font-stretch property (webkit, etc)...
THE PROBLEM:
I am using Helvetica Neue font (CSS setup from Twitter Bootstrap) and I use font-stretch:condensed; property on some of my CSS rules. Unfortunately I have soon figured out that this property is not supported in Webkit and some other browser, and I began searching for a fallback rule.
One solution found here for webkit browser is to use post script font name font-family: "HelveticaNeue-CondensedBold","Helvetica Neue",Helvetica,Arial,sans-serif;. But it is really only Mac solution. Windows browsers will not have this font and will fallback to non stretched font.
So the only real solution for using condensed font is to import a font from a site like myfonts.com, google webfonts etc... Since I am looking for a FREE solution I found some FREE fonts that come close to Helvetica Neue Bold Condensed. I am now wondering is there a way to specify a CSS rule only target the browsers that do not support font-stretch property?
The only way I can think of, is javascript feature detection:
if (document.createElement("detect").style.fontStretch === "") {
document.getElementsByTagName("html")[0].className += " fontstretch";
}
add this in your <head> tag.
this will add a fontstretch class to your html tag so you could:
set the #font-face rule as a standard - it will be the fallback for browsers that do not support font-stretch
use .fontstretch as a css hook to set the font-family back to Helvetica Neue and apply font-stretch as well.
I came accross a meaningful solution when I was searching for something else that allows you to specify the browser specific css using .ie9 .yourclass .chrome .yourclass etc in your css file. It uses a small javascript file that can be loaded in the _layout file or masterpage file..
That link is Here
The idea in the following is the first #font-face is for Firefox, the second for IE, and Arial for anything else that can't make sense of the first two. Its all working except for I want to give a different size in the case of Arial, and haven't figured out the syntax to do that.
#font-face {
font-family: Tribeca;
src: url("Tribeca.ttf"); format("truetype");
}
#font-face {
font-family: TribecaIE;
src: url("Tribec0.eot");
}
BODY
{
FONT-FAMILY: Tribeca, TribecaIE, Arial; font-size: 195%;
}
I don't believe this is possible with css alone; we will probably need to use javascript.
All we want to do is specify a different font-size if Arial is the active font. Detecting the active font is not exactly straightforward, but here is one method that will work for our particular purpose. We can create a temporary element containing some Arial characters and measure its width, and then create a second element containing characters without specifying a font (so that it defaults to the "active" font) and compare widths. This won't tell us which font is currently active, but can indicate whether or not one of the embedded fonts was loaded with #font-face as they certainly won't have the same width as Arial. If the two elements' widths aren't equal we know that Arial could not have loaded, and so we will only adjust the font-size if the widths are equal.
Even if the browser is unable to load the Arial font, our test is still functional, because when we specify Arial during the test, the browser will default to the same font as it would for the second element. Both elements will still have equal width if the browser is unable to load the embedded fonts with #font-face.
If anyone would like me to further illustrate with code, I'll be happy to write the javascript.
This is not supported by normal CSS rules..
I believe your options are
the font-size-adjust property of css 3
javascript (jQuery), and check for current font to see which one of the three is effective and adjust the font-size accordingly.. http://www.w3.org/TR/css3-fonts/#font-size-adjust ( you should also have a look at the http://www.modernizr.com/ )
I believe it is this (close to what you have):
#font-face {
font-family: Tribeca;
src: url("Tribeca.ttf");
}
#font-face {
font-family: Tribeca;
src: url("Tribeca.eot");
}
body {
font-family: Tribeca, Arial;
}
IE won't know how to open the ttf, so it won't bother. Then it will open the eot. Then, you just specify the font by the given name in the body declaration.
Target your browsers by knowing which one reads which type of declaration.
Conditional Comment load different CSS calls.
Then you can specifically tell each one to do something different per rule.
Also there is typekit
#font-face {
font-family: 'Tribeca';
src: url(Tribeca.eot);
src: local('Tribeca'), url(Tribeca.ttf) format('truetype');
}
MSIE will ignore the last line cos it doesn't understand format rule. and yes as pointed by porneL above, format() should go in the src property.
local() will make supporting browsers use local font file if user has it instead of downloading from your server (and probably make IE ignore the line too).
as for the font-size adjustment, as pointed by Gaby: CSS 3 font-size-adjust. but it looks like it's not widely supported, yet.
To void code duplication with #font-face, you can do this via server side. If you use for example some urlrewrite, detect UA, if it's IE - return file with .eot extension, if it's normal browser - ttf.
As for me, it works great.
And for this case, you shouldn't change your css files, just should have 2 files: .ttf & .oet.
Although it's against normal good-practices when using CSS, you could use the !important declaration in your conditional CSS.
As an example, we create two stylesheets: the 'default' one, which will have a section for Firefox-specific styles and an Internet Explorer stylesheet.
Then, using the standard <link rel="" /> method of importing stylesheets:
<link rel="stylesheet" href="normal/css/file.css" type="text/css" media="screen, projection">
<!--[if IE]><link rel="stylesheet" href="http://mysite.com/path/to/ie6.css" type="text/css" media="screen, projection"><![endif]-->
Within the 'default' stylesheet, our Firefox styles are wrapped in the following:
#-moz-document url-prefix() {
#my-id { font-size: 100%; }
}
This works because the #-moz-document url-prefix() section is how Firefox addons style webpages. So, other browsers don't understand it and therefore just skip it.
BODY
{
FONT: 140% Arial;
FONT: 195% Tribeca,TribecaIE;
}
I'd like to build a common typography stylesheet with a very small number of selectors. As such, I'd far prefer to use #media sections for the various versions rather than create different files, each with only a few lines of content.
I'd also like to add some #font-face declarations, but I'd prefer not to force mobile users to download the fonts given their limited bandwidth.
Can I put the #font-face declaration within the #media block or do they have to both be top-level? If the latter, how can I tell the mobile browsers they don't need to bother downloading the font?
The CSS2 spec suggests something like this.
Put your #font-face declarations in a separate CSS file, such as fancyfonts.css.
Load fancyfonts.css in your main CSS file, but with a media-target declaration:
#import url("fancyfonts.css") screen;
Specify your fancy font in the font-family attribute.
body {
font-family: 'My Fancy Font', serif;
}
Media which don't load the fancyfonts.css will fall back to the other fonts you specify -- in this example, serif.
Can I put the #font-face declaration within the #media block or do they have to both be top-level?
This seems unspecified by the current Working Draft of the CSS3 Fonts module. However, the CSS Validator rejects font-face-inside-media, so it's probably best avoided.