We Keep Coding

How do I change fonts depending on language in same paragraph?

I'm working on a WordPress website and there is already a lot of content written in both Chinese and English. So it's not a normal multilingual site where you get redirected to a Chinese version of the site and and English version.
I tried using #fontface to detect a unicode range
#font-face {
font-family: 'NotoSans';
src: url('fonts/chinese/NotoSansCJKtc-Thin.otf') format('opentype');
font-weight: 200;
unicode-range: U+4E00-U+9FFF, U+3400-U+4DBF, U+2B740–U+2B81F; /* CJK unicode */
}
and then use
body {
font-family: "NotoSans", "Nunito";
}
But then all text, Chinese and English, uses the Noto Sans font. I only want the Chinese text to use Noto Sans. Where am I going wrong with the above - Should it just not apply the Noto Sans font where unicode-range is determined and fall back onto Nunito font for outside that range?
Alternatively,
Or should I try using javascript to detect unicode-range and apply a span with specific class? But would that wrap every character in the span?
if(/^[\u4e00-\u9faf]+$/ || /^[\u3400-\u4dbf]+$/ || /^[\u2b740-\u2b81f]+$/)) {
// add span around
}
Here's an example text:
協辦單位：黃霑書房、Every Life Is A Song 一個人一首歌
so then I want,
<span class="chinese-font">協辦單位：黃霑書房</span>、Every Life Is A Song <span class="chinese-font">一個人一首歌</span>
Is that a better solution? How would I write the javascript code?

I am trying to use JS/JQuery to automatically perform multiple find and replace actions on text in a website

I’m having issues with multiple replacements, I am wanting to replace the three words of a company name throughout the website with the company colours, I really don’t want to go through and manually add a span for each of the three words individually although I know this would work, is there anyway of doing this with code? BTW I’m a novice at JS/JQuery, etc.
I have had a go I can get one to work but when I try to do more than one only the last one works, it seems as though the last one cancels out the others.
I am happy enough with the CSS as this can easily be changed later.
Here is my code. - http://codepen.io/TechieBloke/pen/dMmNRB
var text = $('div').text().replace(/dummy/g, "<span class=artblack>dummy</span>");
$('div').html(text);
var text = $('div').text().replace(/Ipsum/g, "<span class='artgrey'>Ipsum</span>");
$('div').html(text);
var text = $('div').text().replace(/Lorem/g, "<span class='artred'>Lorem</span>");
$('div').html(text);
And here is the accompanying CSS
.artblack {
color: orange;
font: 15px arial, sans-serif;
}
.artgrey {
color: blue;
font: 15px arial, sans-serif;
}
.artred {
color: red;
font: 15px arial, sans-serif;
}

You modify the html each time, but then go back to text to use as source for the next change; just be more consistent and use html() instead:
$('div').html().replace()

Missing font tags on default ckeditor config

I'm having a super annoying problem with CKEditor.
When I first load it, it appears like this:
then, when I click inside to type, it goes like this:
ok, everything just fine, but look what happens with the content when I type something:
I don't have any Arial 12 labeling, so when I get this HTML and process it, I'll never know it should be Arial 12.
Now, if I manually change it, then it works, but when I click outside the CKEditor window and then back inside again, it returns to the initial state, with no tags, look:
I've tried every solution on google, like adding
font-family: sans-serif, Arial, Verdana, "Trebuchet MS" !important;
font-size: 12px !important; in content.css,
or adding
config.font_defaultLabel = 'Arial';
config.fontSize_defaultLabel = '12px';
in config.js, etc.
Could someone help me, please?

I think you misunderstood what config.font_defaultLabel, config.fontSize_defaultLabel do. They do only one thing - set the default labels in the dropdowns. Nothing more.
So how do you apply Arial 12px to the whole content? Using contents.css just like you did.
I don't have any Arial 12 labeling, so when I get this HTML and process it, I'll never know it should be Arial 12.
You just set it in the contents.css so I think you know that very well ;).
But I want <span> tags wrapping the whole content! (my quote :P)
CKEditor will not help with that, because this is against good practices. You should use power of CSS instead of dirtying your HTML with presentation markup.

