« previous next »
Pages: [1] 2   Go Down

Author Topic: Changing font on site  (Read 2188 times)

Offline kimmer

  • Administrator
  • TS Addict
  • *****
  • Posts: 9086
    • View Profile
Changing font on site
« on: June 30, 2018, 12:44:16 PM »
Is there a way to force Safari, or I'll even use Chrome or Firefox - whichever browser will work, to use my choice in font for one particular site? I really like this site, and the recipes are grand, but the font is funky and driving me nuts. ;)  Okay, short trip, but still ....  I don't want to mess with my all-around style choices, but would sure love to view this site in just a plain ol' font.

http://cakescottage.com
Logged

Offline Xairbusdriver

  • Administrator
  • TS Addict
  • *****
  • Posts: 26388
  • 27" iMac (mid-17), Big Sur, Mac mini, Catalina
    • View Profile
    • Mid-South Weather
Re: Changing font on site
« Reply #1 on: June 30, 2018, 03:16:41 PM »
Are you talking about the text in the entry-content div? You can see the html, of course, with either the Develop menu or just by saving a page with a recipe on it with Safari->Save as... "Page source". Either way will show you the CSS styles specified for the various parts of the page.

The html starts at the html tag and proceeds as follows:
Code: [Select]
1 <head>...
 2    <body> with six different classes defined,
 3            one of which installs the font you dislike
 4            "custom-font-enabled"
 5        <div id="page" class="hfeed site">
 6            <header id="masthead" class="site-header"...
 7                <div class="wrapper" id="main">
 8                    <div id="primary" class="site-content">
 9                        <div id="content"...>
10                            <article id="" class=""
                                    [way too many classes!!!!]
11                               <header class="entry-header">
12                                    <h1 class="entry-title">
                                        [link and a text for the title
                                            such as "No Bake Chocolate
                                            Raspberry Dessert"]
                                         lots of stuff
13                                <div class="entry-content">
14                                    <p><em>[description of recipe
                                            in your favorite font?
You can always create your own CSS file and list it in Safari's prefs->Advanced: "Style sheet". Store it just about anywhere on your drive and point to it with the "Other..." choice.

I think you might get what you want by trying to over-ride the classes mentioned in lines 10 and 13 above. You could simply create a style sheet redefining "entry-title" and "entry-content" with your own font stack:
Code: [Select]
.entry-title, .entry-content
   { font-family: helvetica, monaco, sans-serif; }The font choices are yours, of course, but you should stick with ones on your OS install.

Write the above text in TextEdit and make sure to save it as .txt (not .rtf) with an appropriate name then change the suffix to ".css". Go back to Safari and use the Advanced Pref to point to that file.

Theoretically, the only thing that css file will do is over-ride any text, in any file that uses a class named "entry-title" or "entry-content". Hopefully, that recipe site will be the only one that you visit that has those two classes declared. There are ways to make these a bit more specific which may also help in making them over-ride the site's css.
Logged
THERE ARE TWO TYPES OF COUNTRIES
Those that use metric = #1 Measurement system
And the United States = The Banana system
CAUTION! Childhood vaccinations cause adults! :yes:

Offline kimmer

  • Administrator
  • TS Addict
  • *****
  • Posts: 9086
    • View Profile
Re: Changing font on site
« Reply #2 on: June 30, 2018, 04:05:02 PM »
Quote from: Xairbusdriver on June 30, 2018, 03:16:41 PM
Are you talking about the text in the entry-content div?
You have totally lost me. Unlike you and Paddy (and probably others) I've not kept up with CSS and all that and have not a clue what you are talking about. I'm talking about that curly-squiggly font that he uses all over his site. (see attachment for screen cap)

Okay, the text you shared, is that ALL I put in a plain text file? Or do I need more than that little bit of code?
Logged

Offline Xairbusdriver

  • Administrator
  • TS Addict
  • *****
  • Posts: 26388
  • 27" iMac (mid-17), Big Sur, Mac mini, Catalina
    • View Profile
    • Mid-South Weather
Re: Changing font on site
« Reply #3 on: June 30, 2018, 04:12:35 PM »
All you need in the file is the text in the second code section:
.entry-title, .entry-content { font-family: Helvetica, Monaco, sans-serif; }
Note: I changed the font name first letters to Capitals.

It can all be on one line. ;)

It should be (one of the most over-used word combo in the English language!) very safe. It will either work or not. Don't forget to refresh the page after saving the file. It might even require Quitting and re-opening Safari. :dntknw:

I just displayed the first code section to show you where stuff is in the page source. Fahgitaboutit! :)
« Last Edit: June 30, 2018, 04:19:40 PM by Xairbusdriver »
Logged
THERE ARE TWO TYPES OF COUNTRIES
Those that use metric = #1 Measurement system
And the United States = The Banana system
CAUTION! Childhood vaccinations cause adults! :yes:

