Page 7 • CSS solve-me-do • Non-Gaming • Science & Technology • Eurogamer.net

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 7,074 posts
Seen 23 hours ago
Registered 5 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 10,271 posts
Seen 6 hours ago
Registered 13 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 7,074 posts
Seen 23 hours ago
Registered 5 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 10,271 posts
Seen 6 hours ago
Registered 13 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 24,121 posts
Seen 5 days ago
Registered 16 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.

Deleted user 15 August 2018 11:55:00

Use a relevant path;

src:url(Fonts/ahronbd.ttf") format('truetype');

DangerousDave_87 15 Aug 2018 11:55:14 7,074 posts
Seen 23 hours ago
Registered 5 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.

Deleted user 15 August 2018 11:57:27

run it through https://www.fontsquirrel.com/tools/webfont-generator

DangerousDave_87 15 Aug 2018 12:03:30 7,074 posts
Seen 23 hours ago
Registered 5 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 7,074 posts
Seen 23 hours ago
Registered 5 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.

Deleted user 15 August 2018 12:05:48

If you don't host it, no one else will be able to see it.

DangerousDave_87 15 Aug 2018 12:09:44 7,074 posts
Seen 23 hours ago
Registered 5 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.

Deleted user 15 August 2018 12:14:07

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 7,074 posts
Seen 23 hours ago
Registered 5 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 7,074 posts
Seen 23 hours ago
Registered 5 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 7,074 posts
Seen 23 hours ago
Registered 5 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 24,121 posts
Seen 5 days ago
Registered 16 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 3 minutes ago
Registered 16 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 6,366 posts
Seen 18 hours ago
Registered 14 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 6,366 posts
Seen 18 hours ago
Registered 14 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

Deleted user 15 August 2018 15:34:11

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 7,074 posts
Seen 23 hours ago
Registered 5 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 7,074 posts
Seen 23 hours ago
Registered 5 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.

CSS solve-me-do • Page 7