Github pages doesn't load font from google font correctly

[lee-pai-long]

Select Topic Area

Product Feedback

Body

Hello,

I have a problem with my resume site on github page, I use the font Oswald from google font and it works fine locally but when I upload to github page, the font is switched to another one(I didn't specify an alternative font in the CSS).

Please help.

Best regards,

Saidina

[arafajs]

A few reasons why:

• The font is not hosted on a CDN. GitHub Pages uses a Content Delivery Network (CDN) to deliver static assets, such as fonts. If the font you are trying to use is not hosted on a CDN, it may not load correctly on GitHub Pages.
• The font URL is incorrect. Make sure that the font URL you are using is correct. You can get the correct font URL from the Google Fonts website.
• The font is not supported by your browser. Not all browsers support all fonts. If your browser does not support the Oswald font, it will be switched to another font.
• The font is blocked by your firewall or security settings. Make sure that your firewall or security settings are not blocking the font from loading.

To fix this issue, you can try the following:

1. Make sure that the font is hosted on a CDN.
2. Check the font URL to make sure it is correct.
3. Use a different font that is supported by your browser.
4. Allow the font to load through your firewall or security settings.

[eden-amari]

My ad blocker was stopping mine from loading, thank you so much!

[proksh]

I assume this is the file you are talking about - https://github.com/lee-pai-long/resume/blob/main/index.html

Let's address the issue step by step:

1. Google Fonts Link:

The @import link for the Oswald font seems to be outdated or very specific. Typically, for Google Fonts, the link is more straightforward.

You should go to Google Fonts, select Oswald, and then copy the provided link. It should look something like:

@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');

2. Fallback Fonts:

You mentioned that you didn't specify a fallback font. It's always a good practice to provide fallback fonts. This ensures that if the Oswald font fails to load, another similar font will be used.

Modify your Oswald declaration as such:

font-family: "Oswald", sans-serif;

3. You can try adding a general font to the entire page -

body {
    font-family: "Oswald", sans-serif;
}

If the issue persists after trying the above steps, you might want to check if other stylesheets or scripts are affecting the font rendering or if there's some conflict elsewhere in your CSS.

[lee-pai-long]

Thanks @proksh, this fixed my problems.