First, This is available only for a premium site connected to a domain due to the necessity of using the ‘Custom Code’ feature.
Go to Adobe Fonts, activate the font you want to use and click ’ start a web project ’
you will be asked to weather to create a new web project or continue a previous one (projects can hold multiple fonts).
Once you make the choice you will be given a link element to copy and the css properties to use the font.
Copy and paste the information on some note.
From here you have two ways (that i’m aware of) to use the font on your site.
The first:
Go to the code pane l, and console.log( #elementID ) the element you want to change the font of, or the element who’s children you want to change the font of, and copy their unique-id from the log.
For instance, if you want to change a single H2 item that has the ID of #someTitle, write console.log($w(‘#someTitle’)); in the code panel.
And if for example, you want all the H2 elements in the page to change their font, log the page item which is typically named by default with the id #page1.
In which case, write console.log($w(‘#page1’)); in the code panel.
Publish your site and open a tab to the live site using Google Chrome.
Once it loads press cmd+alt/option+J on mac, ctrl+alt+J on windows.
This will open developer tools, there pick the Console View from the dropdown menu.
Then on the sidebar, choose user messages, and refresh the page if it wasn’t freshly opened.
Here you will see Either the word Object with a small arrow next to it, or alternatively a small arrow with {…} next to it
Click on it, and it will open a large list of items.
Search for the item called: uniqueId.
click the (…) next to it, and the id will be revealed.
This is what a page id would look like
This is what a paragraph id would look like
Copy and paste the id on a note somewhere.
Now that you have the information you need, you can proceed in implementing the font on the website.
Go to your dashboard, and into settings. Scroll down to find ‘Custom Code’ and click on it.
click the ’ Add Custom Code ’ button.
In that little form thing do as followed:
<link rel="stylesheet" href="https://use.typekit.net/upd7gou.css">
<style>
#iw0jo h2 {
font-family: bd-micronfont, sans-serif;
font-weight: 400;
font-style: normal;
}
</style>
Paste the above snippet in that text-box.
This is what the snippet is composed of:
- object connects the website to the Adobe Font
- indicates the beginning of css styling
-
indicates that this is an id
-
iw0jo is the uniqueId for the previously fetched $w(‘#page1’) element in the editor
-
h2 represents any H2 element under the parent container of the #page1 element. This basically means all the H2 items on the page.
font-family: is telling the h2 items under #iw0jo container to use the font that you chose to activate in Adobe Fonts, in this case bd-micronfont. It also tells the browser of the user that incase he was unable to download the font, he can fallback on an available sans-serif font as backup.
font weight: & font-style: are given the values of one of the versions of the font that were activated. -
All the font information, ie font-family, font-weight, font-style, was given by Adobe Fonts (see screen shot above).
In case you want to use the font on a single text element you will stlll need to tell the css which type of text element you want to style.
ie, h1 h2 h3… or p for paragraph. This is because the paragraph gets a container in the actual html, and the id applies to the container and not the actual paragraph.
So if you want to style a paragraph it will look like this:
#comp-l8493xg8 p {
}
Now, in the form thing, choose a name for your piece of code, choose weather it loads on all pages or pick specific pages, and make sure it is placed in the Head.
Click Apply.
Refresh your live site, and your font is implemented where ever you specified it to be.
Alternatively, if you simply want to change the font of a single element here and there, you can use the Velo Code Panel.
First turn on Dev Mode:
Then, you will still need to link the font to the page via Custom Code.
<link rel="stylesheet" href="https://use.typekit.net/upd7gou.css">
And then change the text element’s font via the .html attribute in Velo.
for example:
$w.onReady(function () {
//...
$w('#myText').html = <h1 style="font-family: bd-micronfont, sans-serif;font-weight: 400;font-style: normal;">My Awesome Title</h1>
});
This however, is pretty clumsy and may backfire.
By setting the html of a text element, you basically reset the entire html of the element. This means colors, size, letter spacing, everything.
You also remove the text from the text element, which is why I had to type “My Awesome Title” to basically rewrite my awesome title text that was reset.
To solve this problem I created a function that breaks apart the existing element’s html, surgically inserts the style (any style) I want to add in to it, and then put the html back together.
To trigger the function use this syntax in the page’s code panel:
textStyle($w('#myTextElement), 'style');
or in our case:
$w.onReady(function () {
//...
textStyle($w('#myText'), 'font-family: bd-micronfont, sans-serif;font-weight: 400;font-style: normal;')
});
To find the ID of the element who’s font you want to change, pick it in the editor and search for this on the top right corner of the code panel .
It is recommended you give the element your own name that will be easily recognized.
Add this function into the code panel, as a stand-alone, outside of the $w.onReady(function…
export function textStyle(element, style) {
const raw = element.html.split(/(<|>)/);
const parts = raw.filter(word => word.length > 0);
let i = 0;
parts.forEach((line) => {
if (line[0] == 'p' && line[1] == ' ' || line[0] == 'h' && Number(line[1])) {
if (line.includes('style=')) {
parts.splice(i, 1, line.slice(0,line.length-1).concat(' ', `${style};"`));
}
else {
parts.splice(i, 1, line.concat(' ', `style="${style};"`));
}
}
else if (line[0] == 'p' && line[1] == null ) {
if (line.includes('style=')) {
parts.splice(i, 1, line.slice(0,line.length-1).concat(' ', `${style};"`));
}
else {
parts.splice(i, 1, line.concat(' ', `style="${style};"`));
}
}
i++
});
element.html = parts.join('');
}
And there you go, the text element will show with the new font on the live-site after publishing.
And you can use the textStyle function on as many text elements as you like.
Have fun 