My site uses some fonts with the #font-face CSS tag.
However I'm trying to add some temporary CSS styling to my site for a holiday or season...
I'd like to change an accent font to a different font. I was wondering if it was possible to leave the original CSS and just let my seasons.css file override it. Can browsers resolve #font-face conflicts?
My original CSS would be like:
#font-face {
Font-family: 'accentfont2';
Src: url(example/font.ttf);
}
And then my seasonal CSS which will be positioned below the standard CSS will be like:
#font-face {
Font-family: 'accentfont2';
src: url(example/seasonalfont.ttf);
}
Would the browser resolve the conflict by using the seasonalfont.ttf rather than the font.ttf?
Just use !important at the end of your seasonal styles, this will override the normal ones.
so.......
#font-face {
Font-family: 'accentfont2';
src: url(example/seasonalfont.ttf) !important;
}
You would want to comment out the seasonal ones when you didn't want them though by putting /* at the start of the seasonal code and / at the end, this will make them so they are ignored until you uncomment them by removing the / and the */ .
One alternative would just be to comment out the normal font css and uncomment the seasonal one when you want to use it.
Option 3 would just be to replace the font file with the other one each season, this way you wouldn't need to dive into the css at all, just change it via ftp.
They can... all I had to do was type the normal CSS and it worked. This question was looking for a recommendation/condemnation but whatever
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; }
I want to use a different font for my website, which is not a regular webfont. I have created EOT files already. Now how can I integrate those fonts with twitter bootstrap ? Can anyone help ?
Thanks
The easiest way I've seen is to use Google Fonts.
Go to Google Fonts and choose a font, then Google will give you a link to put in your HTML.
Then add this to your custom.css:
h1, h2, h3, h4, h5, h6 {
font-family: 'Your Font' !important;
}
p, div {
font-family: 'Your Font' !important;
}
or
body {
font-family: 'Your Font' !important;
}
You can find a customizer on the official website, which allows you to set some LESS variables, as #font-family-base. Link your custom fonts in your layout, and use your custom generated bootstrap style.
Link here
For an example with the #font-face rule, using WOFF format (which is pretty good for browser compatibility), add this CSS in your app.css file and include your custom boostrap.css file.
#font-face {
font-family: 'Proxima Nova';
font-style: normal;
font-weight: 400;
src: url(link-to-proxima-nova-font.woff) format('woff');
}
Please note Proxima Nova is under a license.
Hi you can create a customized build on bootstrap, just change the font name in the following pages
Bootstrap 2.3.2
http://getbootstrap.com/2.3.2/customize.html#variables
Bootstrap 3
http://getbootstrap.com/customize/#less-variables
After that, make sure to use proper #font-face in a css file and link that to your page. Or you could use font kit generators.
you can customize twitter bootstrap css file, open the bootstrap.css file on a text editor, and change the font-family with your font name and SAVE it.
OR got to http://getbootstrap.com/customize/ and make a customized twitter bootstrap
First of all you have to include your font in your website (or your CSS, to be more specific) using an appropriate #font-face rule.
From here on there are multiple ways to proceed. One thing I would not do is to edit the bootstrap.css directly - since once you get a newer version your changes will be lost. You do however have the possibility to customize your bootstrap files (there's a customize page on their website). Just enter the name of your font with all the fallback names into the corresponding typography textbox. Of course you will have to do this whenever you get a new or updated version of your bootstrap files.
Another chance you have is to overwrite the bootstrap rules within a different stylesheet. If you do this you just have to use selectors that are as specific as (or more specific than) the bootstrap selectors.
Side note: If you care about browser support a single EOT version of your font might not be sufficient. See http://caniuse.com/eot for a support table.
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.
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.