Offline kimmer

  • Administrator
  • TS Addict
  • *****
  • Posts: 9086
    • View Profile
Re: Changing font on site
« Reply #4 on: June 30, 2018, 04:32:01 PM »
Followed your directions and no go. Still enjoying (cough, cough) that ugly font. (Why would someone use a font that is so unreadable and frilly for a cooking/baking -- or any -- site?)

I did find an advanced pref in Firefox that worked, so for now I'll visit his site with FF.
Logged

Offline Xairbusdriver

  • Administrator
  • TS Addict
  • *****
  • Posts: 26388
  • 27" iMac (mid-17), Big Sur, Mac mini, Catalina
    • View Profile
    • Mid-South Weather
Re: Changing font on site
« Reply #5 on: June 30, 2018, 04:38:42 PM »
Quote
Why would someone use a font that is so unreadable
It actually started with the first Mac. :rolleyes: It’s a terrible habit and it’s now cross-OS. :wallbash: As Confucius said, “Just because you can doesn’t mean you should.”
Logged
THERE ARE TWO TYPES OF COUNTRIES
Those that use metric = #1 Measurement system
And the United States = The Banana system
CAUTION! Childhood vaccinations cause adults! :yes:

Offline kimmer

  • Administrator
  • TS Addict
  • *****
  • Posts: 9086
    • View Profile
Re: Changing font on site
« Reply #6 on: June 30, 2018, 05:11:13 PM »
Quote from: Xairbusdriver on June 30, 2018, 04:38:42 PM
Quote
Why would someone use a font that is so unreadable
It actually started with the first Mac. :rolleyes: It’s a terrible habit and it’s now cross-OS. :wallbash: As Confucius said, “Just because you can doesn’t mean you should.”
:clap: :clap: :clap:
Logged

Offline Xairbusdriver

  • Administrator
  • TS Addict
  • *****
  • Posts: 26388
  • 27" iMac (mid-17), Big Sur, Mac mini, Catalina
    • View Profile
    • Mid-South Weather
Re: Changing font on site
« Reply #7 on: June 30, 2018, 06:26:00 PM »
BTW, I changed the size of a quotation in Simple_Theme, but it may be too large. What's your opinion?
Logged
THERE ARE TWO TYPES OF COUNTRIES
Those that use metric = #1 Measurement system
And the United States = The Banana system
CAUTION! Childhood vaccinations cause adults! :yes:

Offline kimmer

  • Administrator
  • TS Addict
  • *****
  • Posts: 9086
    • View Profile
Re: Changing font on site
« Reply #8 on: July 01, 2018, 05:42:47 PM »
Quote from: Xairbusdriver on June 30, 2018, 06:26:00 PM
BTW, I changed the size of a quotation in Simple_Theme, but it may be too large. What's your opinion?
On my iPad Mini it’s now too small. I will look at it later on my iMac and let you know.
« Last Edit: July 01, 2018, 06:50:08 PM by Xairbusdriver »
Logged

Offline Xairbusdriver

  • Administrator
  • TS Addict
  • *****
  • Posts: 26388
  • 27" iMac (mid-17), Big Sur, Mac mini, Catalina
    • View Profile
    • Mid-South Weather
Re: Changing font on site
« Reply #9 on: July 01, 2018, 06:45:48 PM »
OK, do you see any difference in these three images?

Several sites indicate that "x-small" is equivalent to 10px/7.5pt. With my Safari settings and the original font, it should have displayed as 14(?), my minimum setting.
Logged
THERE ARE TWO TYPES OF COUNTRIES
Those that use metric = #1 Measurement system
And the United States = The Banana system
CAUTION! Childhood vaccinations cause adults! :yes:

