Other user can read helvetica neue in browser without install the font? - css

I have to use 'helvetica neue' as my asp.net default font. After installed in my pc, I able to add the font into my css, and it is worked while run the web application at local. But after I deployed into server. The 'helvetica neue' font is not working. Is it have to install the font on user computer?
My CSS:
#font-face { font-family: Delicious; src: url('../css/Fonts/HelveticaNeueLTPro-CnO.otf'); }
body
{
background: #fff;
color: #333;
/*font-family: HelveticaNeueLT Pro 63 MdEx;*/
font-family: Delicious, sans-serif;
font-size: 76%; /* all font sizes are related to this initial 'small' font-size setting (which is more or less 12pt) */
min-width: 730px; /* min- and max-width don't work in IE Win 6 and below */
max-width: 1250px;
}

your #font-face is not complete, and you need some more files:
EOT for IE,
SVG fir Ipad,
WOFF for FireFox
TTF/OTF for the rest
You can create those font files at Font Squirrel
#font-face {
font-family: 'Delicious';
src: url('../css/Fonts/HelveticaNeueLTPro-CnO.eot');
}
#font-face {
font-family: 'Delicious';
src: url(//:) format('no404'),
url('../css/Fonts/HelveticaNeueLTPro-CnO.woff') format('woff'),
url('../css/Fonts/HelveticaNeueLTPro-CnO.ttf') format('truetype'),
url('../css/Fonts/HelveticaNeueLTPro-CnO.svg#Delicious') format('svg');
font-weight: normal;
font-style: normal;
}

Related

Why different font are used by Safari on iPad and Mac

When I am loading our website in Safari (need Github authentication) : https://app.alpha-1.cloud.responsive.software/team/633ebdae942ada36567750b0
Look at Responsive Test
Have these settings:
.breadcrumb-link {
font-family: SFPro-Medium;
font-size: 22px;
color: #c14953;
}
#font-face {
font-family: SFPro-Medium;
src: url(/fonts/SF-Pro.ttf);
font-weight: medium;
font-display: swap;
}
Mac:
iPad:
Try to be as specific as possible:
specify the font format also (so "truetype")
specify the font-weight also in your css class
Different safari/browser versions can be more or less "forgiving" when it comes to font-face rules.
css
#font-face {
font-family: SFPro-Medium;
src: url(/fonts/SF-Pro.ttf) format('truetype');
font-weight: medium;
font-display: swap;
}
.breadcrumb-link {
font-family: SFPro-Medium;
font-size: 22px;
color: #c14953;
font-weight: medium;
}
Common issues:
Make sure your font is actually loaded via #font-face by checking the devtools network tab. You might actually see a local version in the first screenshot.
Try numeric font-weight values like 600 instead of medium.
Search for overriding css rules.

#font-face working (locally and in remote server) on Chrome, Safari, Opera but not with Firefox

I have my fonts in my-theme/assets/fonts/my-font.ttf and this is my .css
#font-face {
font-family: 'Jubilat';
src: url('../assets/fonts/Jubilat/Jubilat-Light.eot');
src: url('../assets/fonts/Jubilat/Jubilat-Light.eot?#iefix') format('embedded-opentype'), url('../assets/fonts/Jubilat/Jubilat-Light.woff') format('woff'), url('../assets/fonts/Jubilat/Jubilat-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
body {
font-size: 1.3em;
font-family: "Jubilat-Light", Helvetica Neue, Roboto, Arial, sans-serif;
}
This is a Wordpress site. Also, in Firebug I don't see errors. It is working (locally and in remote server) on Chrome, Safari, Opera but not with Firefox I really don't know what else to do. Thanks.
This is the url
Probably you have wrong names for font-family http://joxi.ru/krDlgpJsEGz6nr
You've named the font family "Jubilat", so that's what you need to refer to it as, despite the font filenames. So, this should do it...
body {
font-size: 1.3em;
font-family: "Jubilat", Helvetica Neue, Roboto, Arial, sans-serif;
}
Alternatively, update the font-face definition and leave the body rule as it is ...
#font-face {
font-family: 'Jubilat-Light';
...

The font I installed (#font-face) is not working across all browsers - only Chrome

I installed a font to the site but it will only show on Chrome (I checked on Firefox and Explorer). I dont know if I am missing something in the coding?
Font Face
#font-face {
font-family: 'octin_sports_freeregular';
src: url('octinsports-webfont.eot');
src: url('octinsports-webfont.eot?#iefix') format('embedded-opentype'),
url('octinsports-webfont.woff') format('woff'),
url('octinsports-webfont.ttf') format('truetype'),
url('octinsports-webfont.svg#octin_sports_freeregular') format('svg');
font-weight: normal;
font-style: normal;
}
Then in the HTML:
<link rel="stylesheet" href="http://weareprodigy.co/stylesheet.css" type="text/css" charset="utf-8">
And in the headings:
h1 {
font-size: 32px;
font-size: 2.25rem;
font-family: 'octin_sports_freeregular', Impact, Charcoal, sans-serif;
text-shadow: 2px 4px 3px rgba(0,0,0,0.7);
}
h2 {
font-size: 28px;
font-size: 1.875rem;
font-family: 'octin_sports_freeregular', Impact, Charcoal, sans-serif;
color: #8CC63E;
-webkit-text-stroke-width: .5px;
-webkit-text-stroke-color: black;
}
Link: www.weareprodigy.co
Each browser uses a different way of loading in the font, some use the EOT file, some use the WOFF file.
You currently only have the EOT file uploaded to the server and chrome uses the EOT file but IE & Firefox will use one of the other two formats.
You will need to make sure that the files are uploaded in the correct place and that within your CSS, you are linking to the correct place.
EDIT
Just had a look through your CSS. Theres no need to have the additional style.css at root level because in the actual theme, the fonts are already been called in. My guess is that the fonts have been put at the root level and not within the theme folder.
EDIT 2
Change your themes style.css file (wp-content/themes/epik/style.css) to show this
#font-face {
font-family: 'octin_sports_freeregular';
src: url('../../../octinsports-webfont.eot');
src: url('../../../octinsports-webfont.eot?#iefix') format('embedded-opentype'),
url('../../../octinsports-webfont.woff') format('woff'),
url('../../../octinsports-webfont.ttf') format('truetype'),
url('../../../octinsports-webfont.svg#octin_sports_freeregular') format('svg');
font-weight: normal;
font-style: normal;
}
Since the fonts are in the root, that should direct to the root file as the css is looking for the fonts in the epik theme folder atm.

