Webpage using Rendered Local Font instead of @import

See also questions close to this topic

• Custom Elements Using Pre-ES6 syntax

  I'm trying to define a custom HTML tag in JavaScript called, say, 'hanz-franz'. I want some function called 'pumpYouUp' to run when the browser's parser has finished looking at the sub-nodes and contents of my custom tag. I found this code online and have been using it for a while.

      class HTMLBaseElement extends HTMLElement {
              constructor() {
                  const self = super();
                  self.parsed = false; // guard to make it easy to do certain stuff only once
                  self.parentNodes = [];
                  return self;
              }
  
              setup() {
                  // collect the parentNodes
                  var el = this;
                  while (el.parentNode) {
                      el = el.parentNode
                      this.parentNodes.push(el)
                  }
                  // check if the parser has already passed the end tag of the component
                  // in which case this element, or one of its parents, should have a nextSibling
                  // if not (no whitespace at all between tags and no nextElementSiblings either)
                  // resort to DOMContentLoaded or load having triggered
                  if ([this].concat(this.parentNodes).some(function(el){return el.nextSibling}) || document.readyState !== 'loading') {
                      this.childrenAvailableCallback();
                  } else {
                      this.mutationObserver = new MutationObserver(function(){
                          if ([this].concat(this.parentNodes).some(function(el){return el.nextSibling}) || document.readyState !== 'loading') {
                              this.childrenAvailableCallback()
                              this.mutationObserver.disconnect()
                          }
                      });
                      this.mutationObserver.observe(this, {childList: true});
                  }
              }
          }
  
          customElements.define("hanz-franz", class extends HTMLBaseElement {
              constructor() {
                  const self = super();
                  return self;
              }
  
              connectedCallback() {
                  super.setup();
              }
  
              childrenAvailableCallback() { //this is the function that is run when the <beryl-lang> elements are loaded
                  this.parsed = true;
                  this.style.display = "none";
                  pumpYouUp(this);
              }
          });
  

  I've put a lot of work into making the rest of the program work in browsers all the way back to IE6, and I fully intend to make this code compatible with browsers the dinosaurs might have used as well. However, Babel isn't giving me anything useful. Because of how it implements classes in ES5 syntax, the this variable isn't referring to the same thing, and those classes apparently don't work with the custom elements API as shown by a few other SO questions who have asked similar (but distinct) questions. I'm curious about making this snippet of code compatible with ancient browsers that don't support the ES6 class syntax while still maintaining the ability to run the pumpYouUp function only when all children have been parsed. Is that even possible? I suspect the answer may boil down to how classes are actually implemented, how to emulate one closely enough to fool the customElements API into thinking it's dealing with a class, and then if all of this code is really necessary to monitor whether the children have been parsed. Can anybody help me find a solution to this problem? Thanks in advance.

  ** By the way, I know Edge, IE, and other browsers don't support the customElements API, but I'd like to not alienate any users. This is part of a much larger project that involves reaching as many users as possible and running on browsers that show up in web developers' nightmares. Thanks again!
• How to create real time web pages in php?

  I want to create/implement real time web pages. Like if I open particular job page in two tab so if i applied the job then second tab automatically reload while applied the job in first tab.

  Pleas suggest me or give me the example, how can do this?
• responsive 100% width banner with text

  I need to add a text on my 100% width responsive banner

         <div class="banner"> 
              <img src="images/truck.jpg" >
              <div>ala ma kota</div>
         </div>
  

  and CSS

  .banner {
      display: flex;
  }
  .banner img{
      width: 100%;
      }
  

  My banner is 2000x600 and I made it responsive but the text "ala ma kota" appears on the right I want to put it in center on the img

  I've tried many metods with positions absolute and relative as well but effects are not satisfying. Do you have any idea?
