Newbie times 3, this one is on web fonts and Safari

[JoyceOdell]

This is back to the issue of the webfonts. I brought them in, I see them in Dreamweaver. When I open my pages in a browser Firefox and Chrome show them just fine. Safari defaults to something like Trebuchet or Tahoma, and  some serif font for the body text. It's not even defaulting to Verdana which is what I entered into the font-family rules.

I don't think this is something that I'm doing. But it might be something that I'm not doing. The version of Safari on my computer is 14.1.2 which is certainly current enough to be aware that web fonts exist. Is there some extra step that I might be missing, or is this just something that one has to plan around when dealing with Safari?

[Jon Fritz]

What's the code look like?

[JoyceOdell]

Huh. That's odd. I went in to copy it, and on a hunch changed the default to Arial. And it took that. Still ignored my web font.

Here's the code for the dropdown menus

.dropbtn {
font-family: Cagliostro, Arial, Verdana, sans-serif;
font-size: 12px;
font-weight: 500;}

In Codepen, which we were using for class, you had to put the web font in double quotes, but I tried that and it made no difference.

I'm going to go through everything and at least try to get better defaults. I suspect that there may be a rule from the source document which is interfereing with things. WHerever it is, it isn't somewhere obvious. But if it picked up on Arial then it's reading at least part of what I've specified, so I don't knnow why it's ignoring the web font, when Firefox and Chrome don't.

[Jon Fritz]

The double quotes are used if the font has a two or more word name. For Example...

font-family: Cagliostro, Arial, Verdana, sans-serif, "times new roman";

A rule conflict is very likely the issue, especially givn you have non-default fonts coming up in place of the web fonts. If the rules were totally broken, you should be seeing only default fonts.

For future posts, please give the entire code that is affecting your page. Often times, as you're finding, issues in other parts of your document can cause all kinds of problems, and a small snippet of the code isn't really beneficial to troubleshooting.

[osgood_]

You probably should not be using web fonts these days, especially strange ones, which may have adverse effects on the stack and deprive users of even seeing it.

I would advise you investigate Google fonts, They are easy to link to your page and are cross browser compatible. I dont have this strange font on my computer that you are trying to use and won't see your page the way you want me to see it, so why use it.

[JoyceOdell]

They *are* both Google fonts. And the problem is only in Safari. Firefox and Chrome show them perfectly well.

[Nancy OShea]

Which web fonts are you using and from which source?

Did you roll your own fonts (self-hosting) or are using using fonts hosted on Google or Adobe Fonts?

If you roll your own fonts, you'll need a veritable alphabet soup of supporting file types to cover ALL web devices and browsers: TTF, EOT, WOFF, SVG, etc...

Also, all fonts are not created with equal efficacy.  Fonts from some font foundries work well in all variations while others don't.  You really must test fonts thoroughly in a wide range of devices and refresh your browser's cache at regular intervals.

If you care to post the online URL to your problem page, we'll take a look at it for you.  Otherwise, this is all just guesswork with no clear end in sight.

[JoyceOdell]

I'm using fonts hosted on the Google fonts site. Both of them are. I didn't recognize the name of the artist for the Cagliostro font, but the Flamenco is from Latino Type which is a foundary name I recognize from the MyFonts site which is a fairly widely recognized font distributor.

There turns out to be a "linked.css" file which I've not been using, although I accidently saved a few things in it early on. I've since saved all of the rules that I've built into the <style> header in the actual document I'm working in where I can get at them, for this round of things. 

But the "linked.css" file (which is not in my site folder, it's back in the tutorial #3 of the Classroom in a Book, where I got my source file) is very short. All it has is:

@charset "UTF-8";
.content h1 {
color: #000000;
font-family: Cagliostro, Ariel, verdana, sans-serif;
font-size: 2em;
font-weight: 900;
letter-spacing: normal;
text-align: center;
}
.header h3 {
font-family: cagliostro, Ariel, Verdana, sans-serif;
text-align: center;
width: auto;
float: left;
margin-right: 30px;
}
header .header .group-center {
top: 105px;
}
.h2 {
}
#float-right {
-webkit-box-shadow: inset 0px 2px 6px #8C3403;
box-shadow: inset 0px 2px 6px #8C3403;
width: 50%;
height: 50%;
margin-left: 20px;
}

None of those rules list anything that could be invoking whatever the default font that's showing up in Safari is. There are no random font names in any of my individual page style sheets either. Just the same ones as in that linked css file.

I just now whent hunting. The original tutorial turns out to have a css folder with a "main.css" file in it. Which I see got duplicated in my new site folder. But I just opened it, and it doesn't list *any* fonts by name. Nor does a third css file in the tutorial folder called "boxmodel.css", which also lists no fonts at all.

And this *only* happens in Safari.  Firefox and Chrome both show the webfonts without a hitch.

Okay, I just quit Dreamweaver. Cleared the history in Safari, relaunched Safari and looked at the page in the browser. Still not showing either of the web fonts. I also see that it's also not recognizing the formatting of the header which is supposed to be centered and isn't.

