[NEWBIE] Custom CSS works only in Safari for Mac…

  • csjWP

    (@csjwp)


    8 years, 3 months ago

    I’m sure there is a perfectly simple reason and solution to this. But i’m new to WordPress and I’ve never experienced something like this before. And I’m really wasting time here.

    I just download and set up WordPress and bought a theme 2 days ago.

    #1 One when I enter css styling into the themes custom css, it only work in Safari for Mac. I’m using Firefox and the Firefox web inspector.

    #2 I tried to set up @font-face.
    I uploaded the files into themes font folder /wp-content/themes/foundry/style/fonts/.

    And then added this code.
    @font-face {
    font-family: ‘SuisseIntl-Book-WebXL’;
    src: url(‘/fonts/SuisseIntl-Book-WebXL.eot’); /* IE9 Compat Modes */
    src: url(‘/fonts/SuisseIntl-Book-WebXL.woff2’) format(‘woff2’), /* Super Modern Browsers */
    url(‘/fonts/SuisseIntl-Book-WebXL.woff’) format(‘woff’), /* Pretty Modern Browsers */
    url(‘/fonts/SuisseIntl-Book-WebXL.ttf’) format(‘truetype’), /* Safari, Android, iOS */
    url(‘/fonts/SuisseIntl-Book-WebXL.svg#SuisseIntl-Book-WebXL’) format(‘svg’); /* Legacy iOS */
    }

    /*CSS selectors*/
    body {
    font-family: ‘SuisseIntl-Book-WebXL’, sans-serif;
    font-size: 14px;
    color: #000;
    }

    h1, h2, h3, h4, h5, h6, p, ul, ol, pre, table, blockquote, input, button, select, textarea {
    font-family: ‘SuisseIntl-Book-WebXL’, sans-serif;
    color: #000;
    }

    .menu {
    width: 100%;
    height: 55px;
    font-family: ‘SuisseIntl-Book-WebXL’, sans-serif;
    color: #000;
    }

    But it doesn’t work. It worked last night, but only in Safari. I then tried re-uploading the font files and pasted the code in again. Now it doesn’t even show in Safari.

    What am I doing wrong. Is it my css styling that isn’t correct? I can’t really get on with designing the site and adding content before this issue is resolved.

    link: cubo.c-s-j.dk

    Thanks

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter csjWP

    (@csjwp)

    8 years, 3 months ago

    I can now see that I the font files wont be downloaded.

    404 Failed to load resource

    downloadable font: download failed (font-family: “SuisseIntl-Book-WebXL” style:normal weight:normal stretch:normal src index:0): status=2147746065 source: http://cubo.c-s-j.dk/fonts/SuisseIntl-Book-WebXL.woff2

    Server permission: rw-r–r– (644)

    Bernhard

    (@bhdzllr)

    8 years, 3 months ago

    Hello,

    with a slash “/” in front of your path your change to the root directory. Is your “fonts” folder in the root directory?

    Otherwise you can use relative path (just without the slash at the beginning; path from your “index.php” because your inline CSS is located there)

    “fonts/SuisseIntl-Book-WebXL.eot”

    or absolute path:

    “/wp-content/themes/foundry/fonts/SuisseIntl-Book-WebXL.eot”

    Does that help?

    Thread Starter csjWP

    (@csjwp)

    8 years, 3 months ago

    @bhdzllr

    Thanks for your help. I really appreciate you taking the time to help me out. I did what you said I switched to the absolute path and it seems to work both in Safari and Firefox on Mac.

    But I can’t seem to target the right CSS. I can change things to my liking with the Web Inspector. But when I paste the code into my custom css and save it, it seems to the overwritten by the default theme css. It get a strike-through in the web inspector. Not sure what i’m doing wrong. 

    /* typography */
@font-face {
  font-family: 'SuisseIntl-Book-WebXL';
  src: url('/wp-content/themes/foundry/style/fonts/SuisseIntl-Book-WebXL.eot'); /* IE9 Compat Modes */
  src: url('/wp-content/themes/foundry/style/fonts/SuisseIntl-Book-WebXL.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/wp-content/themes/foundry/style/fonts/SuisseIntl-Book-WebXL.woff2') format('woff2'), /* Super Modern Browsers */
       url('/wp-content/themes/foundry/style/fonts/SuisseIntl-Book-WebXL.woff') format('woff'), /* Pretty Modern Browsers */
       url('/wp-content/themes/foundry/style/fonts/SuisseIntl-Book-WebXL.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('/wp-content/themes/foundry/style/fonts/SuisseIntl-Book-WebXL.svg#svgFontName') format('svg'); /* Legacy iOS */
}

body {
  font-family: 'SuisseIntl-Book-WebXL', Fallback, sans-serif;
  color: #F00;
}

body {
    -moz-osx-font-smoothing: grayscale;
    font-size: 13px;
    line-height: 24px;
    font-family: sans-serif,'SuisseIntl-Book-WebXL',sans-serif;
    color: #F00;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, pre, table, blockquote, input, button, select, textarea {
    	font-family: 'SuisseIntl-Book-WebXL', sans-serif;
    	color: #F00;
}

.menu {
    	width: 100%;
    	height: 55px;
    	font-family: 'SuisseIntl-Book-WebXL', sans-serif;
	color: #F00;
    Bernhard

    (@bhdzllr)

    8 years, 3 months ago

    @csjwp

    I just looked at the page. Do you use a different font now?
    Have you fixed it?

    Thread Starter csjWP

    (@csjwp)

    8 years, 3 months ago

    @bhdzllr

    Hi, well, yes or not quite. I’m managed to follow your instructions about the links path. That worked thank you.

    But I’ve tried editing the .less file in the themes working, seems like it’s the “master” file. It didn’t do the trick, nothing happened. So I found the ebor-theme-styles.css in /uploads/wp-less-cache/ folder edited that too. And it works.

    Only downside, if I make changes to the theme under appearance it breaks the temp .css. 😀

    But i’m working on it slowing getting there 😀 (i hope)

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘[NEWBIE] Custom CSS works only in Safari for Mac…’ is closed to new replies.