Home Forums Weaver Xtreme Theme 4.0.4: Quotes and Apostrophes escaped in Custom CCS breaks @font-face URLs

Topic Resolution: Answered
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #55495
    Answered
    timreeves
    Participant

    Hi Bruce and Friends,

    I’ve been struggling for hours with my Lato font not being loaded from the website, although I used the exact code from Font Squirrel (or maybe it was Google Fonts).

    The code looks like this:

    /* lato-italic - latin */
    @font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 400;
    src: url('/wp-content/uploads/fonts/lato-v14-latin-italic.eot'); /* IE9 Compat Modes */
    src: local('Lato Italic'), local('Lato-Italic'),
    url('/wp-content/uploads/fonts/lato-v14-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/wp-content/uploads/fonts/lato-v14-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
    url('/wp-content/uploads/fonts/lato-v14-latin-italic.woff') format('woff'), /* Modern Browsers */
    url('/wp-content/uploads/fonts/lato-v14-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/wp-content/uploads/fonts/lato-v14-latin-italic.svg#Lato') format('svg'); /* Legacy iOS */
    }

    In the actual file /wp-content/uploads/weaverx-subthemes/style-weaverxt.css being loaded it’s escaped like this:

    /* lato-italic - latin */
    @font-face {
      font-family: Lato;
      font-style: italic;
      font-weight: 400;
      src: /* local(\'Lato Italic\'), local(\'Lato-Italic\'), */
           url(\'/wp-content/uploads/fonts/lato-v14-latin-italic.eot?#iefix\') format(\'embedded-opentype\'), /* IE6-IE8 */
           url(\'/wp-content/uploads/fonts/lato-v14-latin-italic.woff2\') format(\'woff2\'), /* Super Modern Browsers */
           url(\'/wp-content/uploads/fonts/lato-v14-latin-italic.woff\') format(\'woff\'), /* Modern Browsers */
           url(\'/wp-content/uploads/fonts/lato-v14-latin-italic.ttf\') format(\'truetype\'), /* Safari, Android, iOS */
           url(\'/wp-content/uploads/fonts/lato-v14-latin-italic.svg#Lato\') format(\'svg\'); /* Legacy iOS */
    }
    

    That’s a real problem, as all modern browsers then include the escaped character in the path, giving a path including the escaped character relative to the weaver css file.

    How can I stop this happening?

    Thanks,

    Tim Reeves

     

    #55499
    scrambler
    Moderator

    Have you tried simply removing all the quotes inside the parenthesis, and or replacing them by double quotes.

     

    #55504
    Weaver
    Keymaster

    The url() operator doen’t need quotes inside.

     

    #55508
    timreeves
    Participant

    Thanks for both replies!

    Yes, I tried using quotes instead of apostrophes, same result – get escaped.

    As I found out, Weaver is right, the url operator does not need quotes. Apparently, nor does the format() operator. But I still have the problem, that to name a local font, which may e.g. be named “Lato regular” within the font file, I would need to bind the two words to one string within the local() operator.

    Furthermore, I have not understood why custom css is being escaped at all – can someone give me an example where this does more good than harm?

    Thanks, Tim

    #55515
    Weaver
    Keymaster

    So, I thought your “code” was something you entered into the Weaver Xtreme Plus add font option. Apparently you were talking about real Custom CSS.

    Weaver Xtreme does NOT escape custom CSS code. Nor does the native WP Custom CSS. (Which were you using?).

    If you are getting escaping, I believe that must be coming from your copy/paste operation. You need a paste that will copy the raw contents, not a “styled” or escaped content.

    #55517
    timreeves
    Participant

    Hi Bruce,

    yes I really am talking about straight custom CSS. I enter it using the legacy interface (I much prefer that to to the WP Customizr) under Main Options | Fonts and Custom | Custom CSS Rules.

    Have a screenshot to prove, but see no upload facility here )-: Anyway, I aint lying 🙂

    The following line is a direct copy-paste out of the custom CSS box:

    src: local('Lato Light'), local('Lato-Light')

    While this is what comes through in the included file /wp-content/uploads/weaverx-subthemes/style-weaverxt.css?ver=238 (I am adding some context for you):

    @media (min-width:1366px) {
    			#inject_fixedtop {margin-left:-0px;margin-right:-0px}
    			.wvrx-fixedtop,.wvrx-fixonscroll{margin-left:0px;margin-right:calc(0px - 0px - 0px)}
    			}
    
    /* Weaver Xtreme Plus CSS Styles - Version 3.1.1 */
    /* Weaver Xtreme Plus Background Images */
    
    /* Global Custom CSS Rules */
    /* lato-300 - latin */
    @font-face {
      font-family: Lato;
      font-style: normal;
      font-weight: 300;
      src: local(\'Lato Light\'), local(\'Lato-Light\'),

    So as far as I can see, someone really is escaping my custom css.

    Will test the other methods and report.

     

     

    #55518
    timreeves
    Participant

    BTW now using 4.0.5 Plus 3.1.1

    Tried emptying the Custom CSS box in Legacy and pasted the CSS into the “Clobal Custom CSS” field in Customizer. Same result, apostrophes escaped as seen from the frontend website.

    AHA: When I go back to the CSS entered via Customizer, the backslashes are visible! But when I view the same CSS in the legacy interface, they are not!!

    So, the backslashes ARE getting added and stored in the DB (or file, don’t know where you put them). They are definitely NOT in the original text of my CSS, which is in a flat text file on my Kubuntu Linux, edited with Kate. Really.

    I do not see any “Additional CSS” item in the Customizer which might come from WP directly, did you mean that?

    Bruce, I do believe we have a problem here, would be really grateful if you could check this out.

    Of course I could circumnavigate this by using a global HEAD section, or use a specialised plugin, but that’s not really the point )-:

    Thanks! Tim.

     

    #55521
    Weaver
    Keymaster

    I absolutely cannot duplicate this.

    Here’s what I did:

    I highlighted and copied this code from your earlier post:

    src: local('Lato Light'), local('Lato-Light')
    
    

    I then pasted that into the Customizer Custom CSS box. No escaping. I can’t imagine what else to try. Same results using the Legacy interface.

    Doesn’t matter where I try to look at the generated CSS either – directly in the generated HTML if I check Generate Inline CSS, or use the weaverxt.css file saved in the /uploads directory.

    This could be a Linux thing, I guess.

    Does the escape show up when you paste, or after you save?

    Perhaps you could send a zipped version (to be sure I use what you used) of the text file directly so I can try to copy/paste from it. ([email protected]).

    #55522
    Best Answer
    Weaver
    Keymaster

    This reply has been accepted as the best answer.

    You aren’t doing this on a Multi-site, by any chance? If so, then it might be you are using the Admin account on the sub-site, rather than the SuperAdmin account. I think plain Admins on a multi-site are not allowed fully raw CSS. (This is by design and standard WP restrictions for Multi-sites – you don’t want your users, even Admins, the capability of possibly injecting bad things via CSS, which is possible if unfiltered.)

    #55525
    timreeves
    Participant

    Hey Bruce,

    you are the best! Indeed I was doing exactly as you mentioned. So I’m sorry to have used your time for something which I did not know, and many many thanks for that tip, as I use MultiSite for multiple language websites. Noted! At least this may help some other visitors to the forum.

    Again many thanks, Tim

    #55526
    Weaver
    Keymaster

    It took me a while to think of that possibility. I guess this is also a case where the site info stuff would have shown that.

    I doubt this is well documented anywhere. I’ve used a Multi-Site to teach a WP class, and know there is a real difference what a sub-site admin can do, but something a subtle as saving CSS (let alone JavaScript!) to a multi-site is easy to forget about.

    I suppose it might be possible on a Multi-Site installation to compare the before and after of the CSS/JavaScript save, and issue a warning that it was changed due to the WP restrictions, but I’ve certainly never thought of this possibility before.

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.