Search code examples
cssfontscustomizationmicrosoft-edgedeveloper-tools

Edge browser developer tools local override, not visible when I close developer tools

Though I describe here about edge-browser, this occurs even in chrome-browser

Steps to reproduce

  • You might have seen me as a developer,but I like customisation and fonts, one such font I got inspired now is quicksand

  • I downloaded and installed in my PC,
  • I took a simple website ,wikipedia

Current look of website

enter image description here

  • Now I go to edge://settings/fonts,(in chrome chrome://settings/fonts)
  • And change sans-serif font to Quicksand

Current look of website

enter image description here

  • as you can see, the body font has changed, only the heading font is the problem
  • I tried to change the sans,standard,fixed-width fonts,but still the heading didn't change
  • when I inspected the website ,my guess was right ,it used some custom font in header:
  • font-family: 'Linux Libertine','Georgia','Times',serif; enter image description here
  • I opened that file which I underlined in green color ...1
  • I set the overrides folder in sources tab to C:\Users\nepto\OneDrive\Desktop\EdgeOverrides (as said in docs)
  • now continuing from step 1,I add to overrides folder as shown below enter image description here

Current structure

enter image description here

  • now I opened that local file (C:\Users\nepto\OneDrive\Desktop\EdgeOverrides\en.wikipedia.org\longurls\load.php%3-fe414f3.php)
    in notepad
  • now pressing Ctrl + H I replace all 3 occurrence of 'Linux Libertine','Georgia','Times',serif with inherit and save it

Current look

enter image description here

  • As shown above I am too happy for change in font for header
  • Even if i reload the font of header is still quicksand

Problem Starts

  • Now i close the developer tools
  • Still same Quicksand font!
  • But when i reload now(after closing) the changes are gone,it loses Quicksand font
  • Being afraid,i opened developer tools ,and the Quicksand font comes back
  • So the font i like(Quick Sand) works only when the developer tools is opened

Help me to make it work even if developer tools is closed

Solution

  • You didn't miss anything, it's just impossible to make it work when the F12 DevTools is closed.

    The server source codes decided how the webpage looks like in the browser. The DevTools is just for testing and debugging, it can't change the server source file. The Override function just overrides the code not changing the server source code. And all the functions in F12 DevTools are only work when F12 is open. That's why it won't work anymore when you close F12 and refresh the page.