Offline kimmer

  • Administrator
  • TS Addict
  • *****
  • Posts: 9086
    • View Profile
Re: Changing font on site
« Reply #10 on: July 01, 2018, 09:31:08 PM »
Quote from: Xairbusdriver on July 01, 2018, 06:45:48 PM
OK, do you see any difference in these three images?

Several sites indicate that "x-small" is equivalent to 10px/7.5pt. With my Safari settings and the original font, it should have displayed as 14(?), my minimum setting.
It definitely wasn't "14", it was teeny-tiny; but I've said before that many things are unreadable/unuseable TO ME on the iPad Mini and/or iPhone.

On my iMac, it's smallish, but readable. I'll pop over and use FF and see how it looks.
Logged

Offline kimmer

  • Administrator
  • TS Addict
  • *****
  • Posts: 9086
    • View Profile
Re: Changing font on site
« Reply #11 on: July 01, 2018, 09:33:22 PM »
Okay, I'm now in FF with that new pref set, and our site is ignoring my required setting of Times size 16 always.  :Thinking:

Anyhow, it's all readable in FF.

PS: Why are we discussing this here and not in the admin design thread?
Logged

Offline Xairbusdriver

  • Administrator
  • TS Addict
  • *****
  • Posts: 26388
  • 27" iMac (mid-17), Big Sur, Mac mini, Catalina
    • View Profile
    • Mid-South Weather
Re: Changing font on site
« Reply #12 on: July 01, 2018, 09:36:38 PM »
I’m looking at the site on my iPhone 7 and things are very readable. I think it has something to do with being so close to the edge of the Earth. At least that’s what the Flat Earth folks tell me. :p
Logged
THERE ARE TWO TYPES OF COUNTRIES
Those that use metric = #1 Measurement system
And the United States = The Banana system
CAUTION! Childhood vaccinations cause adults! :yes:

Offline Xairbusdriver

  • Administrator
  • TS Addict
  • *****
  • Posts: 26388
  • 27" iMac (mid-17), Big Sur, Mac mini, Catalina
    • View Profile
    • Mid-South Weather
Re: Changing font on site
« Reply #13 on: July 01, 2018, 09:40:07 PM »
Either I started the topic in the wrong forum or I was hoping for some comments from a larger audience. And sinse I rarelie maeq mistaks, I’m going with #too!

Also looks fine on my wife’s iPad (not sure about the version, model is MD517LL/A). I think that confirms the “edge of the Earth” theory! :yes:
« Last Edit: July 01, 2018, 09:45:33 PM by Xairbusdriver »
Logged
THERE ARE TWO TYPES OF COUNTRIES
Those that use metric = #1 Measurement system
And the United States = The Banana system
CAUTION! Childhood vaccinations cause adults! :yes:

Offline Paddy

  • Administrator
  • TS Addict
  • *****
  • Posts: 13797
    • View Profile
    • https://www.paddyduncan.com
Re: Changing font on site
« Reply #14 on: July 02, 2018, 07:12:40 PM »
To return to the original question, I just found a very nifty FF and Chrome add-on. Font Changer - changes the fonts to anything you want in the list (it's the Google fonts list, so none of the big name fonts like Helvetica are there, but nice ones like Lato are, so no worries)

https://addons.mozilla.org/en-US/firefox/addon/font-changer/

Works a treat! ALL the fonts on that cakes site are dreadful!

https://chrome.google.com/webstore/detail/font-changer-with-google/jgjhhoglgjdklldfgoffdiaceffijeke?hl=en - even better as you can specify weight, size etc.

And then I went looking for a Safari extension and found Stylish - which allows you to save CSS for particular websites - so you don't have to fix it every time you visit. :)

You can find the link to it here, along with some other useful extensions: https://medium.com/appsntips/10-best-safari-extensions-which-are-actually-useful-in-2018-f343dc254c9c

This CSS took care of most of the ick:

Code: [Select]

body.custom-font-enabled {
font-family: Helvetica, Arial, sans-serif!important;
}
p {
font-family: arial, sans-serif;
}

Logged
"If computers get too powerful, we can organize them into committees. That'll do them in." ~Author unknown •iMac 5K, 27" 3.6Ghz i9 (2019) • 16" M1 MBP(2021) • 9.7" iPad Pro • iPhone 13
Pages: [1] 2   Go Up
« previous next »