 Font question |
  |
| Lee Batchelor |
 Jan 19 2023, 01:00 PM
Post
#1
|
|
Member  Group: Members Posts: 82 Joined: 10-May 20 Member No.: 27,332  |
Hi again all,
In my CSS sheet, I specify a font for a certain page. Here's a sample code: .center {font-family: "Segoe UI"; font-size: 13pt; color: #262626; text-align: center;} When the page is uploaded, Safari on any Apple device or Edge on a Windows PC changes the font to some ugly dated piece of junk like Times New Roman! I know browsers are configurable but can I amend my CSS code to specify that "I want a certain font used despite the horrible choices of the browser, so stop changing them!?" Note On my iPad, the browser leaves the fonts as I coded them above. So, what gives? Thanks. |
  |
 
|
| pandy |
Jan 19 2023, 01:06 PM
Post
#2
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,753 Joined: 9-August 06 Member No.: 6 |
I guess you don't have that font installed on the devices that don't show it. That people don't have the same fonts installed is the reason you should always list backup fonts, especially a generic font-family.
|
|
|
|
| Lee Batchelor |
Jan 19 2023, 01:15 PM
Post
#3
|
|
Member Group: Members Posts: 82 Joined: 10-May 20 Member No.: 27,332 |
I wondered that too, Pandy. I know that the Segoe UI font was invented by Microsoft specifically for the Windows OS. I wonder if it is too specific, like you said. I should change it to a more commonly used font like Calibri?
Thanks! |
|
|
|
| pandy |
Jan 19 2023, 01:33 PM
Post
#4
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,753 Joined: 9-August 06 Member No.: 6 |
Have you checked if you have it on those other machines? I checked and I actually have it, but I confess I never heard its name before.
You don't need to change, if you don't want to. Just list any number of fonts you want and a generic font-family at the end. In this case that would be sans-serif. That way you ensure you won't ever get Times New Roman.  Like this. https://htmlhelp.com/reference/css/font/font-family.html The browser looks for the first font in the list. If it's present it's displayed. If it isn't it looks for the second font and so on. If none of the named fonts are present you will at least get a sans-serif font. |
|
|
|
| Jason Knight |
Jan 19 2023, 10:42 PM
Post
#5
|
|
Advanced Member Group: Members Posts: 109 Joined: 25-December 22 Member No.: 28,719 |
You didn't include a fallback family, so of course it falls back on the default.
1) Segoe UI is a windows system font. If you're not on Microsoft Windows, 99.9999% of the time you do not have that font! 2) you never just declare ONE font, at least include a generic family appropriate to if the font you say is unavailable. In this case, the appropriate fallback is "sans-serif" 3) If you really care about using the same font on all systems, might I suggest adding a webfont? All that said, even just your little snippet raises some worries. Like your use of PT for font-size which is "inches" based (1 point == 1/72th of an inch) and really should only be used for print. They're called EM or REM, use 'em! A class called "center"? You might as well go back to writing HTML 3.2 with font/center tags. That's why HTML/CSS frameworks like failwind or bootcrap are such utter mental midgetry. If you're using classes to say what you want things to look like, you're likely doing things all wrong! That's not on you, that's on web rot tutorials, career educators, and snake oil peddlers that are 25 years out of date. Anyhow, the easiest way to fix this would probably be to just use a Google font. For sans-serif text I'm kind of fond of "Poppins". Just put the link tags their system hands you in the <head> of your document, and then set a stack as: font-family:"poppins",arial,helvetica,sans-serif; If the webfont "poppins" doesn't load it falls back on whichever of those it can find, with sans-serif being the generic type. ALWAYS include a generic fallback family. This post has been edited by Jason Knight: Jan 19 2023, 10:43 PM |
|
|
|
| Lee Batchelor |
Jan 19 2023, 11:19 PM
Post
#6
|
|
Member Group: Members Posts: 82 Joined: 10-May 20 Member No.: 27,332 |
Wow, thanks for the great advice guys! I wondered about the use of pt vs. em.
Jason, all I've ever seen when using CSS to control appearance is class="" in the html code. What other way is there? I check all my code through W3C. I know using it only checks for errors and warnings but doesn't guarantee the best approach. Further comments most welcome. Keep in mind, this is a very simple website for a band. It's not a heavy weight, e-commerce site. Thanks... |
|
|
|
| Jason Knight |
Jan 20 2023, 01:58 AM
Post
#7
|
|
Advanced Member Group: Members Posts: 109 Joined: 25-December 22 Member No.: 28,719 |
QUOTE(Lee Batchelor @ Jan 19 2023, 11:19 PM)  Jason, all I've ever seen when using CSS to control appearance is class="" in the html code. Classes (and ID's) should say what things are, not what they look like. The same should go for your tags. If you choose a tag based on its default appearance, you're choosing all the wrong tags for all the wrong reasons. Likewise don't throw classes in if you can leverage semantics or CSS selectors instead. It's why trash like this used by the likes of bootstrap and tailwind: class="text-center text-l color-400-red" Is a monument to 1997 markup practices, recreating everything that was wrong with HTML 3's <center><font size="+2" color:#F21"> Using it to say what sections are or unique elements are, and why they MIGHT receive a style results in smaller markup, faster loading, better leveraging of caching, and opens the door to multiple appearances for a lot less work. It's why I consider HTML/CSS frameworks to be scams and the creators of such like Adam Wathan to be outright frauds. It's no different than how you shouldn't slop endless pointless DIV into the HTML if tags that actually mean something could be used instead. Thus if you actually need a class, say what the content is, or why it might get style, not what that style IS. This post has been edited by Jason Knight: Jan 20 2023, 01:59 AM |
|
|
|
| pandy |
Jan 20 2023, 02:04 AM
Post
#8
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,753 Joined: 9-August 06 Member No.: 6 |
QUOTE(Jason Knight @ Jan 20 2023, 04:42 AM) A class called "center"? You might as well go back to writing HTML 3.2 with font/center tags. Well, you don't know what he uses that class with, do you? If he puts it on every paragraph, yes. But we don't know that. Besides, everyone must start somewhere. I'd say most of us started with appearance. Maybe even you. |
|
|
|
| Lee Batchelor |
Jan 20 2023, 10:12 AM
Post
#9
|
|
Member Group: Members Posts: 82 Joined: 10-May 20 Member No.: 27,332 |
Great discussion, guys! I really appreciate your time.
I was trained in the conventional way. I took a college course 12 years ago, where I received the basics. I had to learn the rest by myself and of course with the help of this site. Jason, you sound like an advanced level developer who has discovered more efficient ways that bucks conventions, to build a website. My hat's off to you. I wonder if most developers are drifting away from my conventional approach? I can see using native tags but there are so many occasions where things don't look right from a technical writing aspect. Perhaps you can steer me to sites that teach your methodology. I'd be most receptive. Thanks again for the insight guys! |
|
|
|
| pandy |
Jan 20 2023, 11:30 AM
Post
#10
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,753 Joined: 9-August 06 Member No.: 6 |
What do you mean when you say conventional ways? The HTML part is pretty much what it always was. Only we don't use ugly tricks with it anymore the accomplish what CSS do better and more efficiently. CSS on the other hand is constantly developing. Which doesn't mean you need to use the latest and most advanced and definitely doesn't mean you have to start in that end. You'll probably hurt yourself if you do. A good place to start is with the basics and then add to that foundation.
|
|
|
|
| Lee Batchelor |
Jan 20 2023, 12:42 PM
Post
#11
|
|
Member Group: Members Posts: 82 Joined: 10-May 20 Member No.: 27,332 |
QUOTE You'll probably hurt yourself if you do. Good one 🤣.Fully agreed, Pandy. I think my original training is still valid and the basis for building most websites. I have taken Jason's advice and started converting my pt units to em. I'm doing so on a PC. The difference is subtle but still there. Should be interesting to see the results on mobile devices. Thanks... |
|
|
|
| Lee Batchelor |
Jan 20 2023, 01:10 PM
Post
#12
|
|
Member Group: Members Posts: 82 Joined: 10-May 20 Member No.: 27,332 |
One more question, if I may. In converting to font-size in em units, if I don't want to depend on the default base size of 16pt always holding true, where and how do I write the code to specify this? Syntax?
I find that there literally hundreds of excellent code examples on the net, but virtually no one tells you where they have to go. It's not always obvious, other than I can tell the difference between HTML and CSS syntax. We're not all experts! Thanks... |
|
|
|
| pandy |
Jan 20 2023, 01:17 PM
Post
#13
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,753 Joined: 9-August 06 Member No.: 6 |
QUOTE(Lee Batchelor @ Jan 20 2023, 06:42 PM) QUOTE You'll probably hurt yourself if you do. Good one 🤣.Fully agreed, Pandy. I think my original training is still valid and the basis for building most websites. I have taken Jason's advice and started converting my pt units to em. I'm doing so on a PC. The difference is subtle but still there. Should be interesting to see the results on mobile devices. Thanks... I'm not sure, but I think browsers since long treat pt as px. There used to be a mess when pt was used for screen. It's really meant for print style sheets where it is meaningful. |
|
|
|
| coothead |
Jan 20 2023, 01:19 PM
Post
#14
|
|
Advanced Member Group: Members Posts: 226 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
Hi there Lee Batchelor,
coothead |
|
|
|
| pandy |
Jan 20 2023, 01:43 PM
Post
#15
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,753 Joined: 9-August 06 Member No.: 6 |
QUOTE(Lee Batchelor @ Jan 20 2023, 07:10 PM) One more question, if I may. In converting to font-size in em units, if I don't want to depend on the default base size of 16pt always holding true, where and how do I write the code to specify this? Syntax? I find that there literally hundreds of excellent code examples on the net, but virtually no one tells you where they have to go. It's not always obvious, other than I can tell the difference between HTML and CSS syntax. We're not all experts! Thanks... I don't follow. The default base size of 16pt? Were does that come from? You can set a font size for BODY. Then all other relative font sizes (like em, ex, %) will relate to that somehow, although not always directly. But you don't need to set a font size for BODY. You don't know what the user's browser settings are anyway or if they chose to change text size for just your page (some browsers still have that feature, not only zoom), so can never know exactly how large the letters will be on his screen. Anyway, an em value is relative to the font size of the parent element. So if you have for example this rule... CODE p em { font-size: 1.1em } and have things like this in the HTML... HTML <p> T'was brillig and the <em>slithy toves</em> did gyre and gimble in the wabe.</p> ... the text that you want to be emphasized within paragraphs, and for that you use the EM element, will be 10% larger than the rest of the text in that paragraph, no matter what the font size of the P is. |
|
|
|
| Lee Batchelor |
Jan 20 2023, 01:56 PM
Post
#16
|
|
Member Group: Members Posts: 82 Joined: 10-May 20 Member No.: 27,332 |
Wow, I feel like such a dummy. Great info thanks!
I read about the default size of 16px (not pt, I messed that up) being common in browsers. I agree that zoom settings are going to mess that up. Hence, why I wanted to specify the defaults, which will "travel" with my site. Coothead, thanks so much for that code! Fortunately, my site is very small and simple, so it's a good place to learn these finer details. Edit I just tried the code and html you gave me, Pandy and the content ended up in italic font. How come? This post has been edited by Lee Batchelor: Jan 20 2023, 02:01 PM |
|
|
|
| pandy |
Jan 20 2023, 02:29 PM
Post
#17
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,753 Joined: 9-August 06 Member No.: 6 |
There are also browser style sheets. This never ends, you see that now, right?
 Even before CSS browser had to format elements to make them stand out. Now we call that browser style sheets. But now we can override them. For EM it's common to use italic. But that's not a rule. There could some day be a browser that chooses bold and red instead. It's browser style sheets that make headings large and bold and make paragraph have margins. It's also this that make some elements block level and "break the line", like P and H(n). Without this browser styling all text would run together on a plain HTML page. There would just be a long stream of letters. Author style sheets (that's YOUR CSS) always override browser style sheets. Try for instance the below on a page with several paragraphs and see what happens. CODE p { margin: 0; display: inline } |
|
|
|
| Lee Batchelor |
Jan 20 2023, 02:57 PM
Post
#18
|
|
Member Group: Members Posts: 82 Joined: 10-May 20 Member No.: 27,332 |
Thanks, Pandy. I'll try that.
I just found another issue...and sorry to be such a pain! I updated my font units to "em" and everything looked great except in Safari on the iPad!!! The stupid browser overrides my CSS font choice and subs in a terrible and dated piece of crap serif font - looks like TNR. Why the heck does that happen? Can I stop it? It's as though my CSS sheet is ignored when it comes to font style. I know some of these browsers have an override but that's a pain! I'm using Calibri this time. So, how do you tell browsers to get lost and obey my font choice? If it can't be done, why specify it in the first place? Thanks...😖. |
|
|
|
| coothead |
Jan 20 2023, 04:04 PM
Post
#19
|
|
Advanced Member Group: Members Posts: 226 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
QUOTE . So, how do you tell browsers to get lost and obey my font choice? . If it can't be done, why specify it in the first place? Thanks...😖.
coothead |
|
|
|
| pandy |
Jan 20 2023, 04:09 PM
Post
#20
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,753 Joined: 9-August 06 Member No.: 6 |
Yeah, did you use backup fonts as we talked about up there at the top of the thread somewhere?
 If you did, please post the rule you used. You may have some syntax error in it. |
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 25th September 2024 - 07:40 PM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC