Grow your CSS skills. Land your dream job.

@font-face problem on mobile

  • # December 11, 2012 at 2:12 pm

    not me =)

    # December 11, 2012 at 2:16 pm

    Anyway, @sorrentandrea. As long as your fonts are accessible on your server, they require attribution. Just wanted to let you know.

    Any luck on the htaccess fix?

    Just for testing purposes, can you edit your css files and put in the absolute URL’s inside @font-face?

    (e.g.)

    @font-face {
    font-family: ‘museo_sans_500regular’;
    src: url(‘http://mysite.com/webfont2/museosans_500-webfont.eot’);
    src: url(‘http://mysite.com/webfont2/museosans_500-webfont.eot?#iefix’) format(‘embedded-opentype’),
    url(‘http://mysite.com/webfont2/museosans_500-webfont.woff’) format(‘woff’),
    url(‘http://mysite.com/webfont2/museosans_500-webfont.ttf’) format(‘truetype’),
    url(‘http://mysite.com/webfont2/museosans_500-webfont.svg#museo_sans_500regular’) format(‘svg’);
    font-weight: normal;
    font-style: normal;

    # December 11, 2012 at 2:41 pm

    @chrisburton I’ll give attribution as soon as possible, thanks for the tip =)

    I edited the css files with the absolute URL’s but it’s not working now, maybe it’s a fault of mine, I don’t know =(

    I’m having some problem with the htaccess (I’m not good at it, so I’m learing the basic now =) )

    # December 11, 2012 at 3:00 pm

    @sorrentandrea I found that your site requires the “www”. So in your css you need to add the following:

    @font-face {
    font-family: ‘museo_sans_500regular’;
    src: url(‘http://www.andreasorrentino.eu/new/webfonts/museosans_500-webfont.eot’);
    src: url(‘http://www.andreasorrentino.eu/new/webfonts/museosans_500-webfont.eot?#iefix’) format(‘embedded-opentype’),
    url(‘http://www.andreasorrentino.eu/new/webfonts/museosans_500-webfont.woff’) format(‘woff’),
    url(‘http://www.andreasorrentino.eu/new/webfonts/museosans_500-webfont.ttf’) format(‘truetype’),
    url(‘http://www.andreasorrentino.eu/new/webfonts/museosans_500-webfont.svg#museo_sans_500regular’) format(‘svg’);
    font-weight: normal;
    font-style: normal;

    So I believe the issue is that you are not linking to them correctly even with the “www” in the URL. But you should still force the non “www” to redirect to the “www”

    Do you have CPanel?

    # December 11, 2012 at 3:07 pm

    I know I must be missing something but I cannot find a folder called ‘webfonts’ via Chrome Inspector.

    # December 11, 2012 at 3:12 pm

    @Pauli_D Same here. Which is why I think it has to do with invalid links.

    # December 11, 2012 at 3:46 pm

    @chrisburton yes you’re right the service on wich I’ve the website do not support the non “www” so I’m making change to the DNS to correct this lack but it takes 12-24h to do this, so in the meanwhile I updated the links as you suggested with the “www” but it still don’t work.

    Thanks guys you’re amazing! =)

    # December 11, 2012 at 3:50 pm

    @sorrentandrea When linking correctly to the font files, I should be able to put that link in my browser’s URL bar and it should download automatically to my computer. This isn’t happening. I just get a 404 which tells me that the files are not linking to the actual files. I would like to see the folder structure on your server. Can you screenshot where on your server the files are?

    # December 11, 2012 at 4:23 pm

    @chrisburton sorry for my ignorance but I don’t know how to add a screenshot to this discussion

    # December 11, 2012 at 4:25 pm

    @sorrentandrea Upload the image to http://tinypic.com and post the URL.

    # December 11, 2012 at 4:53 pm

    Here is the screenshot thanks for the patience chris 35hpvnt.png

    # December 11, 2012 at 5:11 pm

    @sorrentandrea Those are your CSS files. Where are the font files?

    # December 11, 2012 at 5:13 pm

    In the webfonts folder 21488qw.png

    # December 11, 2012 at 5:16 pm

    @sorrentandrea Okay. Right click on one of them and copy the link address. Then paste it here.

    # December 11, 2012 at 5:18 pm

    @sorrentandrea Ah ha! Nevermind. I found the correct URL.

    Update your CSS @font-face to use the following URL:

    `http://www.andreasorrentino.eu/new/css/webfonts/webfont-file-name-goes-here`

    e.g.

    @font-face {
    font-family: ‘museo_sans_500regular’;
    src: url(‘/webfonts/museosans_500-webfont.eot’);
    src: url(‘/webfonts/museosans_500-webfont.eot?#iefix’) format(‘embedded-opentype’),
    url(‘/webfonts/museosans_500-webfont.woff’) format(‘woff’),
    url(‘/webfonts/museosans_500-webfont.ttf’) format(‘truetype’),
    url(‘/webfonts/museosans_500-webfont.svg#museo_sans_500regular’) format(‘svg’);
    font-weight: normal;
    font-style: normal;
    }

Viewing 15 posts - 16 through 30 (of 40 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".