Hi I'm using something called "socicon" http://www.socicon.com but it's not working as I want.
it work in the html documents 1,2 and 3 but if I try to use it in any of the html documents in the stuff folder it doesn't work.
this is what it looks like
folder "project name"
folder "stuff"
folder "css"
font.css
MonoSocialIconsFont-1.10.eot
MonoSocialIconsFont-1.10.otf
MonoSocialIconsFont-1.10.svg
MonoSocialIconsFont-1.10.ttf
MonoSocialIconsFont-1.10.woff
1.html
2.html
3.html
html
<head>
<link rel="stylesheet" href="../css/fonts.css" />
</head
<body
<header>
<div class="logo">
<h1>Bengzoor</h1>
</div>
<div class="social-media">
<a target="_blank" href="https://www.facebook.com"><span class="symbol">facebook</span></a>
<a target="_blank" href="https://www.twitter.com"><span class="symbol">twitter</span></a>
<a target="_blank" href="https://www.youtube.com/user/Terroristutrotaren"><span class="symbol">youtube</span></a>
</div>
</header>
<body
css
#font-face {
font-family: 'Mono Social Icons Font';
src: url('.MonoSocialIconsFont-1.10.eot');
src: url('MonoSocialIconsFont-1.10.eot?#iefix') format('embedded-opentype'),
url('MonoSocialIconsFont-1.10.woff') format('woff'),
url('MonoSocialIconsFont-1.10.ttf') format('truetype'),
url('MonoSocialIconsFont-1.10.svg#MonoSocialIconsFont') format('svg');
src: url('MonoSocialIconsFont-1.10.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
.symbol, a.symbol:before {
font-family: 'Mono Social Icons Font';
-webkit-text-rendering: optimizeLegibility;
-moz-text-rendering: optimizeLegibility;
-ms-text-rendering: optimizeLegibility;
-o-text-rendering: optimizeLegibility;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
}
a.symbol:before {
content: attr(title);
margin-right: 0.3em;
font-size: 130%;
}
Related
I have a web app with two fonts, Amatic SC for h1 and h2 and Open Sans for the rest. The webpage displays strong text fine on most browsers:
For Safari on iOS 9 (tested on iPhone 4S) and Internet Explorer 11 on Windows 8.1 (tested on LambdaTest), the strong elements use the font from the h1 and h2 elements:
The relevant CSS for these elements is:
#font-face {
font-family: 'Amatic SC';
font-style: normal;
font-weight: 400;
src: url(/fonts/amatic-sc-v13-latin-regular.woff2) format('woff2'), url(/fonts/amatic-sc-v13-latin-regular.woff) format('woff'); }
#font-face {
font-family: 'Amatic SC';
font-style: bold;
font-weight: 700;
src: url(/fonts/amatic-sc-v13-latin-700.woff2) format('woff2'), url(/fonts/amatic-sc-v13-latin-700.woff) format('woff'); }
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url(/fonts/open-sans-v17-latin-regular.woff2) format('woff2'), url(/fonts/open-sans-v17-latin-regular.woff) format('woff');
}
#font-face {
font-family: 'Open Sans';
font-style: bold;
font-weight: 700;
src: url(/fonts/open-sans-v17-latin-700.woff2) format('woff2'), url(/fonts/amatic-sc-v13-latin-regular.woff) format('woff');
}
body {
font-family: 'Open Sans', sans-serif;
}
h1, h2 {
margin: 0.5rem 0 0.5rem 0;
text-align: left;
font-family: Amatic SC, cursive;
font-weight: bold;
}
The website is at www.emotionathletes.org if you want to further inspect.
What is the reason for the use of a different font on iOS Safari and Internet Explorer?
Minimal reproducible example
Following the comment, I narrowed the issue to the loading of the fonts. If I load them in the head of the HTML, linked to Google Fonts, then the page displays well. If I load them locally in the CSS with #font-face from a woff or woff2 file, then the strong elements display with a different font on iOS 9 on iPhone 4S and on Internet Explorer 11 on Windows 8.1. The order of loading the fonts in the CSS does not change the result.
A minimal reproducible example has HTML file strong.html:
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta charset="utf-8"><meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" href="strong.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap" rel="stylesheet">
</head>
<body>
<h2>Summary</h2>
<p>The Bulgy series, whose first season is "Emotion Athletes", has the following purposes:</p>
<ul>
<li>
transform the <strong>difficulties</strong> of the <strong>pandemic</strong> into <strong>opportunities</strong> for children to <strong>recognise what they are feeling, understand the reason, and use their emotions</strong>;
</li>
</ul>
</body>
</html>
and CSS file strong.css:
/*
Amatic SC and Open Sans are Google Fonts:
https://fonts.google.com/specimen/Amatic+SC?sidebar.open=true&selection.family=Open+Sans#about
https://fonts.google.com/specimen/Open+Sans?sidebar.open=true&selection.family=Open+Sans#about
*/
/* comment these #font-faces for the page to work properly. */
#font-face {
font-family: 'Amatic SC';
font-style: normal;
font-weight: 400;
src: url(/fonts/amatic-sc-v13-latin-regular.woff2) format('woff2'), url(/fonts/amatic-sc-v13-latin-regular.woff) format('woff'); }
#font-face {
font-family: 'Amatic SC';
font-style: bold;
font-weight: 700;
src: url(/fonts/amatic-sc-v13-latin-700.woff2) format('woff2'), url(/fonts/amatic-sc-v13-latin-700.woff) format('woff'); }
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url(/fonts/open-sans-v17-latin-regular.woff2) format('woff2'), url(/fonts/open-sans-v17-latin-regular.woff) format('woff');
}
#font-face {
font-family: 'Open Sans';
font-style: bold;
font-weight: 700;
src: url(/fonts/open-sans-v17-latin-700.woff2) format('woff2'), url(/fonts/amatic-sc-v13-latin-regular.woff) format('woff');
}
body {
font-family: 'Open Sans', sans-serif;
}
h1, h2 {
font-family: 'Amatic SC', cursive;
}
I put a live version at www.emotionathletes.org/strong.html, with CSS file at www.emotionathletes.org/strong.css.
For my own reasons, I prefer to serve the font files from my server than query them from Google Fonts. How can I serve the font files locally and still display them properly on Safari and Internet Explorer?
The issue was in the code, which I found today as I was changing the main font:
For Open Sans at 700, the woff filepath was:
/fonts/amatic-sc-v13-latin-regular.woff
and should have been:
/fonts/open-sans-v17-latin-700.woff
Older browsers use woff and not woff2, and so they were doing exactly as they were told. I now fixed the issue.
Moral of the story: if using local fonts for performance, make sure to do the right wiring of CSS to filepaths.
I am using #font-face to define a font family in my CSS style sheet. When I then try to set the font family attribute, I am not able to get the new font to display on my HTML page.
#font-face {
font-family: 'Goudy Trajan Regular';
font-style: normal;
font-weight: 400;
src: local('Goudy Trajan Regular'), local('GoudyTrajan-Regular'),
url(http://allfont.net/cache/fonts/goudy-trajan-regular_9c60d369eeef3d3ea1e3ddaa07f3e15f.woff) format('woff'),
url(http://allfont.net/cache/fonts/goudy-trajan-regular_9c60d369eeef3d3ea1e3ddaa07f3e15f.ttf) format('truetype');
}
html, body
{
height: 95%;
width: 90%;
font-family: 'Goudy Trajan Regular', arial;
}
Update: I've stripped everything out and it still is not working. Here is my complete CSS -
#font-face {
font-family: 'Goudy Trajan Regular';
font-style: normal;
font-weight: 400;
src: local('☺'),
url(http://allfont.net/cache/fonts/goudy-trajan-regular_9c60d369eeef3d3ea1e3ddaa07f3e15f.woff) format('woff'),
url(http://allfont.net/cache/fonts/goudy-trajan-regular_9c60d369eeef3d3ea1e3ddaa07f3e15f.ttf) format('truetype');
}
body
{
font-family: 'Goudy Trajan Regular', arial;
}
Here is my complete HTML -
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style2.css">
</head>
<body>
<h1>TESTING A NEW FONT</h1>
</body>
</html>
I'm using google material Icon font library for the majority of icons in a web app. I've started debugging for Microsoft Edge and realised none of them are showing.
Is this a known issue? I can switch to actual icon images if need be but it would be a massive job at this stage.
Try to use F12 developer tools to check whether the Google Icons CSS reference load success.
The following code works well on Edge 42 and Edge 44 version:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style type="text/css">
#font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'), url(https://example.com/MaterialIcons-Regular.woff) format('woff'), url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
</style>
<i class="material-icons">face</i>
The output screenshot as below:
I'm programming a website where I created 4 buttons that link to my social media profiles. I want to include the icon of the resp. social media on the button. I use the Mono Social Icons Font.
On this website you see what it should look like: http://cholleton.ch
This is the code I used:
<div class="col-md-3 col-sm-6 col-xs-6">
</div>
In main.css I added
#font-face {
font-family: 'Mono Social Icons Font';
src: url('../fonts/social/MonoSocialIconsFont-1.10.eot');
src: url('../fonts/social/MonoSocialIconsFont-1.10.eot?#iefix') format('embedded-opentype'),
url('../fonts/social/MonoSocialIconsFont-1.10.woff') format('woff'),
url('../fonts/social/MonoSocialIconsFont-1.10.ttf') format('truetype'),
url('../fonts/social/MonoSocialIconsFont-1.10.svg#MonoSocialIconsFont') format('svg');
src: url('../fonts/social/MonoSocialIconsFont-1.10.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
.symbol, a.symbol:before {
font-family: 'Mono Social Icons Font';
-webkit-text-rendering: optimizeLegibility;
-moz-text-rendering: optimizeLegibility;
-ms-text-rendering: optimizeLegibility;
-o-text-rendering: optimizeLegibility;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
}
.links {
font-size: 10vh;
text-align: center;
}
.linkedin {
background-color: #4488cc;
}
Thanks a lot for your suggestions!
Thomas
I think you just forgot to put the text in your link, like this :
circlelinkedin
See this fiddle
if you have the image set as a background image in your class then out a non-breaking space before your end </a> tag. If you want an image that is saved on your directory then use something like this
<img src="http://www.yourdomain.com/images/linkedin.jpg" alt="linked in">
After much review, I can't get the correct display of a custom font I created through fontsquirrel. Chrome's Inspector shows the icon is in place but all I get is this default icon box ;o(
Rails 4 app, Bootstrap
Any ideas?
application.rb:
config.assets.paths << Rails.root.join("app", "assets", "fonts")
html:
<div class="hatfont icon-balloon01"></div>
here's my CSS:
hatfont {
font-family: 'haticon';
text-transform: uppercase;
div {
font-family: haticon;
}
}
#font-face {
font-family: 'haticon';
src:assets-url('fonts/haticon.eot');
src:assets-url('fonts/haticon.eot?#iefix') format('embedded-opentype'),
assets-url('fonts/haticon.woff') format('woff'),
assets-url('fonts/haticon.ttf') format('truetype'),
assets-url('fonts/haticon.svg#haticon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'haticon';
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-graphs:before {
content: "\e600";
}
I've had this issue before myself. I can't identify the problem specifically from what you've provided, but a few things come to mind. Check your link references in your CSS. Make sure no files were moved and that your stylesheet is in the same directory as your fonts folder. Also, the %> under your font-face looks out of place... I don't know if that's a Rails thing or not. Here's an example of something that I've used before that's worked. Obviously, you'd need to substitute your font files. :
#font-face {
font-family: 'FontAwesome';
src: url('fonts/fontawesome-webfont.eot?v=4.0.3');
src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'),url('fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'),url('fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'),url('fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}