I am using jQuery developed about lightboxes, and it is amazing.
However, I saw that the font of the captions and it don't fit to my website style...
I wanted to know if someone had an idea about how to change the webfont of this captions...
Font is changed by targeting the parent div and child element class or attribute and then specifying the font family.
e.g
<div class="light-box-sample">
<p> this could be a text</p>
</div>
Your CSS should look like
.light-box-sample p {
font-family: 'open sans' sans-serif;
}
Note : targeting .light-box-sample wont do the magic, the child element should be targeted also.
if there was no child element then the parent div could be targeted.
in the above CSS the first font indicates the universal font, and the double quote is used when the font has a space between its name literally like your first font choice , second font indicates a backup font that's located on all PC.
Generally you need to first download your font, and install locally on your PC to see the effect on your development environment and when you are done changing what you want to , you could add the CDN link of the font to the head section or whatever way to your design, so users who doesn't have that font installed on there computer could also see the font manifest.
hope this was helpful :-)
Enter code into lightbox.min.css to change caption font attributes:
.lb-caption {
font-size: 24px !important;
color: #727fee !important;
font-family: helvetica !important;
}
.lb-number {
color: red !important;
}
(.lb-number will change page number attributes)
Related
I would like to have a font smaller than an Arial 9px text.
I've tried to find other font name but I did not succeed to get a very small text. Is there a way to achieve this easily using css ?
EDIT :
I can't go under 9px using Arial
I have tried font-size, small, transform, scale, other fonts... everything as I am an experienced web developper.
Set font-size to whatever you want - although you may find that any font less than 9px may be too small to read well. You could also do it with em's or rem's or percentages.
But you can set the font size as follows (for an example p element that you want to be 6px in size).
p {font-size: 6px}
So note that you are not importing the smallest possible font - you are sizing the html elements to be a small font-size with CSS). Using this principle- you set the fontsize for all the elements you want to use it - eg: p, span, a, li, h etc.
But again - I must caution against this for accessibility purposes.
p {
font-family: Arial;
font-size: 6px;
}
<p>This is a test with Arial font at 6px and is NOT recommended</p>
You can try it
div p {
font-family: 'Arial';
-webkit-text-size-adjust: none;
font-size: 5px
}
<div>
<p>lorem</p>
</div>
You may also REPEAT the small tag multiple times to make it as small as you like. Interestingly, I have not seen this mentioned anywhere!
<h2>My Headline <small><small><small>(Subject)</small></small></small></h2>
Most (all?) browsers have a minimum font size, to avoid underhanded people displaying unreadable text for some reason. Some browsers let you adjust this, but you simply can't count on being able to display smaller than 9pt on anyone else's machine.
Unless you opt for very old school: create your text as a graphic.
Or: Create your own custom, tiny font - as long as it has all the features of (say) a 12pt font, it will display fine, but if the glyphs are only two dots high, that is what you will see.
If adding css styles don't work then maybe it has something to do with your browser auto adjustment of the font size.
Try this to stop auto adjustment of font size:
* {
-webkit-text-size-adjust: none; //For chrome browser
}
Few thing you must consider
1. make sure the .css file is the last one you load in your html (after Bootstrap for example).
2. use the !important attribute to your css property (font-size: 4px !important;)
3. if these 2 suggestions do not work, try adding an inline-css to your element <p style="font-size: 4px">I'm a 4 px paragraph</p>
You can use HTML <small> tag.
https://www.w3schools.com/tags/tag_small.asp
I am using a downloaded font file for use on my website, however it is causing some issues in regards to layout / display.
Most fonts I have used display like this
The font I am currently using displays like this:
The difference is that the 1st font has space above (which is part of the actual text and not my css styling) while the second one has no space at all.
I can solve this issue by simply adding some extra padding to the containing element's top but this is not practical in the future event that I decide to replace the font (meaning I would have to go into every parent and remove the padding-top)
Is there any CSS styling methods I can use to add padding to my font so that it will always have a bit of space up top?
My Code:
CSS:
#font-face {
font-family: "Anakin Mono";
src: url("../fonts/opipik_anakinmono/anakinmono.ttf");
}
#demo {
font-family: "Anakin Mono";
padding: 14px 10px 10px 10px; /* Have to add extra padding to top becuase of font in use */
border: 1px solid black; /* A border helps illuminate whats happening with text alignment - vertically;
}
HTML:
<p id="demo">Some text on my website</p>
Is there any CSS styling methods I can use to add padding to my font so that it will always have a bit of space up top?
Unfortunately the answer to this question as you've outlined it is no, there are no CSS methods to target only a single font.
That said, you can simply assign your mono-spaced font by using a class and easily change the style globally as shown here:
#import url('https://fonts.googleapis.com/css?family=Inconsolata');
.monospace {
font-family: 'Inconsolata', monospace;
padding-top: 4px;
}
<div class="monospace">This element is monospaced font</div>
Any elements which you'd like to use your mono spaced font should be assigned the class monospace. In the future, you can simply change the font-family rule and alter the padding and voila, you've accomplished your change with very little effort.
I realize you've made it clear in the comments that you'd rather take a different approach, but I feel this is the absolute best solution/workaround that will get you what you want with the least amount of effort. At most, it will require you alter your markup to add the monospace class where needed, but this is probably a step in the right direction anyway.
You can make use of line-height. Change your CSS to this:
#demo {
font-family: "Anakin Mono", sans-serif;
line-height: 3;
padding: 0 10px;
border: 1px solid black;
}
You can try different values of line-height. It accepts multiple of original line height. px or em.
Always remember not to use only ONE font in font-family. Use more than 1 font to provide fallback fonts, in case your font is not loaded yet / unable to load.
Also, it's not advised to use self-hosted TTF font unless the file size is small. Try using CDN-hosted web fonts (such as Google Fonts) for better performance.
JSFiddle demo: https://jsfiddle.net/okawrcuf/6/ (I used another font that is available in Google Fonts for demo purpose, as I don't have your font)
I want to put tags around a some text without changing whatever font family and font size the text has already inherited. I could redefine the CSS for h1 so that nothing is said about the font-family or font-size but then the values from the user agent would just come through. I need to define the CSS for h1 in a way that the user agent values are killed, something like
h1{
font-family:none;
font-size:none;
}
But I don't think that will work.
Thanks
Just use the inherit keyword.
font-family: inherit;
font-size: inherit;
I can't think of a good reason for making the most important heading in your document indistinguishable from body text though. It runs the risk of being treated as a spam flag by search engines.
Please use inherit, this will work, which will inherit your parent style
font-family: inherit
Font size is simple:
h1 { font-size: 100%; }
Font family is trickier, and the most robust way is to declare the font family h1 and its parent together. Assuming that h1 is a child of body, you could use
body, h1 { font-family: Helvetica, Arial, sans-serif; }
These settings, like any settings you might set, are ineffective against user style sheet rules that override them, as well as against browser defaults when the browser has been configured to ignore font sizes and/or families specified on web pages.
However, they work wider than the use of inherit, which is not recognized by some old browsers.
I'm using #font-face that has to be given a large font-size. for example the font-size of the title is 54px which is normally so big, but in this font it appears medium.
So the problem is, while the page loads, the alternative font appears veeeery big and breaks the whole layout.
Is there a way i can specify a font-size for alternative font?
You might be able to use Modernizr. It adds classes to the <html> element which represent features that the browser supports. In this case, the class it adds for #font-face support is fontface.
What I would do is set the title size to what looks good for the alternative font, then nest the proper font-size, like so:
.title {
font-size: 20px;
font-family: arial, sans-serif;
}
.fontface .title {
font-size: 50px;
font-family: 'alternative-font', arial, sans-serif;
}
Though, even then I guess it might not change in the right order... Generally, I'd not worry about the layout looking funny while loading, but hopefully this helps.
I would try to retrieve the name of the font being used via JavaScript or jQuery and if it's not the #font-face font then adjust the font-size accordingly.
Edit:
Here's a JavaScript Font Detection plugin to test when the fallback font is being rendered.
I want to use a single font named "Algerian" across my whole website. So, I need to change all HTML tags and I don't want to write different code for different tags like:
button{font-family:Algerian;}
div{font-family:Algerian;}
The method written below is also highly discouraged:
div,button,span,strong{font-family:Algerian;}
Put the font-family declaration into a body selector:
body {
font-family: Algerian;
}
All the elements on your page will inherit this font-family then (unless, of course you override it later).
*{font-family:Algerian;}
better solution below
Applying a single font to an entire website with CSS
The universal selector * refers to all elements,
this css will do it for you:
*{
font-family:Algerian;
}
But unfortunately if you are using FontAwesome icons, or any Icons that require their own font family, this will simply destroy the icons and they will not show the required view.
To avoid this you can use the :not selector, a sample of fontawesome icon is <i class="fa fa-bluetooth"></i>, so simply you can use:
*:not(i){
font-family:Algerian;
}
this will apply this family to all elements in the document except the elements with the tag name <i>, you can also do it for classes:
*:not(.fa){
font-family:Algerian;
}
this will apply this family to all elements in the document except the elements with the class "fa" which refers to fontawesome default class,
you can also target more than one class like this:
*:not(i):not(.fa):not(.YourClassName){
font-family:Algerian;
}
* { font-family: Algerian; }
The universal selector * refers to any element.
Ensure that mobile devices won't change the font with their default font by using important along with the universal selector * :
* { font-family: Algerian !important;}
As a different font is likely to be already defined by the browser for form elements, here are 2 ways to use this font everywhere:
body, input, textarea {
font-family: Algerian;
}
body {
font-family: Algerian !important;
}
There'll still have a monospace font on elements like pre/code, kbd, etc but, in case you use these elements, you'd better use a monospace font there.
Important note: if very few people has this font installed on their OS, then the second font in the list will be used. Here you defined no second font so the default serif font will be used, and it'll be Times, Times New Roman except maybe on Linux.
Two options there: use #font-face if your font is free of use as a downloadable font or add fallback(s): a second, a third, etc and finally a default family (sans-serif, cursive (*), monospace or serif). The first of the list that exists on the OS of the user will be used.
(*) default cursive on Windows is Comic Sans. Except if you want to troll Windows users, don't do that :) This font is terrible except for your children birthdays where it's welcome.
Please place this in the head of your Page(s) if the "body" needs the use of 1 and the same font:
<style type="text/css">
body {font-family:FONT-NAME ;
}
</style>
Everything between the tags <body> and </body>will have the same font
Ok so I was having this issue where I tried several different options.
The font i'm using is Ubuntu-LI , I created a font folder in my working directory. under the folder fonts
I was able to apply it... eventually here is my working code
I wanted this to apply to my entire website so I put it at the top of the css doc. above all of the Div tags (not that it matters, just know that any individual fonts you assign post your script will take precedence)
#font-face{
font-family: "Ubuntu-LI";
src: url("/fonts/Ubuntu/(Ubuntu-LI.ttf"),
url("../fonts/Ubuntu/Ubuntu-LI.ttf");
}
*{
font-family:"Ubuntu-LI";
}
If i then wanted all of my H1 tags to be something else lets say sans sarif I would do something like
h1{
font-family: Sans-sarif;
}
From which case only my H1 tags would be the sans-sarif font and the rest of my page would be the Ubuntu-LI font
in Bootstrap,
web inspector says the Headings are set to 'inherit'
all i needed to set my page to the new font was
div, p {font-family: Algerian}
that's in .scss
*{font-family:Algerian;}
this html worked for me. Added to canvas settings in wordpress.
Looks cool - thanks !