So I finally got the Birch font installed on my WordPress site. Now the font isn't sizing as I would expect it to be (click here). I have tried editing font-size, line-height, font-weight, font-style, ... Nothing seems to work. Strange thing is, on iPhone it works like a charm.
In my header I have added this.
<style type="text/css" media="screen, print">
#font-face {
font-family: Birch;
src: url('../wp-content/themes/zenon-lite/fonts/birch.ttf') format('truetype'),
url('../wp-content/themes/zenon-lite/fonts/birch.eot') format('embedded-opentype'),
url('../wp-content/themes/zenon-lite/fonts/birch.woff') format('woff'),
url('../wp-content/themes/zenon-lite/fonts/birch.svg') format('svg');
font-weight: normal;
font-style: normal;
}
body { font-family: Birch, Tahoma; }
p {font-size: 1.5em;}
</style>
You've set the font-size on the body but nowhere else. Therefore your typographical elements are being rendered at the browser default size. You need to define the sizes on the individual components too, for example:
CSS:
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
Related
I want to use a custom font on safari to increase readability, but Safari doesn't seem to have an easy way to change fonts. I tried to use Safari's support for custom CSS stylesheets but the font still isn't rendering, what am I doing wrong with this?
#font-face {
font-family: 'Comic Code Ligatures';
font-style: normal;
font-weight: normal;
src: local('Comic Code Ligatures'), url('./Comic Code Ligatures.otf') format('opentype');
}
body {
font-family: 'Comic Code Ligatures';
font-size: 16px;
}
My custom font (Gilroy, purchased on myfonts) is having issues across browsers. The font is thicker and bigger in Chrome than on other browsers.
The font size is the same, but your letters in Chrome are bolder than in Firefox. That's because you are importing your fonts wrong.
Currently you are using:
#font-face {
font-family: "Cobury Regular";
src: url(https://cobury.com/wp-content/uploads/2020/03/3B2CCC_0_0.woff) format("woff");
font-weight: 400;
font-style: normal;
}
#font-face {
font-family: "Cobury Bold";
src: url(https://cobury.com/wp-content/uploads/2020/03/3B2CD0_0_0.woff) format("woff");
font-weight: 400;
font-style: normal;
}
... {
font-family: "Cobury Regular";
}
... {
font-family: "Cobury Bold";
}
But the correct way would be:
#font-face {
font-family: "Cobury";
src: url(https://cobury.com/wp-content/uploads/2020/03/3B2CCC_0_0.woff) format("woff");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "Cobury";
src: url(https://cobury.com/wp-content/uploads/2020/03/3B2CD0_0_0.woff) format("woff");
font-weight: bold;
font-style: normal;
}
... {
font-family: "Cobury";
font-weight: normal;
}
... {
font-family: "Cobury";
font-weight: bold;
}
Always use font with their actual font-weight. Don't treat the same font with different weight and style like different fonts.
Your .woff font files have implemented meta tags inside, which telling the browser what thickness the letters have. If the provided font-weight in the import statement #font-face doesn't match with that, browsers will treat that differently, because there is no standard for that. (Chrome tries to handle the situation by adding a additional thickness to the already bold font, for whatever reason.)
Edit:
I'm seeing that you use h1, .text-logo #logo { font-weight: 900; ... in your CSS but you have never defined the font with the weight number 900. Please use only the weights you have provided via #font-face. (With my suggestion it would be normal and bold)
So I wanted a custom glyphicon and used icomoon to do so. Instead of importing the entire library to the server, I simply used a stylesheet import to make things easier.
Now the stylesheet on icomoon only allowed the style.css link to be open for 24 hours, so I simply took the contents of the style.css file and put it on a custom domain.
Old style.css:
<link rel="stylesheet" href="https://i.icomoon.io/public/temp/8e91637825/UntitledProject/style.css">
New style.css
<link rel="stylesheet" href="http://thecommentsection.co.uk/style.css">
This is the contents of the style.css:
#font-face {
font-family: 'icomoon';
src: url('https://i.icomoon.io/public/temp/8e91637825/UntitledProject/icomoon.eot?kxcvpn');
src: url('https://i.icomoon.io/public/temp/8e91637825/UntitledProject/icomoon.eot?kxcvpn#iefix') format('embedded-opentype'),
url('https://i.icomoon.io/public/temp/8e91637825/UntitledProject/icomoon.ttf?kxcvpn') format('truetype'),
url('https://i.icomoon.io/public/temp/8e91637825/UntitledProject/icomoon.woff?kxcvpn') format('woff'),
url('https://i.icomoon.io/public/temp/8e91637825/UntitledProject/icomoon.svg?kxcvpn#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-rubyit:before {
content: "\1f4a3";
}
The Issue
The only thing I changed on the stylesheet import is the href link, but for some reason changing the link from the old to new suddenly stops the glyphicon from working?
Any ideas?
So I'm having problems understand why IE is ignoring my CSS here. I have this code:
<h2>Har du stadsnät eller kan du få det?</h2>
I.e. nothing weird or anything.
And here is the resulting rendering:
But here is the CSS code for this HTML:
.rubrik, h2 {
font-family: Lato;
font-size: 32px;
font-weight: normal;
line-height: 38px;
font-variant: normal;
font-style: normal;
color: #969696;
}
Which clearly states that the H2 should have "normal" as font weight, yet the rendered text is clearly bold, here is a correct rendering (from Safari)
So, using the included developer tools of Internet Explorer 8, I inspect the CSS interpretation, and that looks like this:
As I understand it, what I am looking at here is IE8's interpretation of my CSS, and suspiciously missing is the "normal" attribute. IE has converted the CSS to the one-line version of "font" but didn't include the "normal" part. Now, the font "Lato" is a font-face font, and the font-face CSS is here:
#font-face {
font-family: Lato;
src: url('/media/fonts/Lato.eot');
src: local('nofont'), url('/media/fonts/Lato.ttf') format('truetype');
}
#font-face {
font-family: Lato;
src: url('/media/fonts/Lato-Bold.eot');
src: local('nofont'), url('/media/fonts/Lato-Bold.ttf') format('truetype');
font-weight: bold;
}
#font-face {
font-family: Lato;
src: url('/media/fonts/Lato-Bold-Italic.eot');
src: local('nofont'), url('/media/fonts/Lato-Bold-Italic.ttf') format('truetype');
font-weight: bold;
font-style: italic;
}
#font-face {
font-family: Lato;
src: url('/media/fonts/Lato-Italic.eot');
src: local('nofont'), url('/media/fonts/Lato-Italic.ttf') format('truetype');
font-style: italic;
}
Even when specifying "normal" in the font-face declaration for font-weight, it doesn't work. So I'm stuck here, trying to figure out what I am doing wrong not to have IE include "font-weight: normal" in the declaration for H2... Any guesses? Thanks in advance...
I think you need to change the name of the font-family: Lato; on each fontface property, as IE is possibly getting confused. Instead try putting font-family: Lato-bold;, font-family: Lato-italic etc. Also, if the font has a bold face (like Lato does and you have referenced in the fontface properties) then you do not need to add font-weight: bold; for a fontface property, as the font is already bold and adding the font-weight will just add faux-bold and make it look bad.
This means that for your h2, you only need to put font-family: Lato; if you want it to be the normal, non-bold version.
This may be an inheritance issue. Have you tried putting the !important keyword.
font-weight: normal !important;
I'm developing a responsive site and don't have a mobile device myself. (Still living in the dark ages as it were) Anyway, my colleague has sent me a screen shot of the site on an ipad.
The leading/line-height is awful, but looks fine in regular Safari. Here's some of the pertinent (I think) CSS:
#font-face {font-family: 'Rubrik-Regular';src: url('fonts/237360_5_0.eot');src: url('fonts/237360_5_0.eot?#iefix') format('embedded-opentype'),url('fonts/237360_5_0.woff') format('woff'),url('fonts/237360_5_0.ttf') format('truetype'); font-style: normal; font-weight: normal; }
#font-face {font-family: 'Rubrik-Medium';src: url('fonts/237360_6_0.eot');src: url('fonts/237360_6_0.eot?#iefix') format('embedded-opentype'),url('fonts/237360_6_0.woff') format('woff'),url('fonts/237360_6_0.ttf') format('truetype'); font-style: normal; font-weight: bold; }
#font-face {font-family: 'Rubrik-Bold';src: url('fonts/237360_7_0.eot');src: url('fonts/237360_7_0.eot?#iefix') format('embedded-opentype'),url('fonts/237360_7_0.woff') format('woff'),url('fonts/237360_7_0.ttf') format('truetype'); font-style: normal; font-weight: bold; }
html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
html{font-size:81.25%;-webkit-text-size-adjust:81.25%;-ms-text-size-adjust:81.25%} /* shrink to ~13px body font without changing all other sizes */
/* 16px base font size with 162.5% (26px) line height */
body, button, input, select, textarea { font: 1em/1.6154em 'Rubrik-Regular', Arial, Verdana, sans-serif; color: #262626; }
Here's a side by side comparison:
live demo link
Why isn't the line height being respected?
This seems to have resolved it:
html{ font-size: 16px; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%}
I had mistakenly tried to adjust the font size down like so:
html{ font-size: 82.5%; -webkit-text-size-adjust:82.5%; -ms-text-size-adjust:82.5%}
And the size adjust parameter was sneakily killing my typography on mobile devices.