Hosting fonts locally?

[liqu0d]

Hey, I'm a complete html and css noobie. What's the easiest way to host the website fonts from the root of my jekyll site? Which lines in which files should I modify?

And thanks for Gravity, it's the best jekyll theme I've see yet.

[hemangsk]

For hosting locally, using font-face will do the job, https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

So we can make a folder, say foo and then save/upload all the font files there.

and then in https://github.com/hemangsk/Gravity/blob/master/css/style.scss

Just do

@font-face {
    font-family: myfontname;
    src: url(/foo/myfontname.extension);
}

And then you can use it to modify the fonts of the website, by changing the font-family properties. Ideally I should have used SCSS, but since we've plain CSS in Gravity, you can just to da Ctrl + F and search for font=family, which will get you all the usage of font-family, modify wherever you need to change the font.

Let me know if this works

[liqu0d]

Gotcha, so I can place this anywhere in the style.scss?

@font-face {
    font-family: "PT Sans";
    src: url(/fonts/pt-sans.ttf);
}

What about lines 8 and 9 in the head.html?

 <link href='https://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic|Source+Sans+Pro:400,700,200,300|Josefin+Sans:400,600,700,300' rel='stylesheet' type='text/css'>

Should I modify this in some way or simply remove it entirely?

edit: to be clear, I like the fonts you have by default. I just want to host them locally rather than force readers browsers to fetch them from another domain.

[hemangsk]

You can place it anywhere you like but preferred place to define is on top, as it has to be defined before usage.
Yeah righto, you can remove that from head.html entirely.

[liqu0d]

Great. I placed it on line 24 on the style.scss. Then downloaded this font:

https://allfont.net/download/pt-sans/

Then restarted jekyll. But it didn't seem to work. When I inspect elements in the browser, I can see the fonts.ttf was loaded without error (Status 200). Any debugging advice for me? I didn't make any major chances to the head.html.

[liqu0d]

Just realized I said "error". It's not an error, I meant the .ttf gets loaded in the browser properly but the fonts don't take effect on the site for some reason. I also realize this isn't directly a Gravity theme issue. Would appreciate your help if you get some time. If not, probably safe to close this issue.

[hemangsk]

Hey, I thought abt the reason and couldn't find a possible reason why this might be happening, if the status is 200.

So I assume there are the steps,

• First you created a font-face definiton in style.scss

@font-face {
    font-family: "PT Sans";
    src: url(/fonts/pt-sans.ttf);
}

• Then removed the head.html 's link tag which was downloading fonts from external domain

Now this step,

• Then back in the CSS file, changed the font-family property to "PT Sans" wherever you wanted to use it.

This should have got it working unless CSS has some voodoo of using "PT Sans" instead of 'PT Sans' if the former is used in font-face

[liqu0d]

Using single quotes totally worked! Thank you!