1

www.oihanevalbuenaredondo.be

I have made a font for my post titles in the css with font-family: adobe arabic, on my windows, the title shows exactly how it should be, however, when I visit my blog on a mac, the title is just in a boring basic font, it isn't in 'Adobe arabic'. Why can safari not show the title in Adobe Arabic?

This is in document style.css:

.entry-title {
font-family: adobe arabic;
text-align: center;
letter-spacing: 1px;
color: #7f7f7f;
font-size: 28px;
position: relative;
margin: 0 0 10px 0;
padding: 0 60px;
}

.entry-title a:hover {
color: #d9d9d9;
}

And, I've got another question. If you're on a windows you will not see it, but the language option at the top of my page, is perfectly positioned on my windows, but on a mac, the position of the border and the dropdown are not even, one of them is more to the left.

this is the css i have for the border:

.topbar {
position: absolute;
right: 170px;
top:-8px;
font-size: 11pt;
color: #E1BDC3;
border: 1px dotted #999999;
border-radius:8px;
width: 255px;
height: 48px;
padding-top: 11px;
padding-left: 10px;
z-index: 1000;}

This is what I've got for the dropdown:

.widget_polylang {
position: absolute;
top: -330px;
width: 150px;
right: 20px;
z-index: 10001;}

This code is to position a widget. Because the dropdown can only be added to my blog with a widget. So I positioned the widget.

Maybe I did something wrong in the css, I don't know, I'm a beginner in HTML, this just worked fine for me on windows, but apparently it isn't right on mac.

Oihane
  • 43
  • 1
  • 7
  • sounds like you need to normalize the css first because without that the browser does its only pre rendered styling. Also use a fallback on your font incase the browser does not recognise it. – PhpDude Feb 08 '17 at 11:37
  • I don't know how to do that :s I'm not an expert in all of this – Oihane Feb 08 '17 at 11:40
  • Can you please paste the html for your "post titles" and the css that is supposed to be applying the font. The other issue you are talking about with the slight miss-alignment of text between OSX and WIN is probably in relation to the difference in font rendering engines between the 2 operating systems. you can read about that here: https://www.smashingmagazine.com/2012/04/a-closer-look-at-font-rendering/ Nothing you can really do about it unfortunately. – Zze Feb 08 '17 at 11:49
  • I will post the css of the post titles – Oihane Feb 08 '17 at 12:00
  • @Zze I edited my question and I've put in the css of my titles – Oihane Feb 08 '17 at 12:05
  • @Zze But it is with every font I have, I also downloaded a font: 'caviar dreams' and I put it in my fonts folder of my theme. Then I add ´font-family: caviar dreams;´ to a certain element, but on mac, the font 'caviar dreams' doesn't show – Oihane Feb 08 '17 at 12:11
  • If the fonts don't show up, then you need to 'embed' them see: http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp currently with `font-family: adobe arabic;` it is looking in your computers installed fonts, not the folder you've put the font in. i.e. embed them and reference those instead..... The rendering engines are the mechanisms behind how the different operating systems interpret and display the fonts. So once you get both fonts loading correctly, you will find some small spacing and sizing discrepancies. – Zze Feb 08 '17 at 12:16

3 Answers3

1

Most likely the reason is you don't have those fonts installed on your Mac. For webpages, you need to define fonts using @font-face rule. Using @font-face, you provide the fonts along with your webpage or by using the provided url and the browser can use it.

  • So if I put it in my fonts folder of my theme, And I upload and activate the theme, I am the only one that can see it? – Oihane Feb 08 '17 at 12:14
  • Because it isn't only with installed fonts. I used a basic adobe arabic, and it doesn't show on a mac or on iphone – Oihane Feb 08 '17 at 12:15
  • you can put the fonts in the folder of your webpage and add it to the css using @fontface rule or add a url link to the in the css either one should suffice –  Feb 08 '17 at 12:23
1

Firstly you should add new font to your project via CSS. Here you have ideas how to do this properly:

How to add some non-standard font to a website?

I recomend to read the Javier Cadiz's answer as he suggest to use .woff format which is the best solution in my opinion.

Community
  • 1
  • 1
Agata
  • 41
  • 3
0

First, you need to embed the font so that the world knows about it.

You can do this by either implementing @font-face:

@font-face {
    font-family: myFont;
    src: url(path/to/your/font.ttf);
    font-weight: bold;
}
p{font-family: myFont}

Or you could use the import method in CSS3.

@import url('https://fonts.googleapis.com/css?family=Barrio');
p{
  font-family: 'Barrio', cursive;
}
<p>hello</p>

As you can see, we can now see our custom font even though nobody has it installed.

The other issue you are talking about with the slight miss-alignment of text between OSX and WIN is probably in relation to the difference in font rendering engines between the 2 operating systems. you can read about that here .. Nothing you can really do about it unfortunately.

Rendering engines are the mechanisms behind how the different operating systems interpret and display the fonts. So once you get both fonts loading correctly, you will find some small spacing and sizing discrepancies.

Zze
  • 18,229
  • 13
  • 85
  • 118