We Keep Coding

Font style doesn't change in my website with the Chrome setting?

If I change the default display font settings in Chrome (Settings > Appearance > Customise fonts) to anything different but default. My webpage does show the change in font.
How it should look like Default/Changed (Times New Roman/Cascadia Code):
Example of a font change on Wikipedia
The font of the page does not change despite changed settings for the font.

The font of a webpage is determined by the CSS styles defined in the HTML code of the page. Changing the default font settings in your browser only affects the font used for the UI elements of the browser and not for the webpages.
To change the font of a webpage, you need to update the CSS styles for that page to use the desired font. This can be done by adding a font-family property to the CSS styles for the elements you want to change the font for.

Strange font behaviour when changing font-weight values through an input form

I'm trying to achieve a sort-of-Microsoft Word control panel, which allows you to edit and format text. It works but it's not smooth at all. When I change the font-weight or the font-style of the element, the font quickly changes to the browser's default one before loading the selected one. Is there a way to at least improve this performance?

maybe the font-weight you set at this moment doesn't exist for that font family.
Did you try with other font?

Change content of specific file with jQuery

I have multiple css files like bootstrap, normalize and custom.
When I try to change the background image by jquery, it inserts the css value in bootstrap.css rather than my custom css.
Is there any way to select a specific file where jquery can make changes?
My css load order is:
1 bootstrap.css
2 normalize.css
3 my own custon css
Thanks

Styles added with jQuery will be inline. This will take a higher precedence than any external stylesheets.
It sounds like you probably have the CSS loading in the right order. What should happen is the browser will apply styles from Bootstrap, then apply Normalize, then apply your custom styles, then any inline styles.

How to change styling of nested elements without an id in javascript

I am making a chrome extension that changes the colors of websites to reduce eye strain. I have noticed that a lot of websites have tags without IDs or Classes. For instance:
<span>Insert Text Here</span>
In my code I will write
document.body.style.color = #fff;
and it changes most of the text color from black to white but nested elements aren't effected.
How would I make all the text colors white and all the background colors dark?

You'll need some way of identifying the elements. That doesn't mean they have to have IDs or classes, you have the full range of CSS selectors at your disposal for use in a style element you can add to the page from your extension's code. Or you can use those CSS selectors in JavaScript code using querySelector and querySelectorAll and apply additional logic if necessary.

use different font-size for different font in the same page?

Say we use helvetica for english and some exotic font(from ascii point of view) for another language in a page.
With the font size being equal, one font looks bigger on the eye.
Is there a way to specify different font size for different font used in a page?
Additionally, since the two languages can be intermingled in a line, we need to align them properly after we resize one of the font. Otherwise the smaller font might have bigger line-spacing at top , smaller line-spacing at bottom.
-- edit
Wow fast responses.
Sadly this is user-posted text like SO's question & answer.
Which is not tagged with different classes.

You can trivially set font size different for different languages, as long as you use some markup to distinguish the languages (e.g., lang attributes).
However, if the problem is that texts in the same font size look differently sized, then the basic problem is in your choice of fonts. You should normally use one font for copy text, selecting a font that covers all the characters you will need. If you cannot do that for some reason, you should try to select fonts that are compatible, in the sizing sense and otherwise.

You can change font size using tags or CSS. I suggest CSS because it is more organized and easier to read.
CSS
.firstfont{
font-size: 10px; (or whatever you want)
}
.secondfont{
font-size: 12px; (or whatever you want)
}
In the HTML
<div class="firstfont">
This is the first font's text
</div>
<div class="secondfont">
This is the second font's text
</div>
Alternatively if you don't want to use CSS you can do
<div style="font-size:10px">
This is the first font's text
</div>
<div style="font-size:12px">
This is the second font's text
</div>

I would also suggest using CSS, you can use two different classes for each font.
.font1
{
font-size:10;
color:#000;(you can use any color over here)
}
.font2{
font-size:11;
color:#efe; (you can use any color over here)
}