We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 40122
    • 330 Posts
    <base href="[[++site_url]]" />


    Im not sure what it actually does, but for some reason it causes my CSS3 webfonts to not work.

    Removing it doesnt seem to harm my site. Is there any reason to have it?
      • 30585
      • 833 Posts
      The <base> tag specifies the default url for all the relative urls in the page. This is especially useful when Friendly Alias Path is enabled in your system settings. For it to work, the <base> tag must be placed before other elements.

      The following:
      <head>
        <base href="[[++site_url]]">
        <link href="assets/css/style.css" rel="stylesheet">
      </head>
      
      is the same as this:
      <head>
        <link href="[[++site_url]]assets/css/style.css" rel="stylesheet">
      </head>
      
      and this:
      <head>
        <link href="http://www.mydomain.com/assets/css/style.css" rel="stylesheet">
      </head>
      
      If you don't want to use the <base> tag, just make sure you're using absolute urls to load your static resources like your web fonts, style sheets, etc.
        A MODx Fanatic
      • It tells the browser what the full site URL is for any relative URLs. If all of your URLs, including images, .css and .js files, have a full (domain.com/) or an absolute URL (/ or /subdir/) then no, it's not necessary.

        There is some debate whether or not using a base meta tags and relative URLs is a good thing. For example, the developers of JQuery UI don't approve of it: http://bugs.jqueryui.com/ticket/8637

          Studying MODX in the desert - http://sottwell.com
          Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
          Join the Slack Community - http://modx.org
          • 40122
          • 330 Posts
          Quote from: sottwell at Jan 06, 2015, 04:32 AM
          It tells the browser what the full site URL is for any relative URLs. If all of your URLs, including images, .css and .js files, have a full (domain.com/) or an absolute URL (/ or /subdir/) then no, it's not necessary.

          Ah thanks. Would you know why this would be breaking my webfonts?

          Chrome console gives me the error:

          Missing Cross-Origin Resource Sharing (CORS) Response Header


          I have my Fonts and Styles .css files seperate and linked as such:

          <link rel="stylesheet" type="text/css" href="css/fonts.css" />
          <link rel="stylesheet" type="text/css" href="css/styles.css" />


          Within the fonts.css the CSS code is as such:

          @font-face {
              font-family: 'bebas_neueregular';
              src: url('bebasneue-webfont.eot');
              src: url('bebasneue-webfont.eot?#iefix') format('embedded-opentype'),
                   url('bebasneue-webfont.woff2') format('woff2'),
                   url('bebasneue-webfont.woff') format('woff'),
                   url('bebasneue-webfont.ttf') format('truetype'),
                   url('bebasneue-webfont.svg#bebas_neueregular') format('svg');
              font-weight: normal;
              font-style: normal;
          
          }


          Could the issue be because the src for these font files is not absolute?
          • Are those font files in the same dirctory as the CSS file loading them? Css "src" attributes are relative to the CSS file itself.

            If, for example, you have

            theme/
            -- css/
            -- img/
            -- fonts/

            and the .css file is in the theme/css/ directory, while your fonts are in the theme/fonts/ directory, your url needs to be url(../fonts/fontname.type) - i.e. "go up one directory then into the 'fonts' directory"

            MODX relative URLs are relative to the root index.php file. In the manager, for example for CMPs or Dashboard widgets, they are relative to the manager's index.php file.
              Studying MODX in the desert - http://sottwell.com
              Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
              Join the Slack Community - http://modx.org
              • 40122
              • 330 Posts
              Quote from: sottwell at Jan 07, 2015, 06:28 AM
              Are those font files in the same dirctory as the CSS file loading them?

              Sorry should have said. Yes, the font files are in the same directory as fonts.css
              • Then it probably does require a full URL. Have you tried that?
                  Studying MODX in the desert - http://sottwell.com
                  Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
                  Join the Slack Community - http://modx.org