CSS solve-me-do Page 7

    Next Last
  • Deleted user 9 October 2011 10:41:17
    Can someone check this in IE for me please? Are the fonts rendering properly as GillSans and does the image shrink and expand to fill the width 100%? And does everything else look OK?

    Also, can anyone see why the image gets chopped 3/4 of the way across the page and loads of white space appears in Safari on iPad or iPhone but not for Mac?
  • Deleted user 9 October 2011 10:50:44
    Font is correct, image doesn't expand to 100% and everything is left aligned.
  • Deleted user 21 November 2011 16:17:32
    Can someone have a look at this and then view it on their iPhone and explain to me why the images don't fit to the width of the screen?

    They're perfect on every browser other than mobile safari.
  • Deleted user 21 November 2011 22:01:12
    Fixed it. For anyone that looked or is interested, I had to set a minimum width of 1300px for all of the elements that got cropped. Something to do with the viewport of Safari.

    Edited by HairyArse at 23:20:24 21-11-2011
  • DangerousDave_87 15 Aug 2018 11:28:11 6,326 posts
    Seen 4 hours ago
    Registered 3 years ago
    I can't find a more relevant thread using the search, so this will have to do. Does anyone here have experience in using locally hosted fonts on a website? I'm in the very early stages of trying to put together an online portfolio and I'm whilst I've dabbled with HTML and CSS over the years, I'm hardly proficient.

    What I'm trying to do is link a font to my website so that everyone can see it when my website is loaded. The font itself is called Aharoni Bold and came pre-installed with Windows 7 and 8. It's a really nice font, especially in uppercase. However, the cheeky buggers at Microsoft have removed it from Windows 10. I've since obtained the font and it loads up nicely on my computer, but I want to ensure that when my site goes live everyone can see/read the text in this font, whether it's pre-installed on their device or not.

    I'm aware of the font-face rule in CSS and I'm using some example code from w3schools in order to test this out before implementing it in my own project. However, I'm having absolutely no luck. The font just doesn't show up.

    Has anyone experienced anything like this before? I'll post the code up to help clarify what I'm trying to explain. Any help would be greatly appreciated.

    (!DOCTYPE html)
    (html)
    (head)
    (style)
    @font-face {
    font-family: "myFirstFont";
    src:url("C:/Users/user/Documents/Work/Projects/Websites/David/Version 1.0/Fonts/ahronbd.ttf") format('truetype');
    }

    .harlow{
    font-family: "myFirstFont";
    text-transform:uppercase;
    }
    (/style)
    (/head)
    (body)
    (div)With CSS3, websites can finally use fonts other than the pre selected "web-safe" fonts.(/div)
    (p)(b class="harlow")Note(/b): Internet Explorer 8 and earlier, do not support the @font-face rule with the WOFF format (only support for EOT format).(/p)
    (/body)
    (/html)
    Edit - The tags weren't showing up in the quote. Probably a security measure on the forum? I've replaced the arrows with brackets to try and make it readable.

    Edited by DangerousDave_87 at 11:45:25 15-08-2018
  • senso-ji 15 Aug 2018 11:36:35 9,795 posts
    Seen 1 day ago
    Registered 11 years ago
    Should myFirstFont be in quotations? It's different to how the W3 schools article has written it.
  • DangerousDave_87 15 Aug 2018 11:42:49 6,326 posts
    Seen 4 hours ago
    Registered 3 years ago
    Ah. I tried both out of desperation. It is originally without quotations, but I believe you can use either.
  • senso-ji 15 Aug 2018 11:46:18 9,795 posts
    Seen 1 day ago
    Registered 11 years ago
    Have you tried copying the tff file into the same folder as the html, so it looks something like: src: url(ahrondbd.tff) , just to check that it's loading correctly?

    Another way to check is to use google or firefox developer tools and check that the font is loaded in the place where you've applied it - if there is a line through the name, then it means it hasn't found it.

    Edited by senso-ji at 11:47:22 15-08-2018
  • askew 15 Aug 2018 11:47:18 19,784 posts
    Seen 4 hours ago
    Registered 14 years ago
    It's the protocol you're serving it from: use `file:///` and the path to the font.

    I would recommend installing node and the `http-server` module which will allow you spin up a little dev server nice and easily.
  • CrispyXUKTurbo 15 Aug 2018 11:55:00 2,051 posts
    Seen 6 hours ago
    Registered 5 years ago
    Use a relevant path;

    src:url(Fonts/ahronbd.ttf") format('truetype');
  • DangerousDave_87 15 Aug 2018 11:55:14 6,326 posts
    Seen 4 hours ago
    Registered 3 years ago
    So I think it has something to do with the file itself. I've just tried linking to another font in the same folder and it came up straight away. Not sure what that means exactly, but I'm to reinstall the font and try again.

    I did move the font into my project folder originally. Maybe I haven't copied the file across properly? Or maybe the file name isn't as it appears. I'll see what happens with this reinstall first.
  • CrispyXUKTurbo 15 Aug 2018 11:57:27 2,051 posts
    Seen 6 hours ago
    Registered 5 years ago
    run it through https://www.fontsquirrel.com/tools/webfont-generator
  • DangerousDave_87 15 Aug 2018 12:03:30 6,326 posts
    Seen 4 hours ago
    Registered 3 years ago
    Well it looks like I've given myself a bit of work to do now. Uninstalled the font. I try to reinstall it and it says it's already installed and yet it's absolutely not there. Time for a break. I'll try again this afternoon.
  • DangerousDave_87 15 Aug 2018 12:04:20 6,326 posts
    Seen 4 hours ago
    Registered 3 years ago
    @CrispyXUKTurbo If I can download it again to re-upload it, I'll give that a try. I was trying to avoid hosting it elsewhere if I could. Just being picky really.
  • CrispyXUKTurbo 15 Aug 2018 12:05:48 2,051 posts
    Seen 6 hours ago
    Registered 5 years ago
    If you don't host it, no one else will be able to see it.
  • DangerousDave_87 15 Aug 2018 12:09:44 6,326 posts
    Seen 4 hours ago
    Registered 3 years ago
    I was going to self host, if I could. As in just keep it in a folder within the website. That was before I discovered the issue was with the font itself, rather than the file location.
  • CrispyXUKTurbo 15 Aug 2018 12:14:07 2,051 posts
    Seen 6 hours ago
    Registered 5 years ago
    yeah, just have the fonts in a folder in the root of your site and point to it with @font-face in your styles.
  • DangerousDave_87 15 Aug 2018 12:23:34 6,326 posts
    Seen 4 hours ago
    Registered 3 years ago
    I'm definitely going to try that again, but I'm going copy a pre-installed Windows 10 font over into the folder first, just to make sure my code is solid. If that works, then I'll try again with this new font and see what happens. I can only assume I'm getting the file name wrong. Potentially a rookie error here.
  • DangerousDave_87 15 Aug 2018 12:30:18 6,326 posts
    Seen 4 hours ago
    Registered 3 years ago
    Bingo. "ahronbd (1)" is the file name and I don't think CSS likes that. Hopefully a rename solves the issue. I've never renamed a font file, so I might need to look into that.
  • DangerousDave_87 15 Aug 2018 12:57:48 6,326 posts
    Seen 4 hours ago
    Registered 3 years ago
    Edit - OK. So the font works fine now, as long as it's manually installed. That is progress. My only concern now is how to display that without other users having to install it. I assumed by some wizardry that having access to the file would be enough, but apparently not. I've got plenty to learn.

    Thanks all for your help!

    Edited by DangerousDave_87 at 13:02:04 15-08-2018
  • askew 15 Aug 2018 13:42:44 19,784 posts
    Seen 4 hours ago
    Registered 14 years ago
    Appreciate you're set on using this typeface, but is there nothing on Typekit or Google Fonts that takes your fancy? They've sorted a bunch of hurdles you're likely to encounter (i.e converting the typeface into the various filetypes) and you won't buzz through your bandwidth allowance so quickly.
  • funkstar 15 Aug 2018 14:01:03 3,280 posts
    Seen 4 days ago
    Registered 14 years ago
    DangerousDave_87 wrote:
    Edit - OK. So the font works fine now, as long as it's manually installed. That is progress. My only concern now is how to display that without other users having to install it. I assumed by some wizardry that having access to the file would be enough, but apparently not. I've got plenty to learn.

    Thanks all for your help!
    as crispy said, run it through the webfont generator. it'll spit out the files and css you need to host on your own server.
  • Psiloc 15 Aug 2018 14:34:12 5,159 posts
    Seen 1 hour ago
    Registered 12 years ago
    @font-face {
    font-family: 'My Font';
    font-style: normal;
    font-weight: normal;
    src: url(Fonts/MyFont.eot?);
    src: url(Fonts/MyFont.eot?) format('embedded-opentype'), url(Fonts/MyFont.woff?) format('woff'), url(Fonts/MyFont.ttf?) format('truetype');
    }

    .ExampleClass {
    font-family: 'My Font', sans-serif;
    }
  • Psiloc 15 Aug 2018 14:46:59 5,159 posts
    Seen 1 hour ago
    Registered 12 years ago
    Google Fonts is known to serve different looking fonts to different browsers and operating systems, and can get blocked by ad-blockers and other stuff.

    I always serve them myself using CSS. I wouldn't concern myself over bandwidth, a font file is typically around 50 - 100KB isn't it? If this is excessive for you then you have bigger concerns than what font to use
  • CrispyXUKTurbo 15 Aug 2018 15:34:11 2,051 posts
    Seen 6 hours ago
    Registered 5 years ago
    DangerousDave_87 wrote:
    Edit - OK. So the font works fine now, as long as it's manually installed. That is progress. My only concern now is how to display that without other users having to install it. I assumed by some wizardry that having access to the file would be enough, but apparently not. I've got plenty to learn.

    Thanks all for your help!
    They won't have to install anything if you upload it with the rest of the project.
  • DangerousDave_87 15 Aug 2018 18:09:10 6,326 posts
    Seen 4 hours ago
    Registered 3 years ago
    @CrispyXUKTurbo Cool cool. Once I've got something and some where to upload, I'll give it a go. The files are all in place. :)
  • DangerousDave_87 15 Aug 2018 18:15:30 6,326 posts
    Seen 4 hours ago
    Registered 3 years ago
    @funkstar Yeah. I've had a nosey into it and got myself sorted. I've never played with fonts like this before, so this has all been new to me. Not massively straight forward, but I suppose all I've ever had to think about before now was sticking to web-safe fonts.
  • Next Last
Log in or register to reply

Sometimes posts may contain links to online retail stores. If you click on one and make a purchase we may receive a small commission. For more information, go here.