Like I say, I don't think that this is anything that I'm doing, since it works perfectly in two out of the three browsers I check things in.

I did want to use those webfnts, but it looks like if I'm going to keep tripping over things like this, I should prtobably go back and reassign default fonts. Because Safari is clearly not cooperating.

[osgood_]

Can you confirm you have the link to the Google fonts you have used in the head section of your page or if you have used the imported option, a import link in one of your stylesheets?

Also the Google fonts website suggests the font name should be wrapped in apostrophes.

[Ben M]

I feel like we had this problem before with the code because we are not seeing the whole picture leading to a long topic. If you are not able to share the entirety of the code and a browser is picking up a different font, the best advice you can be given is to right click on the affected text, and choose "Inspect" in your browser.  This will open up the developer console.

Using this page as an example you can see some boxes are checked and others are unchecked.  By identifying what is causing the font to be different in Safari and which rule it is picking up can help us to determine what is the root cause of your issue.  

[JoyceOdell]

Okay, I did the inspect element in the browser, and made a screenshot. The window doesn't show everything, but what it's clipping doesn't mention anything to do with fonts. Indeed, nothing, anywhere in the window ever specifies any font by name. The selected element is suposed to be the Cagliostro font, centered as the h1 element. I moved the h1 rule up higher in the styles list and that got rid of the random serif font that it was displaying earlier. Everything now seems at least to be defaulting to what I specified as the first fallback, but it's still ignoring my webfonts. 

Here is the style sheet information. I skipped the rest of the list since that has mainly to do with things like the non-text elements. The only text elements in that portion are to do with styling the button and dropdown text, and I couldn't see that interfering with the h1 and other font information. I'd like to get rid of that href to the Dreamweaver tutorials folder, but am hesitant about simply deleting it. 

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>Red Hen Publications — A Potterverse Tarot</title>

<link href="file:///Macintosh HD/Users/JOdeliMac/Desktop/Dreamweaver Tutorials/dreamweaver_cib_2021/lesson03/linked.css" rel="stylesheet" type="text/css">

<style type="text/css">

body {

    font-size: 100%;

    background-image: url(Images/basics/Classic3.jpg);

    margin-top: -1px;

    width: 1200px;

    background-size: 25%

% 0;

    background-size: auto auto;

}

a:link {

    color: #851010;

    text-decoration: none;

}

a:visited {

    color: #850101;

    text-decoration: none;

}

a:hover {

    color: #FFd700;

    text-decoration: none;

}

a:active {

    color: #000000;

    text-decoration: none;

}

/*

font-family: 'Cagliostro', sans-serif;

font-family: 'Flamenco', cursive;

*/

<link rel="preconnect" href="https://fonts.googleapis.com"> 

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 

<link href="https://fonts.googleapis.com/css2?family=Cagliostro&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/css2?family=Flamenco:wght@300;400&display=swap" rel="stylesheet">

p, h1, h2, h3, h4, h5, h6, li { margin: 10px 0px; } 

.content h1 {

font-family: Cagliostro, Arial, Verdana, sans-serif;

    color: #000000;

    text-align: center;

    font-size: 200%;

margin-top: 20px;

margin-bottom: 20px;

}

.content h2 {

    color: #000000;

    font-family: cagliostro, Arial, Verdana, sans-serif;

}

.content h3  {

    font-family: Cagliostro, arial, verdana, sans-serit;

    font-size: 1.25em;

color: #000000;}

p {

    font-family: flamenco, verdana, sans-serif;

    font-weight: bold;

    line-height: 125%;

    font-size: 1.3em;

} 

#topic2 h2 {

    color: #7f0101;

}

.text-center {

    clear: none;

    opacity: 1;

    -webkit-box-sizing: content-box;

    -moz-box-sizing: content-box;

    box-sizing: content-box;

    float: none;

    text-align: center;

}

[Nancy OShea · Accepted solution]

Your stylesheet should NOT be pointing to FILES on your local hard drive.

<link href="file:///Macintosh HD/Users/JOdeliMac/Desktop/Dreamweaver Tutorials/dreamweaver_cib_2021/lesson03/linked.css" rel="stylesheet" type="text/css">

This implies you have not defined your local site folder or your CSS and HTML document are not yet saved to that folder.  Go to Site > New Site... enter or browse to your local site folder.  Save your document.   The link to external CSS file should resolve to the proper path of:  "site_folder/file_name.css"

[JoyceOdell]

I was suspecting that that probably was a part of the problem.  I defined a site, but the file I used as a source for it wasn't one of the template files. It seems to have come in with baggagge.

Getting rid of the webfonts helped. But something is still screwy with Safari. And it seems to be recent. It won't even display Trebuchet MS, and that was one of the fonts used in the old site. But it's not displaying it there, either. And that site has been online since 2013. About all it seems to want to display are Arial and Verdana.  I can live with that, but it would have been nice to have some more variety.

[Nancy OShea]

When you have a URL posted for us to examine, I'll come back. But not until then.