I'm trying to override font-family via userContent.css in all web pages. My ultimate goal is to only target Persian/Arabic text in the css but that's a separate issue.
I started with a simple global rule below but Firefox does not pick it up:
* {
font-family: "Vazirmatn" !important;
}
I noticed the changes are picked in firefox's chrome, for instance the text in the Inspector but not in actual websites. I added below to target content of websites but it wasn't effective:
#-moz-document url-prefix('http://'), url-prefix('https://') {
* {
font-family: "Vazirmatn" !important;
}
}
Am I missing something?
Some sanity checks:
toolkit.legacyUserProfileCustomizations.stylesheets is set to True
the same CSS works if I use the Stylish extension but I prefer to use the native userContent.css if possible
"Allow pages to choose their own fonts, instead of your selections above" is set to True in settings
I'm on Firefox 106.0.2
When viewing the source code in an instance of CKEditor, the code is not wrapping when using Firefox (version 36.1). I have checked this with the CKEditor demo to make sure it is not my code, and this problem happens there too.
I have checked the demo in Internet Explorer 11, Opera 27.0 and Chrome 41 and the source code wraps in all of these browsers, so why is it not wrapping in Firefox?
I am using Windows 8.1.
Thanks.
It's a recent change in Firefox and you can fix this by adding to your stylesheets:
textarea.cke_source {
white-space: pre-wrap;
}
Check this ticket. This issue will be fixed in next minor CKEditor release.
Thank you Reinmar. I was able to fix this by changing this style in:
ckeditor/skins/moono/editor_gecko.css
.cke_source{
font-family:'Courier New',Monospace;
font-size:small;
background-color:#fff;
white-space:pre
}
was changed to
.cke_source{
font-family:'Courier New',Monospace;
font-size:small;
background-color:#fff;
white-space:pre-wrap
}
I changed this in editor.css as well.
How to increase code fonts in Firefox developer tools?
I know that there is a zoom function but I want to set the font size only for the code.
Open Firefox Developer Tools
Click anywhere within Firefox Developer Tools
Press Ctrl++ on Unix/Win or Cmd++ on Mac
To be clear, I mean the + key. You don't need to hold the Shift key while doing it.
Maybe an easier way will be to open about:config and set
devtools.toolbox.zoomValue to bigger value.
You need to modify userChrome.css under ~/.mozilla/firefox/[profile-name]/chrome with this:
/* Styles for Web developer tools */
#namespace url(http://www.w3.org/1999/xhtml);
.CodeMirror {
font-family: "Ubuntu Mono", monospace !important;
font-size: 15pt !important;
}
The result looks like this:
This only changes the debugger and style editor. There's a different selector for the html inspector. Not sure what that is yet.
Open Firefox and type about:support. In Application Basics section chose Profile Folder - Open Folder. It will fire your file manager. If there is no chrome folder than create it. After that go to this chrome folder and create an userChrome.css file, open it in a text editor and add :
.devtools-monospace {font-size: 12px!important;}
Save. Be sure to restart Firefox.
UPDATE: One thing bothered me - while typing in the devtools console the text actually a bit smaller than on output (after pressing Enter). In order to make it the same we need to change font-size for its corresponding css class too. I don't know its class name yet so I just set
* { font-size: 12px !important; } globally and it works.
So sure, as stated before, the short answer is cmd++.
But the + sign might not be directly accessible on your keyboard (no numeric key pad, laptop, strange layout).
You then have to press maj first to access the + sign, like, for example on the american keyboard layout: maj+=.
Unfortunately, even if you are correctly focused on the dev tool pane, cmd+maj+= increases the font of the web view pane, while cmd+- decreases the font on the dev tool pane.
And you end-up with a web tool pane with a font size so small that it is unreadable, and no way to increase it.
Then #Thal's answer comes handy, once focused to the dev tool pane cmd+0 resets the dev tool's font size to the original.
If you want to answer the question like #Timothy_Truckle is asking for, here are a couple of them (still focus on the dev tool pane, of course):
switch to the US keyboard layout and press cmd+=
find a keyboard layout with the + directly accessible, switch to it, and press cmd++
That's for you guys wondering why some find it hard to simply press cmd++ or why some find it hard to focus on the dev tool pane (because they actually focus on the dev tool pane, but the result is as if they were focused on the web view pane).
You can specify a style for the devtools-monospace class selector. To do so, edit userChrome.css in your mozilla profile's chrome directory, and specify the CSS properties you want. For example:
.devtools-monospace {
font-family: "Source Code Pro",monospace !important;
font-size: 16px !important;
}
The userChrome.css needs to be in the chrome folder of your Firefox profile. If the folder don't exist, create it. Your userChrome.css will then override the CSS from Firefox dev tools after you restart the browser.
To find your profile in Windows OS type: Strg + R and then enter:
%APPDATA%\Mozilla\Firefox\Profiles\
Some elements of Firefox can be styled in the userChrome.css file situated in your Firefox profile's chrome folder.
As of 2018, modify/create ~/.mozilla/firefox/[profile-name]/chrome/userChrome.css with something similar to:
#-moz-document url-prefix("chrome://devtools/content/") {
* { font-size: 13px !important; }
}
Then restart Firefox.
The solution on the Mozilla forums almost has it right: https://support.mozilla.org/en-US/questions/1198481
Using Ctrl+= or Cmd+= was not ideal for me since it increased fonts for all the elements of the window, including the tab names.
Using .devtools-monospace { font-size: 13px !important;} was almost ok, but it did not affect the Debugger and Network tabs.
Using #bohag_bihu's solution had side effects for the address bar and some other text inputs.
I accidentally had my firefox developer window resized to the minimum (couldn't even read it anymore), "CMD +" (mac) didn't work for me, well only for the main web page even if the console was focused, I just hit: "CMD 0" and it came back to normal, if it can be a good alternative to anyone else ;)
As John said, the way to increase the font-size in the devtools is to use ctrl/cmd+, just like you would on a web page. In fact the devtools is a webpage. You just need to make sure that the devtools frame is focused first.
I'm afraid there's no way to only increase the font-size for the code right now.
For certain Mozilla versions (I was testing on Mozilla SeaMonkey equivalent to Mozilla Firefox 52 ESR), an explicitly set root element is required.
This will work:
#namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
#namespace html url("http://www.w3.org/1999/xhtml");
while this won't:
#namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
#namespace html url("http://www.w3.org/1999/xhtml");
Once #namespace rules have been set,
you only need to add selectors and styles:
.devtools-monospace,
.CodeMirror,
.CodeMirror pre {
font-family: "Courier New", monospace !important;
font-size: 10pt !important;
}
This one works on FF => 68.0 Linux with userChrome.css. Inspector tools are now using CSS variables and the inspector tree itself is loaded in an iframe so none of the tweaks actually worked esp. with .CodeMirror classes.
You can find all the variables in this file (just copy paste below URL in FF to view source)
resource://devtools/client/themes/variables.css
For the userChrome.css part here's what solved it for me.
/* #namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); */
:root {
/* Text sizes */
--theme-code-font-size: 13px !important;
}
If userChrome.css is not loaded create userContent.css and add the same rulesets. Tried and tested on FF Mac/Linux 89
My Aptana Studio just automatically updated to 3.5.0...the font size on the edit tabs is too big.
I cannot find a setting anywhere in the Preferences menu to change the UI Theme Font Sizes and theme colors.
My Theme is set to "Light Studio".
Does anyone have some config file magic to tweak the UI themes? I'm not talking about code editor colors here - rather the Tabs and sub windows that make up the Aptana/Eclipse app.
Thanks Much!
Don
Tested in Windows 7: open the folder
%APPDATA%\Aptana Studio 3\plugins\org.eclipse.platform_4.3.2.v20140221-1700\css
find the css file related to your theme (for example e4_default.css is the default theme) and customize the rule CTabItem, for example:
CTabItem {
font-style: normal;
font-weight: normal;
font-size: 9px;
}
It looks like an open bug. You can follow it at https://github.com/aptana/studio3/issues/235
If you go Window->Preferences->General->Appearance->Colors and Fonts->View and Editor Folders, then choose 'Part title font' (for tabs, etc.) or 'View message font'. Clicking on them will show a description of what that property applies to. The other items within the "View and Editor Folders" section only let you change the colour.
I had to restart Aptana for the changes to actually be displayed.
Does anybody know why #fontface will work sometimes in Firefox but not others?
On this page... http://www.independentink.ca/gameday/indexb.htm you can see 'Design Packages' written in an embedded font. Then, I try to implement some League Gothic on the same page, as seen here... http://ggszabo.com/new/indexb.html and it won't work.
I'm viewing both in FF and one works while the other doesn't. My code is exactly the same on both.
I've searched for answers but none address this problem specifically.
My css is as follows.
#font-face {
font-family: 'League Gothic';
src: url('../fonts/League_Gothic.eot');
src: local('☺'),
url("../fonts/League_Gothic.woff") format("woff"),
url("../fonts/League_Gothic.svg") format("svg");
}
Please help!
I found an answer for local development at least...
"Firefox comes with a very strict "file uri origin" (file:///) policy by default: to have it to behave just as other browsers, go to about:config, filter by fileuri and toggle the following preference:
security.fileuri.strict_origin_policy
Set it to false and you should be able to load local font resources across different path levels."
I have yet to see if it works when published. I have reason to believe that it will.