Hosting fonts locally? about gravity HOT 7 CLOSED

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

from gravity.

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.

from gravity.

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.

from gravity.

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.

from gravity.

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.

from gravity.

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

from gravity.

Using single quotes totally worked! Thank you!

from gravity.