Some help with Fonts Options

[DaveO]

Hello there and thanks for looking. I am building my online CV which is based on a template. I think i have got it just how I want after modifying it and when i run it locally it looks and works perfectly. When i upload it to my web server here: www.david-oliver.com some of the fonts are missing. For example the body text under 'a few thoughts' section looks to be standard times new roman rather than nice web font which i see locally. Specfically the sentance that starts: 'This must begin with the user or the customer. '

Thank you in advance for any help or suggestions you can offer to make the fonts work on the server.

[pandy]

Have you uploaded the font files? Even if you have, the URLs to them are wrong.

You have this.

CODE

font-family : "librebaskerville-regular";
src : url("../fonts/librebaskerville/librebaskerville-regular-webfont.woff2") format("woff2"), url("../fonts/librebaskerville/librebaskerville-regular-webfont.woff") format("woff");
font-style : normal;
font-weight : normal;

../ means one directory up and there is no directory above the one your base URL leads to. Well, there may be on your server, but seen from outside there isn't.

[DaveO]

Have you uploaded the font files? Even if you have, the URLs to them are wrong.

You have this.

CODE

font-family : "librebaskerville-regular";
src : url("../fonts/librebaskerville/librebaskerville-regular-webfont.woff2") format("woff2"), url("../fonts/librebaskerville/librebaskerville-regular-webfont.woff") format("woff");
font-style : normal;
font-weight : normal;

../ means one directory up and there is no directory above the one your base URL leads to. Well, there may be on your server, but seen from outside there isn't.

Thanks yeah i think its correct - that code is in the CSS folder and the fonts are in a 'fonts' folder so the ref is one up - which is how it is all set locally and works fine.

[pandy]

Thanks yeah i think its correct - that code is in the CSS folder and the fonts are in a 'fonts' folder so the ref is one up - which is how it is all set locally and works fine.

Yes, but from the web there is no one folder up from http://david-oliver.com/ . That's the top of the file structure as far as the browser is concerned. You may have folders above it on the server, but they aren't accessible from the web. The browser isn't supposed to be able to snoop around the whole server, just what you let it see, and that's the folder your domain lives in and anything below it in the file structure, but nothing above.

If you want your fonts in their own folder, rather create a folder inside your domain's root folder. The URL would then be fonts/librebaskerville/librebaskerville-regular-webfont.woff2 and so on.

See here about relative URLs.
https://htmlhelp.com/faq/html/basics.html#relative-url

[DaveO]

Ok Cool - i understand. I have made the changes (example below) from my fonts.css file and now have a fonts folder both in the root level and in the CSS folder as i wasnt sure where it should go - so i figured wack it in both. Still doesn't seem to work though.

Example from the .css file:

@font-face {
font-family: "montserrat-extralight";
src: url("/fonts/montserrat/montserrat-extralight-webfont.woff2") format("woff2"), url("/fonts/montserrat/montserrat-extralight-webfont.woff") format("woff");
font-style: normal;
font-weight: normal;
}

[pandy]

With root folder, do you mean the folder your domain points to, where you have your index.html ? If so it should work.

[pandy]

Seems the files aren't where you say they are.

File not found...
http://david-oliver.com/fonts/montserrat/m...ht-webfont.woff

[DaveO]

Hmm - i must be going mad - check this out shows them all sitting there in the fonts folder at the same level as index.html https://www.awesomescreenshot.com/video/121...a89e14831f687c5

[pandy]

Looks right. Hmmm....

[DaveO]

since i changed the folder structure it dosent work locally either - i wonder if there is anything i need to change on the server to allow different scripting etc

[pandy]

Did you place them the font files same way on your local machine? Then maybe something is wrong with your CSS after all.

[pandy]

You have errors in main.css- Some of them serious.

https://jigsaw.w3.org/css-validator/validat...ng=&lang=en

Those marked Parse Error will cause the style sheet not to be read after that point. Sad thing is that the styling for the H1 comes before those parse errors, so that can't be it. You should correct the errors anyway.

The styling of the H3 works. So I tried to use the same font for the H1. It didn't work. First I thought that style rule must be overridden by another rule somewhere, but if I type a common font name in, like Verdana, it does work. So that can't be it either.

Wasn't easy this. There's very much of everything there. Not exactly easy to skim through.

[DaveO]

Oh wow thank you - ill work through it,

[pandy]

Do that. But alas I don't think it will fix the font problem. I've tried, but I can't figure out what it is.

[DaveO]

so just to compare i uploaded the original template instead. All fonts etc look correct so i must have screwed something up. Odd thing is all i did was delete certain divs and modify copy http://david-oliver.com/

[pandy]

Haven't you touched the CSS at all?

Well, then I suggest you start over. And change just one thing at the time and check that nothing has screwed up before you change the next thing.

[DaveO]

yeah will do, thanks.

[pandy]

Complex templates aren't easy to deal with.