Question 258367 in Html Question posted in
Some basic documentation can be found here.

Html – How to get the custom font

This link uses a custom font called zee family. How do I save the rendered font from this website(zee family), any help would be appreciated.

Tags:

2

Answers


  1. 0

    After opening Developer Tools F12, find the Inspector tab. Click on any page element that used the font in question, like <body>

    This will display a list of styles in the middle pane, and the very first one probably says post-6.css or some CSS file. Click on this file name, and this will show the contents of the CSS — in this case, there will be a list of URLs where you can download the WOFF and TTF files.

    enter image description here

    enter image description here

    Login or Signup to reply.
  2. 0

    https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

    @font-face

    The @font-face CSS at-rule specifies a custom font with which to
    display text; the font can be loaded from either a remote server or a
    locally-installed font on the user’s own computer.

    If you wish to enumerate all the available @font-face definitions loaded by any current page, just run the following snippet in the js console:

    [...document.styleSheets]
  //for each stylesheet in the document
  .forEach((stylesheet) => {
    try {
      [...stylesheet.cssRules]
      //for each css rule in the current stylesheet
        .forEach((rule) => {
          //if the rule matches a fontface definition
          if (rule instanceof CSSFontFaceRule || rule.type === CSSRule.FONT_FACE_RULE) {
            //logs the css rule as is
            console.log(rule.cssText);
          }
        });
    } catch (e) {
      console.error('ERROR: ', e);
    }
  });

    It will echo every single font-face definition where each one has a font-family key and a list of urls with the corresponding font files.

    Consider that the src property allows multiple sources that will be evaluated in the order found and the first one being available and supported will be used by the browser.

    https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src

    src

    The src CSS descriptor for the @font-face at-rule specifies the
    resource containing font data. It is required for the @font-face rule
    to be valid.

    Easier approach…

    In case you are more comfortable using a solution more straight to the point (but showing less details), the Firefox browser has a feature showing all the font files used by the page inside the Developer Tools.

    I show here the way to access to that panel (I use the italian language but it’s easy to find out):

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search