Fonts Not Working On Other Computers

October 02, 2023 Post a Comment

I just hosted my first website http://ianwinson.net and have the fonts customised in the html, but they are not showing up on other people's computers, just showing up as default t

Solution 1:

I have taken a look at your code. You're problem is that you are not importing any fonts... However you are asking it to use a font that isn't there.

font-family: 'Open Sans';

Also you seem to have only applied it to button.

So what you need to know: If the font is not a "safe font" (see below for more info" then you need to import it:

Go to google.com/fonts

Click "Use" on the font of your choice.... there will be a line of html that will look something like the following:

<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet'type='text/css'>

Put that in the head section of your website (note: <head> tags are not the same as the <header> tags that you have on your website).

I would suggest that you see this w3 page that shows you a basic structure and where you should put your <head> tags in relation to the rest of you website.

Anyway once you have the line of html in the head tags, simply apply the css font-family code to the item you want to have the font (the line of css will look something like this: font-family: 'Open Sans', sans-serif; ) please note that Google provides you the code to use.

If you want bold, italics, or things like that you need to select it at the top of the page (just above where it gives you the code to add to your site):

Edit to make answer complete:

Safe Fonts

I forgot about safe fonts until I saw it in the other answer and I wanted to make this answer complete.

If you don't want to use fonts from Google you can use "safe fonts" (read about them here ((w3 page))).

Essentially they are fonts that you can use without importing the font from an external (or local) source. They are hardwired (preloaded if you will) Now everyone should be able to see the font!

Good luck!

Oh and one more thing... At the bottom of your code you seem to be calling a javascript file that leads to nothing (the file is not there that you are calling). Not a huge deal, but it is probably better removed than not:

Solution 2:

Try including Open Sans in your code as below:

<link rel="stylesheet"type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />

For more help you can check this link

Solution 3:

Hi looking at your page I saw a <font> tag, the <font> tag is not supported in HTML5, try using CSS instead.

you can achieve that like this:

<p>some text here</p>

then in your CSS:

p {
  font-family: "Times New Roman", Georgia, Serif;
}

also make sure the font are you using are "safe fonts", if not you should add the font file.

Solution 4:

Just stumbled upon the same issue. I checked the browser console and found that the font were not loading because site was https enabled but the font urls were http .

Changing the font urls to https worked for me.

Solution 5:

What font files are you using in your site? And do you see any errors in the console? One of the most common things you'll see happening with .ttf font files is an embeddable permissions error. The .ttf sometimes won't have the correct permissions to run, so you can fix it with a tool such as https://www.andrebacklund.com/fontfixer.html

However, posting any console errors or more context about your font handling would be helpful in diagnosing what's happening.

Html5 Info