Font not displaying correctly on first opening on browser ( HTML / CSS page )

HTML & CSS
1

Dear All,
I am an architect and I have a really simple site. I am ok with its look and feel generally for now. There is a weird problem which, when the page is opened the first time on a browser, the fonts are being replaced by some other default fonts. I use Gill Sans and I read it is websafe. However, I need to open the page a few times until the browser loads the font. No idea what that could be. But for potential clients passing by, it is not great when their first impression is an unimpressive page. I hope there is someone who knows about this.
Here is the page : )
https://www.solararchitekt.com/index_en.html
Its done in HTML Editor by Coffee Cup
Thanks very much in advance.

1 Like
2

I want to add that once the browser has it, it works. Coming to a new computer though means a downgrade on the fonts.

3

The issue you’re running into is Gill Sans is NOT a standard font owned by any of the major OS sources. It’s a commercial font so unless you’ve installed it manually (or have installed an app which uses it), you’re not going to see it consistently across devices.

I would suggest going through Google Fonts or something like that and find an appropriately open sources downloadable font which can be added to your site - google provides the css you need to invoke to use their fonts, which is convenient.

3 Likes
4

The Cabin and Lato typefaces on Google Fonts are recommended as close to the look of Gill Sans. It’s really simple to use them. You just click Get Font and there’s some simple code to paste into your web pages — a line that goes in the header of each page and some CSS rules that select the various fonts you want to use within each typeface.

1 Like
5

Dave Maxwell & Ralphm , thank you very much for the advise, really appreciated. I ll get a google font ( Cabin / Lato ) to make sure the page is running smoothly. Cheers

2 Likes
6

Hi there!

It sounds like you’re encountering a common issue related to web font loading, often referred to as “flash of unstyled text” (FOUT). Here are a few suggestions to help resolve the problem:

  1. Ensure Proper Font Loading: Make sure that your CSS includes the correct @font-face declaration if you’re hosting the font yourself. If you’re using a web font service (like Google Fonts), check that you have the correct link in the <head> section of your HTML.Example:

css

Copy code

@font-face {
    font-family: 'Gill Sans';
    src: url('path/to/gillsans.woff2') format('woff2'),
         url('path/to/gillsans.woff') format('woff');
}
  1. Use Fallback Fonts: In your CSS, set fallback fonts in case the custom font takes time to load. For instance:

css

Copy code

body {
    font-family: 'Gill Sans', Arial, sans-serif;
}

This way, if Gill Sans isn’t available immediately, the browser will use Arial or a generic sans-serif font until it loads.
3. Check Font File Paths: Ensure that the font files are correctly linked and accessible. You can do this by directly accessing the font file URLs in your browser.
4. Optimize Load Time: Consider using a font loading strategy, such as font-display, to control how the browser handles font loading. Using font-display: swap; allows the browser to show fallback text until the font is fully loaded.

css

Copy code

@font-face {
    font-family: 'Gill Sans';
    src: url('path/to/gillsans.woff2') format('woff2');
    font-display: swap;
}
  1. Check Caching: Sometimes, browsers may cache fonts differently. Encourage users to clear their cache or test the site in incognito mode to see if the issue persists.
  2. Test Across Browsers: Make sure to test your site on different browsers to see if the problem is consistent or browser-specific.

By implementing these strategies, you should be able to improve the font loading behavior on your site. If the problem persists, consider reaching out to a web developer who can offer a more in-depth analysis. Good luck, and I hope your site impresses potential clients right from the first visit!

1 Like