Help to modify CSS in WordPress

CMS & WordPress
25

I have looked for the Orkney font and downloaded it, but I find that it has four different files. Which one should I upload to do what you mentioned, or should I do it with all of them? If I want to add a second font, how should I do it?

Screenshot_20231228_184215_My Files
Screenshot_20231228_184215_My Files1079×1061 136 KB

To achieve the standard paragraph format I mentioned in the previous post, should I include something like the following in the CSS sheet?:

p {
   font-family: orkney, serif;
   font-weight: normal;
   font-style: normal;
}

Or are the “readable” size and justified alignment of paragraphs not defined?

26

Choose whether you want light, regular, medium or bold.

Follow the w3schools guidance (see post #22). You will need to choose a name such as MyFirstFont. Do not include font-weight as that is defined (essentially) by whether you decide to use the light, regular, medium or bold file. To get italic you can use font-wieght: italic; .

Treat the light, regular, mediium and bold versions of Orkney as four separate fonts. You can use more than one of them but you will need a separate @font-face rule for each of them, choosing different names for each. Make sure you upload all the font files that you wish your website to use. If you use simple relative URLs, upload to the same folder on your server as the web pages.

You can use files for other font designs if you wish.

I suggest you include CSS to declare the font size (or sizes) you want with regard to the appearance of your web pages. For readability I do not like to use font sizes less than 14px (=0.875rem) but 12px (=0.75rem) is usually regarded as acceptable for the majority of text on a web page (reference)

Use CSS text-align if you do not wish to have default left alignment.

27

I found this https://www.fontsquirrel.com/fonts/orkney with differet CSS stylesheets to use fonts with @font-face "A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches"

We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:

<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />

3. Modify your own stylesheet
To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that web font name to the font stack in the "font-family" property, inside the selector you want to change. For example:

p { font-family: 'MyWebFont', Arial, sans-serif; }

This is what you say but hosted in another server, right? Is it a good idea to reproduce the code but selfhosted? What I need to modify?

Wich are the difference between px,em and rem units for webfonts? Wich unit is better to compatibility with desktop and mobile devices, without the need to declare each one separately?

Then for paragraphs or “normal text” I must use this in CSS?:

p {
   font-family: orkney, serif;
   font-size: 14px;
   font-weight: normal;
   font-style: normal;
   text-align: justify-all;
}

Then all the text that are not explicitly modified or have h1,h2…tag have this style?

28

No, you should download the font from the button on that page, and upload it to your site.

I’ve used Font Squirrel fonts without a problem in the past, simply following their instructions, but I don’t use Wordpress.

29

Im using wordpress, but I dont think there are too much difference.
“So, what is the CSS proposed by Font Squirrel used for?”

30

No, but I’m not used to working with themes and child themes, so if you need guidance, somebody else will need to provide it.

I’m not sure I understand your question.

As I understand it, your site is already supposed to be using the Orkney font, but the font is not available. You need to make the font available by uploading it to your site. Font Squirrel tells you how to do this, and then gives an example of how to use the new font in your CSS. How you actually use it is up to you. You will need to check that the font name is exactly the same in your CSS as it is in the Font Squirrel file.

(As Orkney is a sans serif font, it would make sense to make your fallback font sans serif, rather than serif.)

31

Do you mean that

@font-face {
    font-family: 'orkneyregular';
    src: url('orkney-regular-webfont.eot');
    src: url('orkney-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('orkney-regular-webfont.woff2') format('woff2'),
         url('orkney-regular-webfont.woff') format('woff'),
         url('orkney-regular-webfont.ttf') format('truetype'),
         url('orkney-regular-webfont.svg#orkneyregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

is only to make the font available once I have uploaded the font to my server? If I want to upload the medium, light and bold version of the font, Is it enough to copy the CSS of each one like the one above, or would they conflict? The same goes if I want to add another font family?

Is it ok?

32

Yes.

You might find it helpful to read up on @font-face, to get a better understanding of how it works. I think this article answers your other questions.

1 Like
33

Ok, then for this case will be?:

@font-face {
    font-family: 'orkneyregular';
    src: url('orkney-regular-webfont.eot');
    src: url('orkney-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('orkney-regular-webfont.woff2') format('woff2'),
         url('orkney-regular-webfont.woff') format('woff'),
         url('orkney-regular-webfont.ttf') format('truetype'),
         url('orkney-regular-webfont.svg#orkneyregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'orkneymedium';
    src: url('orkney-medium-webfont.eot');
    src: url('orkney-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('orkney-medium-webfont.woff2') format('woff2'),
         url('orkney-medium-webfont.woff') format('woff'),
         url('orkney-medium-webfont.ttf') format('truetype'),
         url('orkney-medium-webfont.svg#orkneymedium') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'orkneylight';
    src: url('orkney-light-webfont.eot');
    src: url('orkney-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('orkney-light-webfont.woff2') format('woff2'),
         url('orkney-light-webfont.woff') format('woff'),
         url('orkney-light-webfont.ttf') format('truetype'),
         url('orkney-light-webfont.svg#orkneylight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'orkneybold';
    src: url('orkney-bold-webfont.eot');
    src: url('orkney-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('orkney-bold-webfont.woff2') format('woff2'),
         url('orkney-bold-webfont.woff') format('woff'),
         url('orkney-bold-webfont.ttf') format('truetype'),
         url('orkney-bold-webfont.svg#orkneybold') format('svg');
    font-weight: normal;
    font-style: normal;

}

weight and style should remain as normal because there is already a bold, light, etc… font?

34

The example in the linked article shows different font-weight settings for regular and bold.

This article might help:

35

I must do this to avoid faux italic and bold browser styles?

36

I don’t see how that differs from the sample code given in the first article I linked. Can you be more specific?

(Your article is from 2010, and the Codrops reference is from 2015. As a general rule, I would always go with the most recent source.)

Does your site design actually use the italic and bold versions of the Orkney font? If not, you don’t need to worry about them at all.

37

Well, I think I’ve finally managed to upload the Orkney and Raleway fonts and configure them to be used correctly. However, I’ve encountered the problem that the Orkney downloaded through squirrelfont is only in WOFF format, even though I ask it to download the rest. I’ve tried converting it through transfonter.org, and it downloads all formats except WOFF. Now I have two Orkney fonts, one with the WOFF extension and the other with all the other formats. How can I solve this? If I rename the WOFF file to match the other formats, would it work correctly with the CSS, or would there be any issues?

Currently, I have the CSS rules like this:

@font-face {
    font-family: 'orkneyregular';
    src: url('../web fonts/orkney-regular-webfont.eot');
    src: url('../web fonts/orkney-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../web fonts/orkney-regular-webfont.woff2') format('woff2'),
         url('../web fonts/orkney-regular-webfont.woff') format('woff'),
         url('../web fonts/orkney-regular-webfont.ttf') format('truetype'),
         url('../web fonts/orkney-regular-webfont.svg#orkneyregular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;

}

@font-face {
    font-family: 'Orkney';
    src: url('web fonts/subset-Orkney-Regular.eot');
    src: local('Orkney-Regular'),
        url('web fonts/subset-Orkney-Regular.eot?#iefix') format('embedded-opentype'),
        url('web fonts/subset-Orkney-Regular.woff2') format('woff2'),
        url('web fonts/subset-Orkney-Regular.ttf') format('truetype'),
        url('web fonts/subset-Orkney-Regular.svg#Orkney-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* raleway-regular - latin_latin-ext_vietnamese */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: url('../web fonts/raleway-v29-latin_latin-ext_vietnamese-regular.eot'); /* IE9 Compat Modes */
  src: url('../web fonts/raleway-v29-latin_latin-ext_vietnamese-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../web fonts/raleway-v29-latin_latin-ext_vietnamese-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../web fonts/raleway-v29-latin_latin-ext_vietnamese-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../web fonts/raleway-v29-latin_latin-ext_vietnamese-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../web fonts/raleway-v29-latin_latin-ext_vietnamese-regular.svg#Raleway') format('svg'); /* Legacy iOS */
}
/* raleway-italic - latin_latin-ext_vietnamese */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 400;
  src: url('../web fonts/raleway-v29-latin_latin-ext_vietnamese-italic.eot'); /* IE9 Compat Modes */
  src: url('../web fonts/raleway-v29-latin_latin-ext_vietnamese-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../web fonts/raleway-v29-latin_latin-ext_vietnamese-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../web fonts/raleway-v29-latin_latin-ext_vietnamese-italic.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../web fonts/raleway-v29-latin_latin-ext_vietnamese-italic.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../web fonts/raleway-v29-latin_latin-ext_vietnamese-italic.svg#Raleway') format('svg'); /* Legacy iOS */
}
/* raleway-700 - latin_latin-ext_vietnamese */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  src: url('../web fonts/raleway-v29-latin_latin-ext_vietnamese-700.eot'); /* IE9 Compat Modes */
  src: url('../web fonts/raleway-v29-latin_latin-ext_vietnamese-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../web fonts/raleway-v29-latin_latin-ext_vietnamese-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../web fonts/raleway-v29-latin_latin-ext_vietnamese-700.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../web fonts/raleway-v29-latin_latin-ext_vietnamese-700.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../web fonts/raleway-v29-latin_latin-ext_vietnamese-700.svg#Raleway') format('svg'); /* Legacy iOS */
}
38

Did you read the information provided on the download page?

Formats:
WOFF - Recommended, works in all modern browsers
TTF - Not recommended, replaced by WOFF
EOT - Not recommended, only necessary for IE older than IE9
SVG - No longer supported or required for any browser

Are you sure you need both Orkney and Raleway fonts? As far as I can see, you’re using them in the same font-family declaration. The point of providing more than one font name is that it indicates an alternative font for use if the first one listed is unavailable. If you’re uploading Orkney, it should always be available, so I don’t see the point in also uploading Raleway. Perhaps I’m missing something.

39

Well, according to this link, for example, whose last modification was on December 1, 2023, it says the following:

Screenshot_20231231_234537_Chrome
Screenshot_20231231_234537_Chrome1079×807 112 KB

And I believe developer.mozilla.org is a reliable source, isn’t it?

I prefer to cover the options if possible, so that each device can use the one that is most compatible, and even if it’s an older device, it has the most suitable format available.

I don’t do it. I use each one in a separate font-family, allowing them to be used individually. That’s why I have declared a @font-face for each font-family.

Currently, I use them as a backup due to the issue I mentioned in my previous message. Once I solve it, I’m thinking of using one for titles and the other for texts, adding sans-serif as a backup for each, for example.

41

Yes, it is. If you check out the chart at the bottom of this related page, you’ll see that while those two systems are the only ones to support SVG fonts, they also support WOFF format, like every other browser.

Fair enough. Your earlier posts indicated that you are a novice, and I just wanted to ensure you understood how the code works.

For whatever reason, you seem to be uncomfortable with the advice I’ve been offering, so I’ll bow out here and let someone else take over.

42

Nothing could be further from the truth. I appreciate all advice, no matter where it comes from. If I sometimes disagree with someone’s opinion, it’s not because I think they are wrong and I am right, but because I want to learn to the fullest without taking any conclusion for granted until I have no doubt.

For example, in the case of Font Squirrel, it only downloads the WOFF format and justifies not downloading the rest based on the annotation in the screenshot you shared earlier. It makes sense as WOFF is a modern format that saves space, among other features, and is widely supported, unlike older formats or the newer WOFF2. However, it’s not lost on me that the WebKit you can download includes CSS to integrate it into your project, and that CSS includes lines dedicated to each of those formats it recommends not using and doesn’t offer for download. That makes you think, doesn’t it?

I will always consider myself a novice. I am self-taught, and even though I continue learning over time, I don’t think there will be a moment when I consider myself an expert because there will always be things to learn.

44

Does anyone see in my CSS any rule conflicting with another or that should be declared differently?

https://www.fotov60.com/wp-content/themes/fotov60/style.css?ver=4.4

For example, I see this:

.lastfm-link a {
  background-image: url('images/lastfm.gif');
}

I think it’s unnecessary because I don’t use any link to lastfm, so it just adds unnecessary weight to the CSS file, right?

For the text size of the posts, what size and units should I use to ensure it looks equally good on both desktop and mobile versions? Is there a size that adjusts based on the screen size and resolution?

45

You should not self customize if you are not an expert about themes. Please have backup before customizing anything

46

I hired a freelancer to adapt my website, including the CSS stylesheet, and having given precise instructions, I believed they had made the necessary modifications. Later, I found out that there are elements they didn’t modify correctly, such as the case of @font-face. Even though I specified the fonts to use, they simply put the font name in the font-family of h1, for example. Since the fonts weren’t declared, it had no effect on the titles. That’s why I’m now working on refining the CSS to achieve the desired outcome and removing unnecessary CSS. I seek advice from anyone kind enough to take a look. I’ve already backed up the file before starting the modifications, but I would like to confirm the changes before applying them, as mentioned in my previous post, to ensure I’ve interpreted it correctly.