Byta font i meny(Wordpress)

2015-01-21, 11:59 #1

Medlem

Reg: Jan 2011

Inlägg: 644

Hej!

Jag ska byta font i min menyrad. Hemsidan är gjord i wordpress.
Räcker det att jag byter "BebasNeueRegular, Helvetica, Arial, sans-serif;" mot namnet på den font jag vill ha i style.css eller måste jag även ladda upp någon fil eller något?
Behöver jag skriva namnet på den nya fonten någon annan stans?

Fonten jag vill byta till heter Flajja One. Byter jag ut texten till det händer inget.. varför?

ul#menu-main {
display: block;
margin: 8px 0 0 0;
clear: both;
padding: 0 0 0 20px;
background: #ee4952;
list-style: none;
height: 60px;
font-family: BebasNeueRegular, Helvetica, Arial, sans-serif;
font-size: 18px;
}

Citera

2015-01-21, 13:26 #2

Medlem

Reg: Dec 2014

Inlägg: 1 036

Du måste ladda in fontet antingen genom att ladda upp den i din tema-mapp, eller använda dig utav Google Fonts och koppla ihop.

Om du väljer att ladda in ett font från din tema-mapp. Låt oss säga att du har följande struktur (fetmarkerat är mappar):

fonts
includes
images
js
languages
404.php
comments.php
...
style.css

Ladda först upp ditt font i mappen fonts om du inte har mappen, skapa den. Sedan öppnar du filen style.css i en texteditor och lägger till följande:

Kod:

@font-face {
  font-family: 'MyWebFont';
  src: url('fonts/myfont.ttf') format('truetype');
}

Sedan kan du bara lägga till MyWebFont efter font-family i den koden du la till så bör den visas.

Ett annat sätt är att köra Google Fonts som jag nämnde ibörjan. Du letar upp ett trevligt typsnitt, väljer den "add to collection". Jag väljer Oswald nu för att demonstrera. Sedan väljer du längst ner till höger use och väljer vilka varianter av typsnittet som skall inkluderas.

Jag väljer både Light, Normal och Bold. Då får du olika val nedan där du antingen kan inkludera typsnittet i din header.php (alltid innan </header> taggen), importera direkt till din CSS-fil eller använda Javascript som du lägger i headern också.

Standard (i headern):

Kod:

<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>

@import (i din CSS-fil):

Kod:

@import url(http://fonts.googleapis.com/css?family=Oswald:400,300,700);

Javascript (i headern):

Kod:

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Oswald:400,300,700:latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>

Hoppas det hjälper!

Citera

Byta font i meny(Wordpress)

Skapa ett konto eller logga in för att kommentera

Skapa ett konto

Logga in