My site looks different on mobile, it doesn't show coming soon and doesn't have the correct fonts. What's wrong?
Here you can see on mobile http://i.stack.imgur.com/9fdS7.jpg and here it is on my computer http://i.stack.imgur.com/eqncM.png
the website is rushir.co/lofty
The font is displaying on your desktop because, I'm pretty sure, you have the font installed on your system.
Your line that loads the ttf file is incorrect:
src: url("font/Pacifico.ttf") format("truetype");
It needs to be relative to your css file:
src: url("../font/Pacifico.ttf") format("truetype");
Related
My Website that I'm hosting on Github Pages with a namecheap domain, doesn't allow iOS users (haven't tried android) to see the fonts. I've tried this on iOS 14.3 on an iPhone 7 with both Safari, and Chrome
The font displayed on my Windows 10 Computer is Calibri but on iOS it shows up as Times New Roman (default)
my website is http://joswinjohn.me,
html file is https://raw.githubusercontent.com/joswinjohn/joswinjohn.github.io/master/index.html
css file is https://raw.githubusercontent.com/joswinjohn/joswinjohn.github.io/master/css/style.css
the repo is https://github.com/joswinjohn/joswinjohn.github.io if you need anything else
if there's anything I've left out please let me know!
Your Windows device is correctly displaying your "Calibri" font because that font is already installed on the device. To use a font that is not installed in the target device, you need to include the font file itself and reference it in your CSS file:
#font-face {
font-family: Calibri;
src: url("Calibri.ttf") format("truetype"), url("Calibri.otf") format("opentype"), url("Calibri.woff") format("woff"), url("Calibri.woff2") format("woff2");
}
In src you can use 1 or more url()s. If you use more than one, the browser will use the first match, or the first one it supports. Make sure what is inside url() matches your font file's path.
I can't change the fonts to custom fonts in my project. But The following code does work in a separate test case, but I don't know why this doesn't work in my working project. I don't know what is causing the issue.
I can change the fonts to some default fonts but not custom fonts.
#font-face{
font-family: nazanin;
src: url(nazanin.ttf);
}
.customFont{
font-family: nazanin;
}
<h1 class="nazanin">This is a custom Font</h1>
👋
First of all, is the path to your font really nazanin.ttf? Is it in the same folder as this current CSS file?
If it is in a separate folder called "fonts", then try something like this:
#font-face{
font-family: nazanin;
src: url(../fonts/nazanin.ttf);
}
Second of all, the .ttf file extension is for Safari, iOS, and Android. Are you using a different browser? If so, that's the problem. I would suggest going with the .woff extension because it is compatible with most modern browsers.
I just realized to my horror that not all computers/browsers/OSs have the default Futura font installed. I display it on my website but is thus not viewable for all visitors as this font is not default when using other OS than OSX. What is the best way to overcome this problem and maintain the Futura font?
Ok I fixed my issue in the following way:
1) Went to http://transfonter.org/ttc-unpack to convert OSX Futura.ttc to Futura.ttf
2) Then created Futura.woff and Futura.woff2 files at: https://www.fontsquirrel.com/tools/webfont-generator
3) Then added the following code to style.css:
#font-face {
font-family: 'Futura';
src:
local('Futura'),
url('fonts/Futura.ttc'),
url('fonts/Futura.woff') format('woff'),
url('fonts/Futura.woff2') format('woff2');
}
I added the fonts to the fonts/ folder which is in the same directory as my style.css.
I want to use Gotham font for my website which is not a web-safe font so I have the font sitting in the directory called 'gotham':
index.html
style.css
Gotham/Gotham-Light.otf
Here's what my CSS file looks like in the part that sets the font:
p.gotham-thin{font-family:"Gotham-Light";}
#font-face {
font-family: Gotham-Light;
src: url('Gotham/Gotham-Light.otf') format('opentype');
}
here's what index.html does:
<p style="margin-top:140px; font-size:54px;" class="gotham-thin">ABOUT DIALOGIC</p>
but the Gotham font is only working on my computer in Google Chrome since I have the font installed locally, but when I run a VM that doesn't have the font installed then it will just use Tahoma font instead.
Is the problem that I'm using the OTF font file type?
Here are my steps to have the font working:
Font face first in css (font code on top of master css)
Have the type/format of font - EX: src: url(Gotham.ttf) format('truetype')
Also multiple fonts to support all browsers like the comment replied you got.
Make sure your host (local or not) has the MIME type for these fonts
I'm having a font-face the menu of my webpage. For all browsers is loading fine except for Internet Explorer. Here's what I'm using in my css:
#font-face{
font-family: 'MyriadProSemibold';
src: url('fonts/MyriadPro-Semibold.eot');
src: local(MyriadPro-Semibold), url('fonts/MyriadPro-Semibold.otf') format('opentype');
}
Fonts are in a folder called fonts that is located in the same folder as the css file. I don't know how to debug this problem is anyone could point out what need to be done in order to make them work for IE9?
I suggest you put the opentype file into the font-face generator. Click on generate and download the .zip file you get.
Copy the fonts to your webhost and copy the CSS styles in the stylesheets.css into your stylesheet, you can change the name and you need to correct the paths to the new paths. Now it works on FireFox 3.5+, Chrome4+, Opera10+, iPad, iPhone, IE4+ (!) and Safari3.1+.
This is the font-face format I use:
#font-face {font-family: 'MyriadProSemibold';
src: url('MyriadProSemibold.eot');src: url('MyriadProSemibold.eot?#iefix') format('embedded-opentype'),url('MyriadProSemibold.woff') format('woff'),url('MyriadProSemibold.ttf') format('truetype');}