• My CSS selectors are not working on multiple elements

  I'm attempting to cascade a style from a div to a span to an <a> and it's not working. The elements are being "built" in a classic asp server page and written to the main page via AJAX. The ajax and asp are working. My doctype is set to html. In-line styles work but I'm trying to clean up the code.

  So here's the gist. I've created the classic "Card" with three divs: the card, the card_head, and the card_body. Again, no problems with this. Within the card head, I have a span and in that span, I have an <a>. This is for the "Edit" button. I want the span to float right and the <a> to have no text-decoration and to be colored white. I can accomplish this with in-line styles with NO problem. But when I try to cascade the styles within my css file, it doesn't work (span not floated, <a> is still underlined and not white).

  My ASP code...

  retStr = retStr & "<div class='card'>"
  retStr = retStr & "<div class='card_head'>Contact Information <span><a href='#'>Edit</a></span></div>"
  retStr = retStr & "<div class='card_body'>"
  'body stuff goes here
  retStr = retStr & "</div><div class='card_body text_right'>See More</div></div>"
  

  My CSS code...

  .card{margin:0px 10px;border:1px solid var(--main-color);width:calc(100% - 350px);border-radius:15px;}
  .card_head{border-radius:15px 15px 0px 0px;background-color:var(--main-color);color:white;padding:10px;}
  .card_head>span{float:right;}
  .card_head>span>a{text-decoration:none;color:white;}
  .card_body{padding:0px 10px;}
  

  I tried a minimum amount of css in one of w3schools try me editors and everything worked as expected (I know, I know, some of you don't like w3schools but it works for me).

  So what could I possibly be missing? My console shows no errors or warnings.

  Thanks
• How to increase radio button size with bootstrap class, without using any css?

  How to increase the radio button size with the bootstrap class, without using any css?
• Change definition of child class when parent is hovered in SCSS

  Trying to toggle the background and font colors on children in a div when the whole dive is hovered using SCSS, basically modifying classes within a hovered div is what I am after, but in a SCSSy way.

  I know I can simply use the complete name of the classes under &:hover, but I am trying to do it using the &__ notation and apparently this is not working for me, seemingly need to select the parent of the hover selector somehow, but haven't been able to figure it out yet.

  .career_preview {
      width: 300px;
      height: 250px;
      background-image: linear-gradient(170deg, white 82%, black 82.6%);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin: 20px;
      &__title {
          color: black;
          padding: 15px;
      }
      &__action {
          color: white;
          padding: 0 20px 10px 210px;
      }
      &__points {
          display: none;
      }
      &:hover {
          background-image: linear-gradient(170deg, black 82%, white 82.6%);
          &__title {
              display: none;        
          }
          &__action {
              color: black;
          }
          &__points {
              display: none;
              color: white;
          }
      }
  }
  
• How to work with max-width and max-height in a rotate image

  this is my css code without container, when resolution is over 1024px (width) the max-width and max-height aren't working

  .cover {
    height: 65vw;
    width: 50vw;
    max-width: 861px;
    max-height: 961px;
    transform: rotate(-40deg);
  }
  
• mini-css-extract-plugin generates two additional JS files

  I'm using the following webpack.config.js file to build two CSS files (editor.css and style.css) and a JS file (block.build.js) making use of the mini-css-extract-plugin plugin:

  // Load webpack for use of certain webpack tools and methods
  const webpack = require( 'webpack' );
  // For extracting CSS (and SASS) into separate files
  const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
  
  // Define JavaScript entry points
  const entryPointNames = [ 'blocks', 'frontend' ];
  
  // Setup externals
  const externals = {};
  // Setup external for each entry point
  entryPointNames.forEach( entryPointName => {
    externals[ '@/lg6' + entryPointName ] = {
      this: [ 'lg6', entryPointName ]
    }
  } );
  
  // Define WordPress dependencies
  const wpDependencies = [ 'components', 'element', 'blocks', 'utils', 'date' ];
  // Setup externals for all WordPress dependencies
  wpDependencies.forEach( wpDependency => {
    externals[ '@wordpress/' + wpDependency ] = {
      this: [ 'wp', wpDependency ]
    };
  });
  
  // Start of main webpack config
  const config = {
    // Set mode
    mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
    // Go through each entry point and prepare for use with externals
    entry: {
        index: './index.js',
        style: './style.scss',
        editor: './editor.scss',
    },
    // Include externals
    externals,
    // Set output
    output: {
      // Place all bundles JS in current directory
      filename: 'block.build.js',
      path: __dirname,
      library: [ 'pluginnamespace', '[name]' ],
      libraryTarget: 'this'
    },
    // Fall back to node_modules for file resolution
    resolve: {
      modules: [ __dirname, 'node_modules' ]
    },
    optimization: {
      splitChunks: {
          cacheGroups: {
              editor: {
                  name: 'editor',
                  test: /editor\.(sc|sa|c)ss$/,
                  chunks: 'all',
                  enforce: true,
              },
              style: {
                  name: 'style',
                  test: /style\.(sc|sa|c)ss$/,
                  chunks: 'all',
                  enforce: true,
              },
              default: false,
          },
      },
    },
    module: {
      rules: [
        {
          // Run JavaScript files through Babel
          test: /\.js$/,
          exclude: /node_modules/,
          use: 'babel-loader',
        },
        {
          // Setup SASS (and CSS) to be extracted
          test: /\.(sc|sa|c)ss$/,
          exclude: /node_modules/,
          use: [
              {
                  loader: MiniCssExtractPlugin.loader,
              },
              {
                  loader: 'css-loader',
                  options: {
                      sourceMap: process.env.NODE_ENV !== 'production',
                  },
              },
              {
                  loader: 'postcss-loader',
                  options: {
                      plugins: [ require( 'autoprefixer' ) ]
                  }
              },
              {
                  loader: 'sass-loader',
                  options: {
                      sourceMap: process.env.NODE_ENV !== 'production',
                  },
              },
          ],          
        },
      ]
    },
    plugins: [
      // Setup environment conditions
      new webpack.DefinePlugin( {
        'process.env.NODE_ENV': JSON.stringify(
          process.env.NODE_ENV || 'development'
        )
      } ),
      new MiniCssExtractPlugin( {
          filename: './css/[name].css',
      } ),
      // For migrations from webpack 1 to webpack 2+
      new webpack.LoaderOptionsPlugin( {
        minimize: process.env.NODE_ENV === 'production',
        debug: process.env.NODE_ENV !== 'production',
      } )
    ],
    // Do not include information about children in stats
    stats: {
      children: false
    }
  };
  
  module.exports = config;
  

  Everything is working as expected but, for some reason, in addition to the block.build.js file, I'm getting two more JS files named 0.block.build.js and 2.block.build.js with the following content:

  (window.webpackJsonp=window.webpackJsonp||[]).push([[0],[,function(n,w,o){}]]);
  

  My question is, why are these two additional files are being created and how can I avoid this?

  Thanks in advance
• Transform font into polygons

  I am working with CAD software (specifically FreeCAD, but this should be system agnostic), and I want to draw 2D characters as polygons - not as strokes. e.g. the letter "O" might be made up of two concentric circles. Is there a way to produce such polygons directly from a .tff file?

  (Yes, FreeCAD does support text, but I want to be able to interact directly with the polygons without using the text functionality. This will make the system more portable between certain other programs.)

  It looks like you can do this by writing text in a vector graphics program - like inkscape. But that would be a pain: I would have to install the font, write each letter, and manually extract the polygon.

  I also tried this webapp. It can give me .svg files, but I still cannot find a systematic way to parse them into polygons.

  My goal is to have a function that takes a letter and a scale and outputs a polygon, or list of polygons, that describe that letter.

  e.g. in python:

  >>> get_letter('O',1)
  [[(0,0),(1,0),(1,1),(0,1)], [(.25,.25),(.75,.25),(.75,.75),(.25,.75)]]
  

  The main thing is to get the polygons from an existing font.
• My font wont load with font load async feels like i've tried everything

  I'm trying to add a custom font to my expo react native app and i've been having no luck

  i'm trying to add a open sans font ttf file from google fonts that i have in a fonts folder which is in a assets folder and i think i'm linking it up fine because i'm not getting an error from es lint about unable to resolve path i also did react native link and i feel i wont through all the necessary steps provided online to add the font but being that i'm a real noob i'm hoping i'm just missing something obvious that a more experienced dev can point out this has been driving me crazy and i was even considering releasing my app with the default font

  import React from 'react';
  import { View, Text, TouchableWithoutFeedback } from 'react-native';
  import * as Font from 'expo-font';
  import { Checkbox, Provider as PaperProvider } from 'react-native-paper';
  import EStyleSheet from 'react-native-extended-stylesheet';
  import { widthPercentageToDP as wp, heightPercentageToDP as hp }
  from 'react-native-responsive-screen';
  import NumberInput from './src/components/NumberInput';
  
  export default class App extends React.Component {
  
  constructor(props) {
      super(props);
      this.state = {
        checked: false,
      };
    }
  
  async componentDidMount() {
          await Font.loadAsync({
            OpenSans: require('./assets/fonts/OpenSans-Regular.ttf')
          });
  
            this.setState({ fontLoaded: true });
        }
  return (
  
       <PaperProvider>
       <View style={styles.container}>
       { this.state.fontLoaded !== true ? (
              <React.Fragment>
  <View style={styles.inputs}>
       <View style={styles.inputText}>
       <Text style={styles.inputTextHeader}>1. Sold Price</Text>
       <Text style={styles.fieldDescription}>Sale price not including shipping charge</Text>
       </View>
  
       </View>
       </View>
  </React.Fragment>
      ) : (<Text style={styles.inputText}>Loading... </Text>)
    }
        </View>
        </PaperProvider>
   );
   }
  }
  
  const styles = EStyleSheet.create({
  inputTextHeader: {
    fontSize: hp('3%'),
    color: '#5D5D5D',
    paddingLeft: wp('4%'),
    fontFamily: 'OpenSans',
  
  }
  });
  