changing text font through css for specific text in d3

I am using the d3 framework and I am trying to specify the font the following element using css (I want to use a custom font, that is why I am using css).
var anchorNode = svg.selectAll("g.anchorNode").data(force2.nodes()).enter().append("svg:g").attr("class", "anchorNode");
anchorNode.append("svg:circle");
anchorNode.append("svg:text").text("test");
I tried using
text {
font: 2px Arial;
pointer-events: none;
}
but this does not work for this specific text. I am assuming it is because the text is appended to the node. What would be the correct syntax to access the text in css?

Do you have a link to the rendered HTML or a jsfiddle?
It looks like your appending a class called anchorNode. You could possibly updating the CSS font for that class:
.anchorNode {
font-family: "Times New Roman", Times, serif;
font-size: 2px;
}

How to style JavaScript created text using CSS's #font-face

I'm trying to create a page which uses java script to get data via PHP and then display it using a custom font declared in a CSS style sheet.
The entire page should use one custom font which I have declared in the main CSS file using #font-face like so:
#font-face {
font-family: 'bauhaus';
src: url('fonts/Bauhaus.woff') format('woff'),
font-weight: normal;
font-style: normal; }
My HTML file looks like this:
<html>
<head>
<script type="text/javascript" src="resources/raphael-min.js"></script>
<script type="text/javascript" src="resources/index.js"></script>
<link href="Main.css" rel="stylesheet" type="text/css">
<style type="text/css">
#canvas_container {
width: 100%;
border: 1px solid #aaa;
font-family:'bauhaus', "Times New Roman", Times, serif;
}
</style>
</head>
<body>
<div id="canvas_container">FONTTEST</div>
</body>
</html>
Within the index.js I can create text objects using Raphaeljs' syntax like so:
var txt = paper.text(150, 590, 'Test123').attr({'font-family': bauhaus, 'font-size':'70', fill:'#000'});
If I do it like that no 'Test123' text appears at all (I assume because it can't find or use the style 'bauhaus') and if I remove the font-family attribute it shows me text using the browser's default style which in my case is Arial.
The 'FONTTEST' text on the other hand is displayed correctly using the correct #font-face Font.
Now my question is how to automatically have text created by Raphaeljs (or other Javascript libraries) follow the style declared by the CSS statements? I like using custom fonts but I can't find a proper solution on how to easily use the stylized text with Javascript.
Thanks for your help!

Rather than writing out your CSS attributes in-line in your JS, why not change your CSS at the top from #canvas_container to .canvas_container , and then put the attribute "class='canvas_container' " on all of your elements which you want that font on? Should be easier to specify the class attribute than the style attribute.
An even better approach, if you want the entire page to use your font, would be to put this in your CSS (in your case, the style element):
html, body { font-family: 'bauhaus', "Times New Roman", Times, serif; }
That will make all HTML and BODY elements use your font unless later overwritten.

Well, after a bit of searching through Raphael's code I found it automatically sets its own font style (Arial) on all its text elements. I don't think that really makes sense, especially since I couldn't figure out on how to override it with a CSS '#font-face' font, but ok.
My solution was to simply delete the automatic setting of the font attribute in Raphael's source code.
For anyone interested, it's in the part where theText is declared. Just delete the font: availableAttrs.font bit in res.attrsand everything will obey the CSS style you want.

You need to register the font with cufon. See http://raphaeljs.com/reference.html#Raphael.registerFont and https://github.com/sorccu/cufon/wiki/about.

You can assign the style of your text explicitly not thinking about what really does.
Write a specific styler object function like:
function Styler( style )
{
this._style = style;
this.get = function( text)
{
return "<span style=" + this._style + "'>" + text + "</span>";
}
}
and then use everywhere:
myStyler = new Styler( 'font-size: 20px; font-weight: bold' );
...
text1 = myStyler.get( "text1" );
text2 = myStyler.get( "text2" );