I would like to use two fonts on a site, one for normal text and one of emojis. And even more specifically only for the country flag emojis. So I have found this way of doing the first part.
#font-face {
font-family: emoji;
/* Fonts for text outside emoji blocks */
src: local('Droid Sans Mono'),
local('Lucida Console'),
local('Arial Monospaced'),
local(Arial);
}
#font-face {
font-family: emoji;
src: local('Apple Color Emoji'),
local('Android Emoji'),
local('Segoe UI'),
local(EmojiSymbols),
local(Symbola),
url('font/Symbola-Emoji.eot?#iefix') format('embedded-opentype'),
url('font/Symbola-Emoji.woff') format('woff'),
url('font/Symbola-Emoji.ttf') format('truetype');
/* Emoji unicode blocks */
unicode-range: U+1F300-1F5FF, U+1F600-1F64F, U+1F680-1F6FF, U+2600-26FF;
}
So the question is how I can specify the range for the flags alone when each flag consists of two unicode characters combined? The list of flags can be seen here with the corresponding characters.
Related
Given the element :
<span>一、對話 Dialogues</span>
One of my font is really unelegant on that side, adding an overly wide space :
Is there a css rule to style only the punctuation 、 ?
NB: I searched the web and found nothing. Currently assume only HTML elements can receive styles. So I have to use JS to get the string, then str.replace('、','<span class="punt">、</span>'), then put back the string with the dedicated html element and class. But I would like to ask the community and create this question, even if dumb, so other users may find this question/answer in the future.
You could use #Font-face and Unicode range to style your punctuation with an other font.
First, identify your characters' code :
var charcode = '、'.codePointAt(0).toString(16); // "3001"
alert(charcode) // "3001"
Then, load your default font and your support font with unicode range
/* For general characters *********************************** */
#font-face {
font-family: 'MyFont';
font-style: normal;
font-weight: 400;
src: local('Font1onPC'), /* tries to load local font file */
url('https://fonts.gstatic.com/font.woff2') format('woff2'),
url('https://fonts.gstatic.com/font.woff') format('woff');
}
/* For special characters ********************************** */
#font-face {
font-family: 'MyFont'; /* IMPORTANT: same name*/
src: local('Font2onPC'), /* tries to load local font file */
url('https://fonts.gstatic.com/anotherFont.woff2') format('woff2'),
url('https://fonts.gstatic.com/anotherFont.woff') format('woff');
unicode-range: U+3001; /* IMPORTANT */
}
Should work.
Source : https://jakearchibald.com/2017/combining-fonts/
Alternatively, you could edit that font on this character.
So I can specify my fonts in my website style CSS, and then set the font-family:
#font-face {
font-family: "custom-helvetica";
src: url("/assets/HelveticaNeue.ttf");
src: url("/assets/HelveticaNeueBold.ttf");
src: url("/assets/HelveticaBlkIt.ttf");
}
#font-face {
font-family: "custom-tahoma";
src: url("/assets/Tahoma.ttf");
src: url("/assets/Tahomabd.ttf");
}
html {
font-family: Tahoma, Helvetica, Arial, sans-serif;
}
Here's an example piece of text:
Testing glyphs in PHP: ± µ ⁓ â ฿ ₿
So let's suppose that the font Helvetica contains all the glyphs in the example apart from ±, µ, ⁓ and that the font Tahoma contains all the glyphs in the example apart from â, ฿, ₿. Let's suppose that the font Arial contains every glyph in the example.
How does PHP/CSS work with this?
Will it apply Tahoma to the example and get this result? -
Testing glyphs in PHP: ± µ ⁓ ࠀ ࠀ ࠀ
Or will it decide that Arial is the only font that can render the entire string correctly, and apply that font to the whole string? Or will the font change dynamically throughout the string to adapt to any missing glyphs?
Problem:
I'm attempting to use Abadi MT Condensed Extra Bold font. Unfortunately, I can't find any CDN's that provide this over an API. Is there something wrong with the css code that I'm using to pull in the fonts? I know for sure the stylesheet is being loaded.
Context
The font works when I have it turned on in my system's font book 100%, but not when disabled/removed -- but I understand that it's not practical to expect that every user is going to have that font. So given this, it does not work on an iPhone or Android device.
Am I better off finding a font in a CDN or, is it possible to make this work? Thanks!
Code:
****** fonts.css ********
#font-face {
font-family: 'serif';
src: url('../fonts/Abadi MT Condensed Extra Bold.eot');
src: local('☺'), url('../fonts/Abadi MT Condensed Extra Bold.woff') format('woff'), url('../fonts/Abadi MT Condensed Extra Bold.ttf') format('truetype'), url('../fonts/Abadi MT Condensed Extra Bold.svg') format('svg');
font-weight: normal;
font-style: normal;
}
***** layout.pug *******
doctype html
html(lang='en')
head
meta(charset='utf-8')
meta(name='viewport', content='width=device-width, initial-scale=1, shrink-to-fit=no')
meta(name='description', content='')
meta(name='author', content='')
title #{title}
//jquery
script(src='https://code.jquery.com/jquery-2.2.4.min.js')
script(src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js')
//shopify
script(src='http://sdks.shopifycdn.com/js-buy-sdk/v0/latest/shopify-buy.umd.polyfilled.min.js')
//custom cart
script(src="scripts/cart.js")
//popper
script(src='./vendor/popper/popper.min.js')
//bootstrap
script(src='./vendor/bootstrap/js/bootstrap.min.js')
//Favicons
link(rel='apple-touch-icon', sizes='57x57', href='/favicon/apple-icon-57x57.png')
......
......
// Bootstrap core CSS
link(href='vendor/bootstrap/css/bootstrap.min.css', rel='stylesheet')
//Gliphicons had to be pulled in separately
link(href='//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css', rel='stylesheet')
// Custom fonts for this template
link(href='./stylesheets/fonts.css', rel='stylesheet')
// Custom styles for this template
link(href='./stylesheets/template.css', rel='stylesheet')
Attempted Solutions
I've already attempted solutions like this. Also my CSS code used to not have the entire fonts.css file.
I was able to figure this out, posting for anyone else that has the same issue.
I found this blob to help
So now my final code is
#font-face {
font-family: AbadiBold;
src: url('../fonts/Abadi MT Condensed Extra Bold.ttf') format('truetype');
src:
url("../fonts/Abadi MT Condensed Extra Bold.woff") format("woff"),
url("../fonts/Abadi MT Condensed Extra Bold.otf") format("opentype"),
url("../fonts/Abadi MT Condensed Extra Bold.svg#filename") format("svg");
font-weight: 400;
font-style: normal;
}
* {
font-family: AbadiBold
}
h1, h2, h3, h4, h5, h6, .text-heading {
font-family: AbadiBold
}
here is the page where I want to add custom font http://pgkweb.ru/temp/1/index.html
So the fonts are:
http://pgkweb.ru/temp/1/include/MyriadProCondRegular/MyriadProCondRegular.ttf
http://pgkweb.ru/temp/1/include/MyriadProCondRegular/MyriadProCondRegular.woff
http://pgkweb.ru/temp/1/include/MyriadProCondRegular/MyriadProCondRegular.otf
http://pgkweb.ru/temp/1/include/MyriadProCondRegular/MyriadPro-Cond.eot
And I call them from css (http://pgkweb.ru/temp/1/include/style.css):
/*FONTS*/
#font-face {
font-family: MyriadProCond;
src: url(include/MyriadProCondRegular/MyriadProCondRegular.ttf); /* Путь к файлу со шрифтом */
src: url(include/MyriadProCondRegular/MyriadProCondRegular.woff);
src: url(include/MyriadProCondRegular/MyriadProCondRegular.otf);
src: url(include/MyriadProCondRegular/MyriadPro-Cond.eot);
}
*, body, p,h3,h4 {
font-family: 'MyriadProCond', Arial, sans-serif;
color: #fff;
}
But as I see in FireFox code explorer it doesn't works (line-through). But why?
Your webfonts are inside the "include" folder, as is the stylesheet, i.e. they are both in the same folder, so you have to erase the folder name from the file path in the links, like:
src: url("MyriadProCondRegular/MyriadProCondRegular.ttf");
instead of
src: url("include/MyriadProCondRegular/MyriadProCondRegular.ttf");
the same with all the other URLs
Seems like you are missing quotes around each url, the syntax is also a little off:
#font-face {
font-family: MyriadProCond;
src: url('include/MyriadProCondRegular/MyriadPro-Cond.eot');
src: url('include/MyriadProCondRegular/MyriadProCondRegular.woff') format('woff'), /* Путь к файлу со шрифтом */
url('include/MyriadProCondRegular/MyriadProCondRegular.ttf') format('truetype'),
url('include/MyriadProCondRegular/MyriadProCondRegular.otf') format('otf');
}
See here: https://css-tricks.com/snippets/css/using-font-face/
If this doesn't work, check that the URLs are correct and the fonts are being downloaded (no 404 errors in the network tab).
I have the following code:
#font-face {
font-family: 'icomoon';
src:url('../fonts/icons/icomoon.eot?2hq9os');
src:url('../fonts/icons/icomoon.eot?#iefix2hq9os') format('embedded-opentype'),
url('../fonts/icons/icomoon.woff?2hq9os') format('woff'),
url('../fonts/icons/icomoon.ttf?2hq9os') format('truetype'),
url('../fonts/icons/icomoon.svg?2hq9os#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
now, the problem is that I'm forced to use multiple icon sets (from multiple files) and for my convinience and clean structure I want to have all those icons (from all the files) only within the one 'icomoon' font-face.
For example if:
../fonts/icons/icomoon.* includes icon-1 / icon-2 and icon-3
and
../fonts/icons/customicon.* includes icon-4 / icon-5
how can I include all of them to have within the
#font-face {
font-family: 'icomoon';
-- include multiple files --
}
div#selector { // will have con-1 / icon-2 / icon-3 / icon-4 / icon-5
font-family: icomoon;
}
is that possible at all?
I think that for this purpose you could use IcoMoon PLugin.
With it you can create a custom font combining FontAwesome with your icons and much more.