• How to add a custom font?

  I want to add a custom font to a specific widget, I did everything but it is not changing I imported the font files into the project and created a "fonts" folder for it then declared the font in the pubspec

  I am using PlayfairDisplay and I've tried Roboto but it is still not changing

  uses-material-design: true
  fonts:
    - family: PlayfairDispaly
      fonts:
        - asset: fonts/PlayfairDisplay-Bold.ttf
          style: bold
  
• Why are my downloaded fonts not working in IE11?

  I've got some Univers OpenType font files (though, strangely, the batch I have at the moment doesn't include plain roman, just variants like bold and oblique!). I set up a demo of their use, using @font-face in CSS to access the files (from the same host as the page, so CORS isn't an issue). I'm styling the entire body element with font-family: UniversLTStd, serif;.

  I discovered that text styled as plain, italic, and bold is being displayed correctly as bold Univers (I don't have regular Univers, so it's using that as a fallback, evidently), oblique Univers, and bold Univers, respectively, in Chrome and Edge—but not in IE11, where all three paragraphs are being displayed in serif font.

  Here's the code (which I adapted from a Google downloadable font stylesheet). I get the same result whether or not I add format('opentype') after each font's URL. Any ideas why this is happening?

  <!DOCTYPE html>
  <style>
  /* latin-ext */
  @font-face {
    font-family: 'UniversLTStd';
    font-style: italic;
    font-weight: 400;
    src: url("/sites/tsdroot/Style%20Library/UniversLTStd-Obl.otf");
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'UniversLTStd';
    font-style: italic;
    font-weight: 400;
    src: url("/sites/tsdroot/Style%20Library/UniversLTStd-Obl.otf");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  
  /* latin-ext */
  @font-face {
    font-family: 'UniversLTStd';
    font-style: normal;
    font-weight: 700;
    src: url("/sites/tsdroot/Style%20Library/UniversLTStd-Bold.otf");
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'UniversLTStd';
    font-style: normal;
    font-weight: 700;
    src: url("/sites/tsdroot/Style%20Library/UniversLTStd-Bold.otf");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  
  body {
      font-family: UniversLTStd, serif;
  }
  </style>
  
  <p>
      The body font family for this page has been set to "UniversLTStd, serif". Having no Univers font file for
      normal-weight roman text, I find that the browser is falling back, not to the browser's default serif 
      font, but to an available variant of the requested Univers family. Exception: In IE11, it's
      displaying in the serif font.
  </p>
  <p style="font-style: italic;">
      This paragraph has been styled as Univers italic. Exception: In IE11, it's
      displaying in the serif font.
  </p>
  <p style="font-weight: bold;">
      This paragraph has been styled as Univers bold. Exception: In IE11, it's
      displaying in the serif font.
  </p>
  
• CSS Import Font-face difference

  The main text ("Elegance is sublime.") for the site doesn't have quite the right font for some reason. I am looking at my design and live version and they are different.

  The head-scratching issue for me is, unless the font is distorted why does it look different. Sizing aside the font is clearly different. Suggestions?

  https://github.com/marcoantonio123456/Studio

  Live version

  How it should be

          @font-face {
            font-family: 'Stem-Regular';
            src: url('components/typefaces/Stem-Regular.ttf') format('ttf'),
          }
  
          .headline-top { position: relative;
              font-family: 'Stem-Regular', sans-serif;
              font-size: 7.8em;
              letter-spacing: 0.8px;
  
              left: 90px;
              top: 350px; 
              z-index:1;
  
• How to reference an glyph in iconfont by word?

  I want to use iconfont in my project,and custom the font file by fontforge.

  I know glyph can be referenced by unicode in html or css, such as <i>&#xe030;</i> and &::before{content: "\e030";}.While I find some people can reference glyph by this: <i>library_music</i>.I guess that's glyph name, but I cant find the 'library_music' definition in fontforge.

  Here is my html and css code.

  @font-face {
    font-family: 'testfont';
    src: url(https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
  }
  
  i { font-family: "testfont"; }

  <i>library_music</i>
  <i>&#xe030;</i>

  I hope some one can tell me what is the principle of 'library_music' reference and how can I custom the word in fontforge.

  thx a lot.