Fonts in Html local file

I have a problem when I choose a font in a CSS file. The font doesn't appear correctly in local HTML code.
#main_menu ul li
{
border-left:1px solid #dad8d8;
font-family:"arabic transparent";
font-size:16px;
padding: 0px 20px;
color: #e2001a;
list-style: none;
display: inline;
font-weight: bold;
}
The font in the HTML file isn't like in the Photoshop design.
You better use #font-face from CSS3. Example from W3School:
#font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
}
div
{
font-family:myFirstFont;
}
You have to embbed the font
Use the following website for font generation
www.fontsquirrel.com/fontface/generator
#font-face {
font-family: 'YourFont';
src: url('YourFont.eot');
src: url('YourFont.eot?#iefix') format('embedded-opentype'),
url('YourFont.woff') format('woff'),
url('YourFont.ttf') format('truetype'),
url('YourFont.svg#YourFont') format('svg');
font-weight: normal;
font-style: normal;
}
You cannot just use any font on the web/in HTML. You have something called web-safe fonts and can add custom ones manual.
Check FontSquirrel for conversion techniques: http://www.fontsquirrel.com
If a font is on your local machine, it "can" work if the browser tries to look for it, but you can't rely on it as most other users that visit your website won't have it on theirs, making the font fallback to Arial or an alike default font.
Font-squirrel will give you these formats (name is an example);
arabic.eot
arabic.svg
arabic.ttf
arabic.woff
With all these included all major browsers should be able to read your custom font with the #font-face property:
#font-face {
font-family: 'arabic transparent';
src: url('arabic.eot');
src: url('arabic.eot?#iefix') format('embedded-opentype'),
url('arabic.woff') format('woff'),
url('arabic.ttf') format('truetype'),
url('arabic.svg#arabic_transparent') format('svg');
font-weight: normal;
font-style: normal;
}
#main_menu ul li {
font-family: 'arabic transparent';
}

Font-family not working properly on live server

I am using font-family "angelina". Its working properly on local server. But its not working on live server. It also working on live server just only on my computer. But its not working on any other computers.
I check it in all browsers on other computers but its not working.
I am using CSS code like this
#font-face {
font-family: MyCustomFont;
src: url("ANGELINA.eot") /* EOT file for IE */
}
#font-face {
font-family: MyCustomFont;
src: url("ANGELINA.TTF") /* TTF file for CSS3 browsers */
}
.test_font{
font-family: angelina;
font-size: 36px;
font-weight: bold;
}
You need to have all kinds of font extensions on server to support all browsers.
#font-face {
font-family: MyCustomFont;
src: url('ANGELINA.eot');
src: url('ANGELINA.eot?') format('☺'),
url('ANGELINA.woff') format('woff'),
url('ANGELINA.ttf') format('truetype'),
url('ANGELINA.svg#webfontssbCkuz5') format('svg');
}
You can find all font extensions on this site http://www.google.com/webfonts
It supposed to be:
#font-face {
font-family: angelina;
src: url("ANGELINA.eot") /* EOT file for IE */
}
#font-face {
font-family: angelina;
src: url("ANGELINA.TTF") /* TTF file for CSS3 browsers */
}
if you want to call font-family: angelina;

Resources